登 録 を 受 け 付 けるWebフォームを 作 成 したい
1. 概 要 ホームページ 上 で 会 員 登 録 を 受 け 付 ける 登 録 フォームの 作 り 方 を 説 明 します 弊 社 のシステムを 利 用 すると 会 員 登 録 や 資 料 請 求 などの 登 録 フォームを 作 成 することが 可 能 です cgiプログラムを 組 む 必 要 はありません < フォーム 作 成 設 定 の 手 順 > (1) フィールド 選 択 登 録 フォームで 使 用 する 項 目 の 設 定 を 行 ないます (2) 全 フィールド 共 通 チェック 設 定 入 力 内 容 に 不 備 があった 場 合 各 項 目 に 共 通 で 表 示 するエラーメッセージの 登 録 などを 行 ないます (3)フィールド 別 チェック 設 定 お 客 様 が 入 力 された 内 容 を 項 目 毎 にチェックする 設 定 をします ( 登 録 必 須 の 項 目 が 入 力 されているか 入 力 内 容 に 間 違 いがないか ) (4)デザイン 設 定 入 力 フォーム 入 力 値 チェックエラーページのデザイン 設 定 を 行 ないます 登 録 情 報 を 入 力 する 画 面 および 入 力 情 報 をチェックするページの 設 定 です (5) 基 本 設 定 フォーム 名 非 SSL(http)での 接 続 について SSL 通 信 の 暗 号 強 度 登 録 締 め 切 り 設 定 を 行 います (6) 詳 細 設 定 フォーム 作 成 後 に 確 認 ページやサンキューページ システムエラーページ 締 め 切 りページ 通 知 メールの 設 定 を 行 ないます 登 録 イメージ 図 チェック 画 面 登 録 *** *** *** *** 確 認 画 面 DB 完 了 画 面 Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 2
2.フォーム 作 成 登 録 フォームに 関 する 設 定 は すべて フォーム 管 理 メニューで 行 います 1 フォーム 管 理 メニューで 登 録 ページの 設 定 を 行 います 2 フォームを 作 成 したいデータベース 名 にある[フォー ム 作 成 ]をクリックします 3 [PC 用 のフォームを 作 成 する]をクリックします フォーム 作 成 の 途 中 に 保 存 した 設 定 がある 場 合 は それを 選 択 後 [ 設 定 を 使 って 作 成 する]をクリックします また 完 成 しているフォームの 設 定 を 引 き 継 ぐ 場 合 は そちらを 選 択 後 [ 参 照 して 新 規 に 作 成 する]をクリック します Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 3
3.フィールド 選 択 フォームの 登 録 タイプと 使 用 する 項 目 の 設 定 をします 1 フォームのタイプ を 選 択 します 通 常 のお 問 い 合 わせや 資 料 請 求 のフォームを 作 成 する 場 合 新 規 登 録 を 選 択 してください 更 新 既 に 登 録 されているデータの 更 新 を 行 なうときに 使 用 します 登 録 情 報 変 更 ページなど 削 除 既 に 登 録 されているデータの 削 除 を 行 なうときに 使 用 します 会 員 退 会 ページなど メ ン テ ナ ン ス 項 目 2 フィールドの 選 択 で 登 録 フォームで 入 力 させる 項 目 させない 項 目 を 決 めます お 客 様 に 入 力 して 欲 しい 項 目 は 入 力 項 目 として 使 用 する を 選 択 します ユーザエージェントなどのメンテナンス 項 目 は 入 力 が 不 要 な 項 目 は 特 殊 入 力 ま たは 使 用 しない を 選 択 します メンテナンス 項 目 とは 運 用 側 がよりデータベースを 実 用 的 に 使 用 できるために 設 け るものです 設 定 例 1.メンテナンス 項 目 回 答 日 時 ( 登 録 日 時 ) 特 殊 入 力 を 選 択 し 登 録 日 時 自 動 取 得 を 選 択 します 登 録 時 の 日 時 が 自 動 で 取 得 できます ユーザエージェント 特 殊 入 力 を 選 択 し 登 録 者 ユーザエージェント を 選 択 します 登 録 者 した 人 のブラウザの 名 前 やバージョン OS などを 取 得 できます 2. 入 力 項 目 入 力 項 目 入 力 項 目 として 使 用 する を 選 択 します (メールアドレス)( 弊 社 のサービスについて)( 当 サイトをどこでお 知 りになりました か)(ご 意 見 ご 質 問 ) 3 設 定 が 完 了 したら [ 次 のステップへ]をクリックします ここまでの 設 定 を 保 存 する 場 合 は 設 定 名 を 入 力 して[ 保 存 する]をクリックします Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 4
4. 全 フィールド 共 通 チェック 設 定 入 力 内 容 に 不 備 があった 場 合 各 項 目 で 表 示 するエラーメッセージを 設 定 します 1 共 通 エラーメッセージ 設 定 各 フィールドで 入 力 必 須 または 重 複 不 可 の 設 定 を 行 い それらのエラーが 発 生 し た 場 合 ここで 入 力 したメッセージを 優 先 して 使 用 します 個 別 のメッセージを 表 示 させたい 場 合 は 各 フィールドごとにフォーマットエラーメッ セージを 設 定 してください ( 7ページ 参 照 ) 2 入 力 値 補 正 基 本 設 定 半 角 カタカナを 全 角 カタカナに 変 換 して 取 得 にチェックを 入 れます 登 録 データに 含 まれる 半 角 カタカナ 文 字 を 全 角 カタカナ 文 字 へ 変 換 します 3 入 力 値 チェック 基 本 設 定 入 力 値 に 機 種 依 存 文 字 が 含 まれる 場 合 は 入 力 値 エラーとする 丸 付 き 文 字 特 殊 記 号 などの 機 種 依 存 文 字 が 入 力 された 場 合 にエラーとして エ ラーメッセージを 表 示 させたい 場 合 にチェックを 入 れます 2フィールドに 跨 る 重 複 チェックを 行 う 例 えば 登 録 フォーム 上 にお 名 前 とメールアドレスの 入 力 欄 があり 両 方 が 重 複 していた 際 にエラーとして エラーメッセージを 表 示 できます 例 : お 名 前 メールアドレス パイプ 太 郎 support@pi-pe.co.jp パイプ 花 子 support@pi-pe.co.jp 登 録 可 能 パイプ 太 郎 support@pi-pe.co.jp エラー ここで 指 定 したフィールドは 入 力 値 チェック 設 定 で 重 複 不 可 にしないでください 4 フィールド 間 入 力 必 須 設 定 例 えば 登 録 フォーム 上 にPCメールアドレス 携 帯 メールアドレスの 入 力 欄 があ る 場 合 両 方 とも 入 力 必 須 にするのではなく 少 なくともどちらか 一 方 に 入 力 させ たい 場 合 などに 設 定 します ここで 指 定 したフィールドは 入 力 値 チェック 設 定 で 入 力 必 須 にしないでください 5 設 定 が 完 了 したら [ 次 のステップへ]をクリックします ここまでの 設 定 を 保 存 する 場 合 は 設 定 名 を 入 力 して[ 保 存 する]をクリックします Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 5
5.フィールド 別 チェック 設 定 お 客 様 が 入 力 された 内 容 を 項 目 毎 にチェックする 設 定 をします 1 登 録 フォームにて 入 力 させる 項 目 まで[ 次 の フィールドへ]ボタンをクリックします 2フィールド 名 を 選 択 して[ 選 択 フィールドへジャンプ]ボタンをクリックすると 選 択 した 項 目 に 進 みます 項 目 数 が 多 い 場 合 は こちらが 便 利 です Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 6
お 客 様 が 入 力 された 内 容 を 項 目 毎 にチェックする 設 定 をします 3 フォームの 表 示 登 録 フォームで 表 示 される 項 目 タイトル を 入 力 します その 他 例 文 注 意 事 項 を 入 力 できます 例 文 入 力 欄 の 下 に 表 示 される 例 文 を 設 定 します 注 意 事 項 項 目 タイトルの 下 に 表 示 される 文 言 を 設 定 します 確 認 入 力 メールアドレスやパスワードで 確 認 用 の 項 目 を 設 定 する 場 合 にチェックをします 例 : 4 入 力 値 のチェック 入 力 必 須 重 複 不 可 に 設 定 するには 入 力 必 須 重 複 不 可 に チェックを 入 れます このページで 設 定 を 行 なう 入 力 必 須 重 複 不 可 は DB 発 行 の フィールド 属 性 設 定 時 で 行 なうものとは 異 なります 改 めてチェックをしてください DB 発 行 時 の フィールド 属 性 設 定 で 入 力 必 須 重 複 不 可 を 設 定 している 場 合 チェックを 外 すことは 出 来 ません 登 録 フォームより 入 力 されるデータの 値 が 正 しいかチェックする 場 合 は 入 力 値 チェック にチェックを 入 れてください 5[ 次 のフィールドへ]をクリックし 次 のフィールドの 入 力 値 のチェッ クを 設 定 します 最 後 の 項 目 を 設 定 すると[ 次 のステップへ]ボタンとなり クリックす ると デザイン 設 定 に 進 みます ここまでの 設 定 を 保 存 する 場 合 は 設 定 名 を 入 力 して[ 保 存 する] をクリックします Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 7
6.デザイン 設 定 入 力 フォーム 入 力 値 チェックエラーページのデザイン 設 定 を 行 ないます 1 HTMLのタイトル を 入 力 します 登 録 フォームのタイトルバーに 表 示 されるタイトルです 2 ヘッダ の 見 出 し 補 足 説 明 を 設 定 します ページ 上 部 のデザイン 設 定 です 見 出 し では 表 示 させたいタイトルや 色 大 きさ 画 像 を 設 定 でき ます 補 足 説 明 では 見 出 し 以 下 に 補 足 文 を 設 定 できます 文 字 サイズは % em px ptから 選 択 できます 色 はパレット(268 色 )より 選 択 できます 画 像 ファイルは 絶 対 パスで 設 定 します また 必 ずSSLサーバに 設 置 してください SSLで 保 護 されていないサーバに 設 置 するとブラ ウザがセキュリティ 警 告 を 表 示 するためです 例 : HTMLのタイトル 見 出 し 補 足 説 明 Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 8
入 力 フォーム 入 力 値 チェックエラーページのデザイン 設 定 を 行 ないます 3 実 際 の 登 録 部 分 フォーム を 設 定 します 入 力 項 目 のレイアウトとスタイル で 入 力 項 目 の 位 置 や 並 び 順 タイトルの 大 きさや 色 を 設 定 します 項 目 タイトルと 入 力 値 の 位 置 では 登 録 フォームが 横 並 び 縦 並 び 携 帯 用 か ら 選 択 できます また 各 項 目 の 表 示 順 の 並 び 替 えをします 例 : 横 並 び 縦 並 び 携 帯 用 5 送 信 ボタン をボタンにするか 画 像 にするか 選 択 します ボタンの 場 合 は 文 言 を 設 定 できます 4 共 通 チェックオプション で 個 別 に 設 定 した 項 目 タイトル 項 目 入 力 欄 例 文 注 意 事 項 入 力 値 エラーメッセージ の 文 字 の 大 きさや 色 を 設 定 します 文 字 サイズは % em px ptから 選 択 できます 色 はパレット(268 色 )より 選 択 できます Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 9
入 力 フォーム 入 力 値 チェックエラーページのデザイン 設 定 を 行 ないます 6 フッタ を 設 定 します 補 足 説 明 部 分 に 文 面 を 設 定 できます ページ 下 部 のデザインを 設 定 します 7ここまでの 設 定 をプレビューで 確 認 します 8 設 定 が 完 了 したら [ 次 のステップへ]をクリックします ここまでの 設 定 を 保 存 する 場 合 は 設 定 名 を 入 力 して[ 保 存 する]をクリックします Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 10
7. 基 本 設 定 フォーム 名 非 SSL(http)での 接 続 について SSL 通 信 の 暗 号 強 度 登 録 締 め 切 り 設 定 を 行 います 1 登 録 フォームの フォーム 名 を 設 定 します ( 例 :アンケートフォーム) 2 非 SSLでの 接 続 を を 許 可 する 許 可 しないを 設 定 します 許 可 しない 場 合 SSLで 暗 号 化 されていない 場 合 の 登 録 を 許 可 しません 許 可 しない を 選 択 します 3 SSL 通 信 の 暗 号 強 度 を 設 定 します 強 度 の 強 い 暗 号 方 式 を 使 った 通 信 のみを 許 可 する 強 を 選 択 します 4 登 録 締 め 切 り 設 定 登 録 の 人 数 ( 例 : 先 着 名 様 まで)や 日 時 ( 月 日 ~ 月 日 までの 期 間 登 録 を 受 け 付 ける)などの 条 件 を 設 定 したい 場 合 条 件 を 入 力 しチェックボックスに チェックを 入 れてください (1)の 条 件 は 外 すことができません 5 設 定 が 完 了 したら [フォームを 発 行 する]をクリックします Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 11
8. 詳 細 設 定 フォーム 作 成 後 に サンキューページやシステムエラーページ 締 め 切 りページ 通 知 メールの 設 定 を 行 ないます 1 データベース 名 をクリックします 2 フォーム 名 をクリックします [ 基 本 設 定 ]の 変 更 が 出 来 ます フォーム 名 使 用 フィールド 設 定 セキュリティレベルの 設 定 の 変 更 をします 入 力 ページ の 変 更 が 出 来 ます 共 通 チェックオプション 設 定 入 力 値 チェック 設 定 デザイン 設 定 の 変 更 をします 3 確 認 ページの 設 定 変 更 をクリックします Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 12
9. 確 認 ページ 設 定 登 録 フォームで 確 認 ページを 使 用 するかしないか 設 定 します 1 確 認 ページを 使 用 しますか? の 使 用 する を 選 択 します 2 [ 変 更 する]ボタンをクリックして 設 定 を 変 更 します Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 13
確 認 ページのデザインを 設 定 します 3 デザイン 設 定 を 選 択 します 4[ 入 力 ページの 設 定 を 反 映 ]ボタンをクリックします 入 力 文 字 以 外 の 文 字 サイズや 色 背 景 色 などは 入 力 ページで 設 定 した 内 容 に 変 更 します 5 HTMLタイトル ヘッダ フッタ のデザインを 設 定 します 補 足 説 明 では 見 出 し 以 下 に 補 足 文 を 設 定 できます 文 字 サイズは % em px ptから 選 択 できます 色 はパレット(268 色 )より 選 択 できます 画 像 ファイルは 絶 対 パスで 設 定 します また 必 ずSSLサーバに 設 置 してください SSLで 保 護 されていないサーバに 設 置 するとブラ ウザがセキュリティ 警 告 を 表 示 するためです 6 設 定 が 完 了 したら[プレビュー]で 確 認 後 [ 変 更 する]ボタンをクリッ クして [フォーム 一 覧 へ 戻 る]で 戻 り [ 変 更 を 反 映 ]ボタンをクリック します 例 : 見 出 し 補 足 説 明 Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 14
10.サンキューページ 設 定 登 録 完 了 後 のサンキューページを 設 定 します 1サンキューページの 設 定 変 更 をクリックします 2 リダイレクト 先 を 設 定 します スパイラル 内 サンキューページを 使 用 を 選 択 します 御 社 サーバに 設 置 したサンキューページを 使 用 する 場 合 は 外 部 サンキュー ページを 使 用 を 選 択 し URLを 入 力 します 3 設 定 が 完 了 したら[ 変 更 する]ボタンをクリックします 次 にサンキューページ のデザインを 設 定 します Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 15
登 録 完 了 後 のサンキューページを 設 定 します 4 デザイン 設 定 を 選 択 します 5[ 入 力 ページの 設 定 を 反 映 ]ボタンをクリックします 入 力 文 字 以 外 の 文 字 サイズや 色 背 景 色 などは 入 力 ページで 設 定 した 内 容 に 変 更 します 6 HTMLタイトル ヘッダ フッダ のデザインを 設 定 します 補 足 説 明 では 見 出 し 以 下 に 補 足 文 を 設 定 できます 文 字 サイズは % em px ptから 選 択 できます 色 はパレット(268 色 )より 選 択 できます 画 像 ファイルは 絶 対 パスで 設 定 します また 必 ずSSLサーバに 設 置 してください SSLで 保 護 されていないサーバに 設 置 するとブラ ウザがセキュリティ 警 告 を 表 示 するためです 7 設 定 が 完 了 したら[プレビュー]で 確 認 後 [ 変 更 する]ボタンをク リックして [フォーム 一 覧 へ 戻 る]で 戻 り [ 変 更 を 反 映 ]ボタンをク リックします 例 : Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 16
11.システムエラーページ システムや 通 信 状 況 に 何 らかのエラーが 発 生 した 場 合 に 表 示 されるエラーページを 作 成 します 通 常 は 表 示 されることはありません 1システムエラーページの 設 定 変 更 をクリックします 2 デザイン 設 定 を 選 択 します 3[ 入 力 ページの 設 定 を 反 映 ]ボタンをクリックします 入 力 文 字 以 外 の 文 字 サイズや 色 背 景 色 などは 入 力 ページで 設 定 した 内 容 に 変 更 します 4 HTMLタイトル ヘッダ フッダ のデザインを 設 定 します 補 足 説 明 では 見 出 し 以 下 に 補 足 文 を 設 定 できます 文 字 サイズは % em px ptから 選 択 できます 色 はパレット(268 色 )より 選 択 できます 画 像 ファイルは 絶 対 パスで 設 定 します また 必 ずSSLサーバに 設 置 してください SSLで 保 護 されていないサーバに 設 置 するとブラウザがセキュリ ティ 警 告 を 表 示 するためです 5 設 定 が 完 了 したら[ 変 更 する]ボタンをクリックして [フォーム 一 覧 へ 戻 る]で 戻 り [ 変 更 を 反 映 ]ボタンをクリックします Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 17
12. 締 め 切 りページ 設 定 締 め 切 りページの 設 定 を 行 ないます 1 締 め 切 りページの 設 定 変 更 をクリックします 2 リダイレクト 先 を 設 定 します スパイラル 内 締 め 切 りページを 使 用 を 選 択 します 御 社 サーバに 設 置 した 締 め 切 りページを 使 用 する 場 合 は 外 部 締 め 切 りページ を 使 用 を 選 択 し URLを 入 力 します 3 登 録 締 め 切 り 設 定 登 録 の 人 数 ( 例 : 先 着 名 様 まで)や 日 時 ( 月 日 ~ 月 日 までの 期 間 登 録 を 受 け 付 ける)などの 条 件 を 設 定 したい 場 合 条 件 を 入 力 しチェックボックスにチェック を 入 れてください (1)の 条 件 は 外 すことができません 4 デザイン 設 定 締 め 切 りページのデザインを 設 定 します 設 定 が 完 了 したら[ 変 更 する]ボタンをクリックして [フォーム 一 覧 へ 戻 る]で 戻 り [ 変 更 を 反 映 ]ボタンをクリックします Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 18
13. 動 作 確 認 設 定 後 実 際 に 登 録 を 行 い 設 定 の 確 認 をします 1[ 変 更 を 反 映 ]をクリックします 入 力 ページ 確 認 ページ サン キューページなどで 個 別 設 定 した 内 容 を 反 映 させます [ 変 更 を 反 映 ]ボタンをクリックしないと 個 別 設 定 はフォームに 反 映 されません 2[プレビュー]をクリックすると 登 録 フォームが 立 ち 上 がります 実 際 にデータを 入 力 して 正 しく 登 録 できるか 確 認 します Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 19
ご 質 問 がございましたら スパイラル ユーザーズデスク よりお 気 軽 にお 呼 び 出 しください 専 門 スタッフより すぐに 折 り 返 しご 連 絡 差 し 上 げます スパイラルにログインし 操 作 画 面 最 上 部 の [ ユーザーズデスク ] ボタンをクリックしてください ポップアップで ユーザーズデスクご 連 絡 フォーム が 開 きます ユーザーズデスク 受 付 時 間 ユーザーズデスクについて 10:00~18:00 ( 土 日 祝 祭 日 年 末 年 始 休 業 を 除 く) http://www.smp.ne.jp/usersdesk/ Copyright 2010 PIPEDBITS Co.,Ltd. All rights Reserved. 20