メインコンテンツにスキップ

フォーム内の各項目を設定する(未)

Watanabe avatar
対応者:Watanabe
今週アップデートされました

フォーム内の項目設定は、

特にクライアントワークで制作されている方にとっては大事な作業です。

dpdpのフォームを経由したメールはこういった形で届きます。

赤字注釈のように、フォームのデザイン画面で設定した内容が、

そのままメールのヘッダや項目名に反映されますので、設定は正しく行いましょう。

実際に届くメールに表示される項目には、わかりやすいよう、

📫マークを頭につけておきますので、そこはしっかり押さえておくようにしましょう。

では、順に説明していきます。

1.フォームの名前を設定します

📫フォームの名前は、冒頭のメール例のヘッダ部分、左端にテキストで表示されます。

❶ デザイン画面、レイヤツリーから名前を変更します。

❷ レイヤツリーで「問い合わせフォーム」の文字をダブルクリックして編集します。

名前の変更は、以上で完了です。


🚩 これより先、「フォームの名前」以外の設定については、下の操作を繰り返します。

2.テキスト入力/複数行入力フォームを設定します

テキスト入力フォームの設定を、プロパティパネルを使って説明します。

最初に、テキスト入力フォームをクリックします。( 「お名前」と書いてあるフォームパーツです

フォームパーツを選択したら、プロパティパネルで小項目を設定します。

※ ここではフォームのデザインに関する項目は飛ばします。

  フォームのデザインカスタマイズについては 「フォームのカスタマイズ」 の記事をお読みください。

📫 ❶ 送信されるメールに各項目名として反映されるテキストです。

🚩 テキスト入力フォームだけでなく、複数行入力フォーム、選択リストなどすべてのフォームパーツで、

  この ❶ の部分の記入内容がそのままメールでも項目として反映されます。

❷ 訪問者が入力するテキストタイプを選択します。

  • Text ・・・ 文字列(自由記入方式)

  • Email ・・・ Eメール(半角英数のEmail形式のテキスト以外は不可となります)

❸ 入力前の表示(プレースホルダー)

ここに設定した文字列は、訪問者がテキスト入力する前に、このように「記入例」や

「必須」のような注意喚起といった形で、あらかじめ表示されます。

※ 必要ない場合は、空欄のままにしてください。

❹ その入力項目を必ず記入してもらいたい場合は、チェックを入れます。

※ 必須入力が設定された項目が未記入のままだとメールは送信できません。


3.選択リストを設定します

まず、選択リストのフォームパーツを選びます。

※ レイヤツリーで選択する時は「お問い合わせ種別」、

  キャンバス上で選択する場合は、枠内の右端に矢印が入ったレイヤがそれです。

1)選択リストは、実際のページではこのように反映されます。

2)デザイン画面のプロパティパネルで設定をします。

❶・❸・❹についてはテキスト入力フォームと同じです。

❷ 下の図を見ながら操作して、実際のプレビュー画面で確認しましょう。

🚩 一通り設定したらプレビュー画面で確認してみましょう。


4.最後にメール送信テストをします

最後に、プレビュー画面からメールを送信して項目設定が上手くできているか確認します。

❶ プレビュー画面に移動して、実際にメールフォームに記入して送信します。

🚩 送信前にフォームの送信アドレスの設定が済んでいるか確認しましょう。

※送信アドレスが設定されていないとメールは届きません。まだ設定の済んでいない方は、

 送信テストの前に「フォームの送信先を設定する」をお読みください。

❷ 届いたメールのヘッダと項目名が設定通りになっているか確認します。

設定した通りになっていれば、各項目の設定はこれで完了です。

おつかれさまでした!


次は、フォームのデザインをカスタマイズしてみましょう。

▷ フォームのカスタマイズ

こちらの回答で解決しましたか?