ESSENCE（エッセンス）オリジナルテンプレートのお問い合わせフォームの項目を追加するについてのマニュアルです。

ここではフォームの項目の追加方法についてご説明します。

※タグやコードを扱うので、上級者向けとしています。

※PCで編集していただく方が操作しやすいです

3パターンの中から近いパターンを選択する

少しでも追加要素を減らすために、すでに用意してあるパターンの中から最もイメージに近いものの編集画面を開きましょう。

「フォーム」タブを開く

項目を追加する

項目は以下の添付のようになっており、<tr></tr>で囲まれた部分が1セットになります。

1セットの中を解説していきます。

1.名前（必須）

<th></th>で囲まれた部分です。

2.必須（任意）

必須がいる場合は青い部分を名前の後ろに入力、いらない場合は削除しましょう。

*もあわせて入力or削除しましょう。

3.項目の値（必須）

項目の値を判断する名前ですので、既にある項目と被らないようにしましょう。

例えば、フリガナであれば「my_name」とするか「name_12」と数字をつけて、単語単体にならないようにしましょう。

公式サイトでの解説はこちら

後述しますが、自動返信メールの項目を表示するのにこの文字列が必要です。

4.入力欄の幅（任意）

class:ip◯を入れると入力欄の幅を指定することができます。

既にある項目でお好みの長さがある場合は同じタグをコピーしましょう。

長さは以下のサイズ順です。

大　ip4>ip2>1p1>ip3　小

特にこだわりがない場合は入力する必要はないです。

1｜入れたい箇所の間に改行を２つ入れる

項目を区別しやすくするために項目と項目の間には既に1つ改行が入っているので追加する項目の上下にも余白を入れるため同じ箇所に２つ改行を入れましょう。

※分かりやすいように先に２つ入れるとしていますが最終的に追加した項目の上下に1つずつ改行が入れば良いです

2-A｜すでにある項目と同じ仕様の項目を追加したい場合

すでに入力されている項目と同じ仕様の項目を追加したい場合は、コピー＆ペーストが一番簡単です。

1｜追加したい仕様の項目をコピー＆ペースト

1.追加したい仕様と同じ項目をコピーします。（空白も含めてコピーします）

2.先程の３つ改行の真ん中にペーストします。

すると上下に改行が入って見やすい状態になります。

2｜各所変更する

コピーしたままだと全く同じ項目ができてしまうので、各所を変更していきます。

続けて、自動送信メールの項目追加へと進みます　↓

2-B|新しい項目を追加したい場合

既に入力してある項目ではなく、全く新しい項目を追加したい場合、以下のボタンから追加することができます。

それぞれのフォームタグの使い方についてはこちらでご説明しております。

1｜既存の項目をコピー＆ペースト

フォームタグボタンを使用する場合、フォームタグ部分しか作成されないため、既存の項目をコピーして完成された項目を用意してあげます。

1.項目をコピーします。（空白も含めてコピーします）

2.先程の３つ改行の真ん中にペーストします。

すると上下に改行が入って見やすい状態になります。

2｜使用したいフォームタグを選択

今回は「ドロップダウンメニュー」でご説明させていただきます。

1.ドロップダウンメニューを選択

2.項目タイプ、名前、オプションを入力

└必須項目にしたい場合はチェックを入れましょう。

└名前は必要に応じてこちらでご説明したように変更しましょう。

└オプションは選択肢です。1行に1つずつ選択肢を入れていきましょう。

└必要に応じて、複数選択や空の項目にチェックを入れましょう。

3.上記入力が終わると、タグが変更されているので、タグを挿入もしくはタグをコピーしましょう。

3｜［］で囲まれた箇所を差し替える

先程作成したタグを［］で囲まれた箇所と差し替えましょう。（選択してペーストで上書きできます）

4｜各所変更する

あとは、項目名など、各所を変更していきます。

続けて、自動送信メールの項目追加へと進みます　↓

自動返信メールにも項目を追加する

上記手順はサイト上で表示するための作業です。

項目を追加しましたら、自動返信メールにも項目を追加しないと自動返信メールに反映されません。

以下手順で自動返信メールにも項目を追加して漏れのないようにしましょう。

1｜追加した項目の項目名をコピーする

項目名をコピーします。

2|メールタブを開く

そのまま、メールタブを開きます。

3｜メッセージ本文に追加する

追加したい場所に名前と先程コピーしたフォームタグをペーストします。

• 自分に送られるメール
• お問い合わせした人に送られるメール

の２つにそれぞれ追加するのを忘れないようにしましょう。

保存して、反映されたか確認する

最後に保存して、お問い合わせページにきちんと反映されているか確認しましょう。

テスト送信をして、自動返信メールの内容もしっかり確認しましょう。

フォーム項目の詳しい説明ページはこちらです。