フォームの新規作成で、フォームのタイプとして「自動生成」を選択した場合の操作を説明します。
このページの概要
| ［配置]タブ | フォームの各画面に表示させるページ要素の追加や設定、ページのレイアウトを編集できます。 |
|---|---|
| ［システムメッセージ］ | フォーム画面に表示するメッセージの表示方法を編集できます。 |
| ［フォーム］ | フォームの配色やフォントサイズ、上下幅の間隔・余白などを編集できます。 |
| ［フォームボタン］ | 次の画面に遷移するためのボタンの配置や余白を編集できます。 |
| ［規約文章］ | 規約文章画面の表示方法や、フォント・配置を編集できます。 |
| ［広告宣伝メールの同意チェック］ | オプトインに関する文言の表示方法を編集できます。 |
| ［画像］ | フォームに配置する画像の配置や、代替テキスト・リンク先URLなどの設定ができます。 |
| ［テキスト］ | フォームに挿入するテキストの表示設定ができます。こちらでHTMLタグの有効設定ができます。 |
| ［区切り線］ | フォームの区切り線の幅やカラー、配置を編集できます。 |
| ［見出し］［タイトル］ | フォームの見出しとなるテキストについて、サイズ・カラー・配置などを編集できます。 |
| ［「戻る」リンク］ | フォーム画面に表示する「戻る」リンクの文言や、サイズ・カラー・配置などを編集できます。 |
| ［デザイン]タブ | フォームの背景色・画像や、レイアウトなどの表示方法を編集できます。 |
| ［確認画面スキップ］タブ | 入力→確認→完了画面のうち、確認画面を省略する設定ができます。 |
| ［戻り先URL]タブ | 完了画面に表示させる「戻る」リンクの表示や、戻り先、表示・非表示を設定できます。 |
| ［フォーム完了時］タブ | 完了画面の遷移先を指定できます。遷移先を設定することで、分岐フォームの作成も可能です。 |
iPhone/AndroidのデザインをPCと同じに変更の機能を有効にすると、PC用の設定がスマートフォンでも適用されます。フォームグループの更新でiPhone/AndroidのデザインをPCと同じに変更
操作手順
1 ［フォーム］＞［フォーム設定］を選択します。
［データベース一覧］画面が表示されます。
2 対象となるデータベース名称の［フォーム一覧］をクリックします。
［フォーム一覧］画面が表示されます。
3 対象となるフォームの［デザイン］をクリックします。
［フォームデザイン］画面が表示されます。
［フォームデザイン］画面 （［登録］フォーム）
4 画面下半分の各タブをクリックして設定します。タブごとの設定は以下ページ内リンクを参考にしてください。
下記の動画で、自動生成フォームに、HTML・CSSを使用してデザインを加える方法をご紹介しています。フォントの変更、ボタンの装飾、行間や入力欄の編集、テキストリンクの挿入方法などもご紹介しておりますので、ご参考にご覧ください。（約28分）
［配置]タブの設定画面
[配置]タブでは、自動生成フォームの各画面に表示させるページ要素の追加や設定ができます。
- ［システムメッセージ］と［フォーム］はあらかじめ表示されており、削除できません。
- 設定画面にて［広告宣伝メールの同意チェック］［規約文章］にチェックした場合はあらかじめ表示されており、削除できません。
- ［システムメッセージ］とは、「メッセージを設定する」で設定したメッセージの総称です。
［配置］タブの設定画面（例）
1右のボックスから、必要に応じてページ要素（［画像］［テキスト]［区切り線］［見出し］［タイトル］［「戻る」リンク］）を選択し、［追加］をクリックします。
選択した要素が左の表に追加されます。
2 ページ要素のレイアウト（並び順）を決めます。
行の先頭の□にチェックを入れて［上に移動］または［下に移動］をクリックすると、並び順を変更することが出来ます。
ボタンの機能
| ［上に移動］ | チェックを入れた項目を上に移動して並び順を変更します。 |
| ［下に移動］ | チェックを入れた項目を下に移動して並び順を変更します。 |
| ［削除］ | チェックを入れた項目を削除します。 |
| ［追加］ | リストから選択した要素を追加します。 |
3 ページ要素の右端の［設定］をクリックします。
ページ要素のタイプに応じた設定画面がポップアップ表示されます。
［システムメッセージ］の項目設定画面（例）
4 設定画面の各項目に入力し、［次へ］をクリックします。確認画面が表示されます。
- 設定画面は項目のタイプにより異なります。タイプ別の項目設定についてはこちらを参照してください。
5 各画面の表示/非表示設定を行います。チェックを外すと、当該の画面で表示されなくなります。入力画面や確認画面などで異なる画像や異なるメッセージを表示する際は、それぞれ対応するページ要素の表示/非表示設定を行ってください。
6 ［実行］をクリックします。 入力内容が保存されます。
7 設定画面のウィンドウ右上の［×］をクリックします。 ポップアップ画面が閉じ、［フォームデザイン］画面に戻ります。
8 プレビューのアイコン（画面上部の虫めがねアイコン）をクリックし、画面の仕上がりを確認します。
9 ［次へ］をクリックします。［フォーム設定を更新しました。］とメッセージが表示されます。
注意
各項目でメッセージが表示できる箇所に関しては、すべて多言語化できるようになっていますが、【docomo(iモード)／au(EZweb)／SoftBank（Yahoo!ケータイ）／WILLCOM】などの携帯キャリアでは、従来通りとなり、外国語表記には対応しておりませんので、フォーム作成時のキャリア追加設定にて除外してください。
［システムメッセージ］の項目設定画面
入力項目の説明
| ［フォントサイズ］ | 文字サイズを［非常に大きい］［大きい］［やや大きい］［普通］［やや小さい］［小さい］［非常に小さい］から選択します。 |
| ［フォントカラー］ | メッセージの文字色をデフォルトから変更する場合は、16進数を入力するか、［クリックして色を変更］でカラーパレットから選択します。 |
| ［横方向の配置］ | ［左寄せ］［中央寄せ］［右寄せ］から選択します。 |
| ［横方向の余白］ | ［左寄せ］［右寄せ］の場合に、左右の余白をピクセル数（半角数字）で指定します。 |
| ［次の項目との余白］ | 次の項目との余白をピクセル数（半角数字）で指定します。 |
［フォーム］の項目設定画面
入力項目の説明
［フォントサイズ］［フォントカラー］［横方向の配置］［横方向の余白］［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。| ［必須項目の記号］ | 必須項目を示すラベルに使用する記号を入力します。（最大10桁） |
| ［必須の説明］ | ［必須項目の記号］に続く文字列を入力します。（最大80桁） |
| [表の罫線の幅］ | 表の罫線の太さ（border="～"）を0?10ピクセルの範囲で指定します。0の場合は罫線は表示されません。 |
| [項目部分の幅］ | 表の項目部分の幅を指定します。 |
| ［フォーム部分の幅 ］ | 表のフォーム部分の幅を指定します。 |
| ［項目部分の背景色 ］ | 項目部分の背景色をデフォルトから変更する場合は、16進数を入力するか、［クリックして色を変更］でカラーパレットから選択します。 |
| ［項目部分の横方向の配置 ］ | 項目部分のレイアウトを［左寄せ］［中央寄せ］［右寄せ］から選択します。 |
| ［項目部分の横方向の余白］ | 項目部分の左右の余白をピクセル数で指定します。 |
| ［フォーム部分の背景色 ］ | フォーム部分の文字色をデフォルトから変更する場合は、16進数を入力するか、［クリックして色を変更］でカラーパレットから選択します。 |
| ［フォーム部分の横方向の配置 ］ | ［URLを指定］では、画像のURLを入力します。［ファイル置き場から選択］では、表示される画像の中から選択します。 |
| ［各行の上下の間隔 ］ | フォーム部分の各行の余白をピクセル数で指定します。 |
| ［リンク先URL］ | 画像をクリックしたときのリンク先URLを入力します。（最大250桁） |
| ［フォーム部分の横方向の余白］ | フォーム部分の左右の余白をピクセル数で指定します。 |
［フォームボタン］の項目設定画面
入力項目の説明
［横方向の配置］［横方向の余白］［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。
［規約文章］の項目設定画面
入力項目の説明
［フォントサイズ］［フォントカラー］［横方向の配置］［横方向の余白］［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。
| ［表示方法］ | 編集が出来ない「read only属性のテキストエリアに表示」、HTMLタグ等がそのまま表示される「入力されたまま表示（自動リンクなし）」、HTMLタグはそのまま表示されるが、一部はリンクとして認識される「htpp(s)//:～はリンクとして表示」、HTMLタグをを利用出来る「HTMLタグ有効」のいずれかより選択出来ます。 |
| ［テキストエリアの幅］ | 「read only属性のテキストエリアに表示」を選択した際に、幅の指定が出来ます。 |
| ［テキストエリアの高さ］ | 「read only属性のテキストエリアに表示」を選択した際に、高さの指定が出来ます。 |
［広告宣伝メールの同意チェック］の項目設定画面
入力項目の説明
［フォントサイズ］［フォントカラー］［横方向の配置］［横方向の余白］［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。
| ［画像］ | ［URLを指定］では、画像のURLを入力します。［ファイル置き場から選択］では、表示される画像の中から選択します。 |
| ［代替テキスト］ | 画像が表示されない場合の代替テキスト（alt="～"）を入力します。（最大250桁） |
| ［リンク先URL］ | 画像をクリックしたときのリンク先URLを入力します。（最大250桁） |
［画像］の項目設定画面
入力項目の説明
［フォントサイズ］［フォントカラー］［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。
| ［画像］ | ［URLを指定］では、画像のURLを入力します。［ファイル置き場から選択］では、表示される画像の中から選択します。 |
| [画像サイズの自動調整] | 有効にチェックをすると、スマートフォンの場合、画像のサイズが最適化されて表示されます。 |
| ［代替テキスト］ | 画像が表示されない場合の代替テキスト（alt="?"）を入力します。（最大250桁） |
| ［リンク先URL］ | 画像をクリックしたときのリンク先URLを入力します。（最大250桁） |
| ［横方向の配置］ | ［左寄せ］［中央寄せ］［右寄せ］から選択します。 |
| ［横方向の余白］ | ［左寄せ］［右寄せ］の場合に、左右の余白をピクセル数（半角数字）で指定します。 |
［テキスト］の項目設定画面
入力項目の説明
［フォントサイズ］［フォントカラー］［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。
| ［表示するテキスト］ | テキストを入力します。［差込記号］で［ファイル置き場］にある画像や他のフォームやサイトへのワンクリックログインURLや投稿画像を文中に挿入することが出来ます。 投稿画像は登録、更新、削除フォームの一部ページにのみ差込可能です。 ※投稿画像について詳しくはこちら |
| ［表示方法］ |
テキストのHTMLタグの処理を選択します。 |
| ［横方向の配置］ | ［左寄せ］［中央寄せ］［右寄せ］から選択します。 |
| ［横方向の余白］ | ［左寄せ］［右寄せ］の場合に、左右の余白をピクセル数（半角数字）で指定します。 |
［区切り線］の項目設定画面
入力項目の説明
［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。
| ［幅］ | 線の長さをピクセル数（半角数字）で指定します。 |
| ［カラー］ | 線の色をデフォルトから変更する場合は、16進数を入力するか、［クリックして色を変更］でカラーパレットから選択します。 |
| ［横方向の配置］ | ［左寄せ］［中央寄せ］［右寄せ］から選択します。 |
| ［横方向の余白］ | ［左寄せ］［右寄せ］の場合に、左右の余白をピクセル数（半角数字）で指定します。 |
［見出し］［タイトル］の項目設定画面
入力項目の説明
［フォントサイズ］［フォントカラー］［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。
| ［見出し］［タイトル］ | テキストを入力します（最大100桁）。 |
| ［横方向の配置］ | ［左寄せ］［中央寄せ］［右寄せ］から選択します。 |
| ［横方向の余白］ | ［左寄せ］［右寄せ］の場合に、左右の余白をピクセル数（半角数字）で指定します。 |
［「戻る」リンク］の項目設定画面
入力項目の説明
［フォントサイズ］［フォントカラー］［次の項目との余白］は、［システムメッセージ］の項目画面と共通のため、説明を省略します。
| ［リンクに表示する テキスト］ |
戻り先へのリンクの文字列を入力します（最大40桁）。 |
| ［横方向の配置］ | ［左寄せ］［中央寄せ］［右寄せ］から選択します。 |
| ［横方向の余白］ | ［左寄せ］［右寄せ］の場合に、左右の余白をピクセル数（半角数字）で指定します。 |
［デザイン]タブの設定画面
［デザイン］タブの設定画面（例）
入力項目の説明
| ［背景画像］ | 背景画像を使用する場合はいずれかの方法で設定します。［URLを指定］では、画像のURLを入力します。［ファイル置き場から選択］では、表示される画像の中から選択します。 |
| ［背景色］ | ページの背景色をデフォルトから変更する場合は、16進数を入力するか、［クリックして色を変更］でカラーパレットから選択します。 |
| ［全体の横幅］ | フォーム部分の横幅を何ピクセルにするかを指定します。 |
| ［上余白］ | ウィンドウ上辺と最初の項目との余白をピクセル数（半角数字）で指定します。 |
| 項目部分とフォーム 部分の配置方法 |
項目部分とフォーム部分の表示方法を[水平方向レイアウト（横並び）と垂直方向レイアウト（縦並び）]から選択します。※PCのみ設定可能 |
| ［横方向の配置］ | ページ全体のレイアウトを［左寄せ］［中央寄せ］［右寄せ］から選択します。 |
| ［横方向の余白］ | ［左寄せ］［右寄せ］の場合に、ウィンドウ端からの余白をピクセル数（半角数字）で指定します。 |
| □（チェックボックス） | 移動または削除する対象にチェックを入れます。 |
 （対応キャリア） |
左：PC対応 右：携帯・スマートフォン対応（表示されていない場合、変更は出来ません。） |
［確認画面スキップ］タブの設定画面
フォームは、「入力」→「確認」→「完了」の3ステップで画面遷移しますが、この設定を有効にすると「確認」画面を無くすことができます。
［確認画面スキップ］タブの設定画面（例）
注意
- 確認画面をスキップさせると、入力内容の確認や修正ができなくなるので誤登録が増える恐れがあります。運用上問題ない場合のみ有効にしてください。
- reCAPTCHA・画像投稿が有効な場合は、確認画面スキップ設定はできません。
- フォームグループ作成時に、「設定のキャリア間同期」を有効チェックしていると、PC以外は「（PCと同じ設定を利用）」と表示されます。
- 削除フォームでスキップを有効にすると、ワンクリックログイン先に当該削除フォームを指定できなくなります。
- 確認画面スキップを有効にすると、［レポート］機能で確認画面のアクセス数集計に反映されません。経路分析等の画面で、表示がERRORやマイナス数値など、離脱率（離脱数）として正しくない表示になる場合があります。
［戻り先URL]タブの設定画面
「入力」→「確認」→「完了」の完了画面に表示させる戻り先リンクの表示や戻り先の指定ができます。初期設定では「戻る」リンクが表示され、フォーム入力画面にリンクされているため、「非表示」にすることをおすすめします。
［戻り先URL］タブの設定画面（例）
入力項目の説明
| ［戻り先の処理］ |
次のいずれかを選択します。 |
| ［PC]［imode]［Ezweb]［Yahoo! ]［Willcom]［スマートフォン] | 完了画面の代わりに表示する画面URL、または完了画面の「戻る」のリンク先URLを入力します。 |
| ［PC（target指定）］ | 「戻る」のリンクのtarget="～"にウィンドウ名を指定します。 |
注意
- 完了画面の「戻る」の［URLを変更］または［完了画面を変更］を選択した場合、URLは必ず入力頂く必要があります。
- 多言語対応のフォームを作成する場合、完了画面の「戻る」は対応しておりませんので、代替案として、戻り先URLの設定で「戻る」を非表示にし、配置タブ→テキスト追加後の設定で戻るリンクの文言を多言語化し作成頂く方法をご利用ください。
- フォームグループ作成時に、「設定のキャリア間同期」を有効チェックしていると、PC以外は「（PCと同じ設定を利用）」と表示されます。
［フォーム完了時］タブの設定画面
「入力」→「確認」→「完了」の完了画面の遷移先を指定できます。初期設定ではこのタブは表示されていません。システム管理者が「システム＞機能の有効化」で有効にした場合のみに表示されます。
ステップフォームを作成したい場合は、本機能の設定が必要です。
［フォーム完了時］タブの設定画面（例）
「その他の遷移方法を設定」を選択し、「設定」ボタンをクリックしてポップアップウインドウで遷移先を指定します。
項目の説明
| 分岐なし～分岐数 | フォームの遷移先を複数指定したい場合は、分岐先の数をプルダウンから選択します。 |
| 抽出条件 | 分岐数を指定した数(-1)だけ抽出条件を設定します。「分岐なし」の場合は表示されません。 |
| 遷移時の動作 | フォームへログイン：更新フォームのログイン後画面に遷移させる（ステップフォーム） サイトへログイン：サイト機能で作成した会員ページログイン後画面に遷移させる URLを指定：完了画面の代わりに任意のURLに遷移させる |
| 遷移先詳細 | 遷移先のフォームやURL等を指定します。更新フォームを指定する場合、［設定］の名称欄で指定した名称が選択肢に出ます。 |
注意
- フォームグループ作成時に、「設定のキャリア間同期」を有効チェックしていると、PC以外は「（PCと同じ設定を利用）」と表示されます。