フォーム内の項目設定は、
特にクライアントワークで制作されている方にとっては大事な作業です。
dpdpのフォームを経由したメールはこういった形で届きます。
赤字注釈のように、フォームのデザイン画面で設定した内容が、
そのままメールのヘッダや項目名に反映されますので、設定は正しく行いましょう。
実際に届くメールに表示される項目には、わかりやすいよう、
📫マークを頭につけておきますので、そこはしっかり押さえておくようにしましょう。
では、順に説明していきます。
1.フォームの名前を設定します
📫フォームの名前は、冒頭のメール例のヘッダ部分、左端にテキストで表示されます。
❶ デザイン画面、レイヤツリーから名前を変更します。
❷ レイヤツリーで「問い合わせフォーム」の文字をダブルクリックして編集します。
名前の変更は、以上で完了です。
🚩 これより先、「フォームの名前」以外の設定については、下の操作を繰り返します。
2.テキスト入力/複数行入力フォームを設定します
テキスト入力フォームの設定を、プロパティパネルを使って説明します。
最初に、テキスト入力フォームをクリックします。( 「お名前」と書いてあるフォームパーツです)
フォームパーツを選択したら、プロパティパネルで小項目を設定します。
※ ここではフォームのデザインに関する項目は飛ばします。
フォームのデザインカスタマイズについては 「フォームのカスタマイズ」 の記事をお読みください。
📫 ❶ 送信されるメールに各項目名として反映されるテキストです。
🚩 テキスト入力フォームだけでなく、複数行入力フォーム、選択リストなどすべてのフォームパーツで、
この ❶ の部分の記入内容がそのままメールでも項目として反映されます。
❷ 訪問者が入力するテキストタイプを選択します。
Text ・・・ 文字列(自由記入方式)
Email ・・・ Eメール(半角英数のEmail形式のテキスト以外は不可となります)
❸ 入力前の表示(プレースホルダー)
ここに設定した文字列は、訪問者がテキスト入力する前に、このように「記入例」や
「必須」のような注意喚起といった形で、あらかじめ表示されます。
※ 必要ない場合は、空欄のままにしてください。
❹ その入力項目を必ず記入してもらいたい場合は、チェックを入れます。
※ 必須入力が設定された項目が未記入のままだとメールは送信できません。
3.選択リストを設定します
まず、選択リストのフォームパーツを選びます。
※ レイヤツリーで選択する時は「お問い合わせ種別」、
キャンバス上で選択する場合は、枠内の右端に矢印が入ったレイヤがそれです。
1)選択リストは、実際のページではこのように反映されます。
2)デザイン画面のプロパティパネルで設定をします。
❶・❸・❹についてはテキスト入力フォームと同じです。
❷ 下の図を見ながら操作して、実際のプレビュー画面で確認しましょう。
🚩 一通り設定したらプレビュー画面で確認してみましょう。
4.最後にメール送信テストをします
最後に、プレビュー画面からメールを送信して項目設定が上手くできているか確認します。
❶ プレビュー画面に移動して、実際にメールフォームに記入して送信します。
🚩 送信前にフォームの送信アドレスの設定が済んでいるか確認しましょう。
※送信アドレスが設定されていないとメールは届きません。まだ設定の済んでいない方は、
送信テストの前に「フォームの送信先を設定する」をお読みください。
❷ 届いたメールのヘッダと項目名が設定通りになっているか確認します。
設定した通りになっていれば、各項目の設定はこれで完了です。
おつかれさまでした!
次は、フォームのデザインをカスタマイズしてみましょう。
▷ フォームのカスタマイズ