フォームを作成する

お問い合せの返信機能を使用する場合は、フォームのお問い合せメール返信設定を行っていきましょう。

お問い合せメール設定については

• フォームの入力項目に『メールアドレス』に該当するものがある場合
• 返信機能を使用する場合

のみに使用します。

※返信機能は「お問い合わせデータをデータベースに保存」にチェックを入れないと、使用できません。

1. フォーム作成画面の『お問い合せメール返信設定』部分に必要な情報を入力していきます。
   

   ポイント

   件名やメール本文部分で

   • nameキーを {name_12345} のように{}で囲んで入力をすると、自動で送信された値に変換されます。
   • お問い合わせ番号を追加したい場合は {tracking_number} と入力すると表示されます。

   項目の設定一覧

   お問い合わせ本文の name属性	フォーム作成時に設定した、ユーザーからのお問い合わせ本文が入力される項目のname属性の値を入力してください。 お問い合わせの履歴を残すために使用します。{}は不要です。
   宛先のname属性	フォーム作成時に設定した、メールアドレスに該当するname属性を入力してください。{}は不要です。 未入力の場合は「自動返信メール設定」-「宛先のname属性」が使用されます。
   返信メール件名	返信するメールのタイトルを入力してください。
   送信者メールアドレス （From）	基本的には、サーバーと同じドメインのメールアドレスを入力してください。 空白の場合はWordPressの管理者アドレスで送信がされます。
   差出人の表示名	送信されるメールの差出人として表示される名前を入力してください。
   返信用メールアドレス (Reply-to)	自動返信メールに返信したときに受信されるアドレスです。 空白の場合は送信者メールアドレス（From）で設定されます。入力は任意です。
   返信メール本文テンプレート 前半	返信メールで、前半でテンプレートとして使用したい文章がある場合は入力してください。 name属性を{}で囲い入力することで、送信された内容が自動的に反映されます。
   返信メール本文テンプレート 後半	返信メールで、後半でテンプレートとして使用したい文章がある場合は入力してください。 name属性を{}で囲い入力することで、送信された内容が自動的に反映されます。

2. 以下のように入力できたら完了です。
   
   また、返信機能を使用するために、画面右の「お問い合わせデータをデータベースに保存」にチェックを入れましょう。
   
   問題がなければ『保存』をクリックして、フォームのお問い合せメールの設定は完了です。
   あとはフォームからテスト送信をして、内容を確認してください。
3. ここまで登録した情報は情報は、
   「申し込み一覧」＞「受付情報一覧」＞該当のフォームの「お問い合わせ件数」＞「該当のお問い合わせ」＞「この問い合わせに返信する」
   で使用し、登録した内容を確認することができます。

   返信機能について、詳しくはこちらからご確認ください。

必要に応じて、Google reCAPTCHAの設定を行うことができます。
※Google reCAPTCHAの初回設定について、詳細はGoogleの公式ドキュメントなどをご確認ください。

1. reCAPTCHAのタイプを選択してください。
   

   設定一覧

   未使用	reCAPTCHAを使用しない場合は、こちらを選択してください。
   スコアベース(v3)	Google reCAPTCHA v3を設置する場合は、こちらを選択してください。
   チャレンジ(v2)	Google reCAPTCHA v2を設置する場合は、こちらを選択してください。

2. 発行された「サイトキー」を入力してください。
   
3. 発行された「シークレットキー」を入力してください。『保存』をして、完了です。
   
4. この状態で「項目を追加」より「reCAPTCHA」を選択します。
   
5. するとウィンドウが表示されます。 ラベルは管理しやすい名前を付けてください。問題なければ『挿入』をクリックしてください。
   
6. 無事コードが挿入されたら『保存』をして、完了です。画面を開いてreCAPTCHAが表示されているか確認をしてください。

次に来るお問い合わせの番号を変更することができます。番号をリセットしたい場合などに使用できます。

1. 右側にある『次のお問合せ番号』の部分を編集します。
   
2. 『変更する』にチェックを入れ、変更する数字を入力します。これで『保存』をしたら次のお問合せ番号が変更されます。
   

お問い合わせのデータをデータベースに保存して管理する際に、使用します。

1. お問い合わせのデータをデータベースに保存する場合は、右側にある『お問合せデータをデータベースに保存』にチェックを入れます。
   これでデータをデータベースに保存することができます。
   

   ポイント

   データベースに保存をすると、管理画面からフォームに入力された情報を確認することができます。
   返信機能を使用する場合は、忘れずにチェックを入れてください。
   
   データをデータベースに蓄積しておきたくない場合や返信機能を使用しない場合は、特にチェックを入れる必要はありません。

お問い合わせ完了後に管理側に送信される、フォームの管理者宛メールの設定を行っていきましょう。

1. フォーム作成画面の『管理者宛メール設定』部分に必要な情報を入力していきます。
   

   ポイント

   件名やメール本文部分で

   • nameキーを {name_12345} のように{}で囲んで入力をすると、自動で送信された値に変換されます。
   • お問い合わせ番号を追加したい場合は {tracking_number} と入力すると表示されます。

   項目の設定一覧

   宛先（メールアドレス）	管理者宛メールを送信するメールアドレスを直接入力してください。 カンマで区切ると複数入力できます。
   CC（メールアドレス）	管理者宛メールをCCで送信するメールアドレスを直接入力してください。 カンマで区切ると複数入力できます。
   BCC（メールアドレス）	管理者宛メールをBCCで送信するメールアドレスを直接入力してください。 カンマで区切ると複数入力できます。
   件名	メールの件名を入力してください。 フォームで設定したname属性を {} で囲んで入力すると、送信された内容が自動的に反映されます。
   送信者メールアドレス（From）	サーバーと同じドメインのメールアドレスを直接入力してください。 空白の場合はWordPressに登録されている管理者アドレスで送信されます。入力は任意です。
   差出人の表示名	送信されるメールの差出人として表示される名前を入力してください。
   返信用メールアドレス(Reply-to)	自動返信メールに返信したときに受信されるアドレスです。 空白の場合は送信者メールアドレス（From）で設定されます。入力は任意です。
   メール本文	メール本文を入力してください。 フォームで設定したname属性を {} で囲んで入力すると、送信された内容が自動的に反映されます。

2. 入力に問題がなければ『保存』をクリックして、管理者宛メールの設定は完了です。
   フォームからテスト送信をして、内容を確認してください。
   

お問い合わせ完了後にユーザー側に送信される、フォームの自動返信メールの設定を行っていきましょう。
自動返信メールについては、フォームの入力項目に『メールアドレス』に該当するものがある時のみ使用します。
メールアドレスの入力がない場合は特に設定の必要はありません。

1. フォーム作成画面の『自動返信メール設定』部分に必要な情報を入力していきます。
   

   ポイント

   件名やメール本文部分で

   • nameキーを {name_12345} のように{}で囲んで入力をすると、自動で送信された値に変換されます。
   • お問い合わせ番号を追加したい場合は {tracking_number} と入力すると表示されます。

   項目の設定一覧

   メール送信先のname属性	フォーム作成時に設定した、メールアドレスに該当するname属性を入力してください。 ここではキーを{}で囲う必要はありません。
   件名	メールの件名を入力してください。 フォームで設定したname属性を {} で囲んで入力すると、送信された内容が自動的に反映されます。
   送信者メールアドレス（From）	サーバーと同じドメインのメールアドレスを直接入力してください。 空白の場合はWordPressに登録されている管理者アドレスで送信されます。入力は任意です。
   差出人の表示名	送信されるメールの差出人として表示される名前を入力してください。
   返信用メールアドレス(Reply-to)	自動返信メールに返信したときに受信されるアドレスです。 空白の場合は送信者メールアドレス（From）で設定されます。入力は任意です。
   メール本文	メール本文を入力してください。 例えば『お問い合わせありがとうございました。』などの文言や、送信内容の確認などを入れます。 フォームで設定したname属性を {} で囲んで入力すると、送信された内容が自動的に反映されます。

2. 入力に問題がなければ『保存』をクリックして、自動返信メールの設定は完了です。
   フォームからテスト送信をして、内容を確認してください。
   

必要に応じて、フォームのURLを設定していきましょう。

1. 『完了画面メッセージ』のすぐ下にある『URL設定』で設定を行っていきます。
   固定ページのURLをそのまま使用する場合は、特に設定の必要はなく、空のままにしてください。
   
2. 例えば以下のように入力画面のみ入力すると、確認・完了画面でそのURLを引き継ぎます。
   確認・完了画面も個別にURLを入力すると、そのURLで表示します。
   

   ポイント

   ここで設定を行った際、ショートコードを貼るページのパーマリンク設定と親のスラッグを合わせないと、修正や確認のボタンの挙動がうまく
   動作しなくなります。ご注意ください。

   内容に問題がなければ、「保存」をクリックしてください。これでフォームのURL設定は完了です。

入力欄やバリデーションルールの設定を行った後は、完了画面のメッセージの設定を行いましょう。

1. 『バリデーションルール』のすぐ下にある『完了画面メッセージ』で設定を行っていきます。
   ここでは完了画面に表示されるメッセージなどを入力してください。通常のHTMLタグなども使用できます。
   
2. 入力をして、内容に問題がなければ、『保存』をクリックします。これで完了です。
   

   ポイント

   cssなどの知識がある場合は、cssを適用して装飾をすることができます。
   該当部分にclassなどを当てて、自作のcssファイルで対応をしてください。

入力欄の基本的な設定を行った後は、バリデーションルールを追加していきます。

1. エディタのすぐ下にある『バリデーションルール』で『バリデーションルールを追加』をクリックしてください。
   
2. すると設定が1つ追加されるので、右側の矢印をクリックしてください。
   
3. 矢印をクリックすると詳細の設定が開くので、ここでバリデーションルールを追加していきます。
   
4. 「ルールを適用する項目のname属性」部分には、バリデーションルールを追加したい項目のname属性を入力します。
   上部のエディタでプロパティの設定をした項目のnameをそのまま入れてください。
   
5. あとは必要に応じて、項目の設定を行っていきます。
   

   項目に対する設定	必須項目にしたり、名前のカタカナもしくはひらがなのみ受け付ける、 電話番号の形式のみ受け付ける、などの設定を行うことができます。
   一致させる項目のname属性	確認のためメールアドレスをもう一度入力させる場合など、入力内容の一致を確認するときに使用します。ここには1回目に入力する項目のname属性（一致させたい項目のname）を入力します。
   文字数の範囲	入力できる文字数の最小・最大が必要な場合は設定してください。
   必須時のエラーメッセージ	必須時、未入力の際に表示されるエラーメッセージを設定できます 特に設定しない場合は、デフォルトのものが表示されます。

6. あとは、項目ごとにそれぞれのバリデーションルールを設定してください。
   完了したら「保存」をして、バリデーションルールの設定は完了です。

インストールが完了したら、フォームを作成していきましょう。

1. サイドナビから『Easy Form Maker』をクリックします。
   
2. 画面上部から『新規フォームを作成』をクリックします。
   
3. フォームの作成画面が開きます。それではここから、情報を入力していきましょう。
   
4. まずは、タイトルを入力しましょう。ここは、管理画面の一覧で見たときに、自分がわかりやすい名前で大丈夫です。
   
5. 次は入力欄の設定をしていきましょう。
   
   表示画面でいう、以下の部分の設定です。
   
6. 入力欄を作成するために、まず、項目を選択して『選択した項目を追加』をクリックします。
   

   ポイント

   現在、以下の項目があります。必要に応じて使い分けをしてください。

   • テキスト
   • テキスト（複数行）
   • 日付（年月日）
   • メールアドレス
   • 電話番号
   • 郵便番号
   • URLフィールド
   • チェックボックス
   • ラジオボタン
   • セレクトボックス
   • 都道府県ボックス
   • 確認・送信ボタン
   • reCAPTCHA
7. プロパティの設定欄が開くので、各項目の設定を行います。
   
   ※画像は設定画面の一例です

   プロパティの設定一覧

   プロパティの設定については、各項目ごとに異なります。

   name属性	バリデーションルールの設定や、メール本文への差し込み、返信先の指定などを行うために使用します。
   id属性	ラベルと入力欄を紐づけるためなどに使用します。
   ラベル	入力項目名を設定します。アクセシビリティ向上のほか、返信機能の項目名としても使用します。
   class属性	CSSでスタイルやレイアウトを調整する際などに使用します。
   最小文字数	最小文字数の指定がある場合のみ、入力してください。
   最大文字数	最大文字数の指定がある場合のみ、入力してください。
   size属性	入力欄の横幅に指定が必要であれば、入力してください。
   初期値	初期値が必要な場合にのみ、入力してください。
   placeholder	入力欄の中に表示される補助テキストを設定してください。入力例やヒントの表示に使用します。
   グループの見出し	fieldset（グループ）を使用したい場合、legend（グループタイトル）として使用します。
   選択肢	チェックボックスやラジオボタンなど、選択肢が必要な場合に入力します。 1項目につき1行で入力し、改行して次の項目を入力してください。 [例]red:赤（「red」がvalue、「赤」がユーザー側に見える選択肢のテキストになります）
   区切り文字	確認画面で表示される、複数選択項目の区切り線を変更できます。 [例1]赤,青,黄　[例2]赤/青/黄
   表示方法	チェックボックスやラジオボタンなどの表示を垂直に変更する場合はチェックを入れてください。
   都道府県のname	「都道府県ボックス」を作成していた場合、そこに設定したname属性を入力してください。 住所の自動出力に使用します。
   住所1のname・ 住所2のname	テキスト入力で住所の入力欄を作成している場合、そこに設定したname属性を入力してください。 住所の自動出力に使用します。
   エラー表示	エラー表示はデフォルトで表示されますが、必要ない場合には『エラーを表示しない』にチェックを入れてください。 また、この設定を行うことで好きな場所にエラーを表示することもできます。 好きな場所に[8bit-wp_error keys=”（ここに該当項目のname）”]のようにコードを置くとエラーの表示位置を変更することができます。
   確認・送信・修正ボタンの 文字列	確認ボタンなどの文字列の表示を変えたい場合は変更をしてください。
   requiredタグ （アクセシビリティ対応）	チェックを入れると、アクセシビリティ対応用に『aria-required=”true”』タグを入れることができます。 ※必須のバリデーションルールを追加する物ではないため、ご注意ください。バリデーションについてはこちらから設定を行います。

8. 内容に問題がなければ、『挿入』をクリックしてください。
   
9. これでエディタに、入力部分のショートコードが作成されます。ここがinputなどの要素になるイメージです。
   
10. 必要に応じて、見た目はHTMLを使用して整えてください。これで入力部分についての基本的な設定は一旦完了です。