お問合せの番号を変更する

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

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

お問い合わせデータをデータベースに保存する

お問い合わせのデータをデータベースに保存して管理するときの設定です。

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

    ポイント

    データベースに保存をすると管理画面からフォームに入力された情報を確認することができます。
    ただ、データをデータベースに蓄積しておきたくない場合は不向きのため、ものによって使い分けをしてください。

フォームの管理者宛メール設定をする

フォームの管理者宛のメールの設定を行っていきましょう。

  1. お問い合わせ完了後に管理者側に送信される『管理者宛メール設定』部分に必要な情報を入力していきます。

    ポイント

    • ここでは、nameキーを {name_12345} のように{}で囲んで入力をすると、自動で送信された値に変換されます。
    • お問い合わせ番号を追加したい場合は {tracking_number} と入力すると表示されます。
    項目の設定一覧
    宛先(メールアドレス)管理者宛メールを送信するメールアドレスを入力してください。
    カンマで区切ると複数入力できます。
    CC(メールアドレス)管理者宛メールをCCで送信するメールアドレスを入力してください。
    カンマで区切ると複数入力できます。
    BCC(メールアドレス)管理者宛メールをBCCで送信するメールアドレスを入力してください。
    カンマで区切ると複数入力できます。
    件名メールの件名を入力してください。
    差出人の表示名管理者宛のメールの差出人の表示名を入力してください。
    差出人のメールアドレス差出人となるメールアドレスを入力してください。
    メール本文メール本文を入力してください。
    例えばお問い合わせ内容が確認できるように入力することができます。
    From(送信元)メールアドレス任意で送信元となるメールアドレスを入力してください。
    サーバーと同じドメインのメールアドレスを入力してください。
  2. 入力に問題がなければ『保存』をして、完了です。
    フォームからテスト送信をして、内容を確認してください。

フォームの自動返信メール設定をする

フォームの自動返信メールの設定を行っていきましょう。

  1. お問い合わせ完了後にユーザー側に送信される『自動返信メール設定』部分に必要な情報を入力していきます。

    ポイント

    • ここでは、nameキーを {name_12345} のように{}で囲んで入力をすると、自動で送信された値に変換されます。
    • お問い合わせ番号を追加したい場合は {tracking_number} と入力すると表示されます。
    項目の設定一覧
    宛先のname属性エディタで設定した、ユーザーに入力してもらうメールアドレスのnameキーを入力してください。
    ここではキーを{}で囲う必要はありません。
    件名メールの件名を入力してください。
    差出人の表示名自動メールの差出人の表示名を入力してください。
    差出人のメールアドレス(Reply-to)差出人となるメールアドレスを入力してください。
    メール本文メール本文を入力してください。
    例えば『お問い合わせありがとうございました。』などの文言や、送信内容の確認などを入れます。
    From(送信元)メールアドレス任意で送信元となるメールアドレスを入力してください。
    サーバーと同じドメインのメールアドレスを入力してください。
  2. 入力に問題がなければ『保存』をして、完了です。
    フォームからテスト送信をして、内容を確認してください。

フォームのURL設定をする

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

  1. 『完了画面メッセージ』のすぐ下にある『URL設定』で設定を行っていきます。
    固定ページのURLをそのまま使用する場合は、特に設定の必要はなく、空のままにしてください。
  2. 例えば以下のように設定を行うことができます。

    ポイント

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

    完了したら『保存』をして、完了です。

フォームの完了画面メッセージの設定をする

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

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

    ポイント

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

フォームのバリデーションルールを追加する

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

  1. エディタのすぐ下にある『バリデーションルール』で『バリデーションルールを追加』をクリックしてください。
  2. すると設定が1つ追加されるので、右側の矢印をクリックしてください。
  3. 矢印をクリックすると詳細の設定が開くので、ここでバリデーションルールを追加していきます。
  4. 「ルールを適用する項目のname属性」部分には、バリデーションルールを追加したい項目のnameを入力します。
    上部のエディタで設定した項目のnameをそのまま入れてください。
  5. あとは必要に応じて、項目の設定を行っていきます。
    バリデーション必須項目にしたり、名前のカタカナもしくはひらがなのみ受け付ける、
    電話番号の形式のみ受け付ける、などの設定を行うことができます。
    一致させる項目のname属性例えば確認用のメールアドレスを入力させるときに使用します。
    一致させたい項目のnameを入力してください。
    文字数の範囲入力できる文字数の最小・最大が必要な場合は設定してください。
    必須時のエラーメッセージ必須時、未入力の際に表示されるエラーメッセージを設定できます
    特に設定しない場合は、デフォルトのものが表示されます。
  6. あとは、項目ごとにそれぞれのバリデーションルールを設定してください。
    完了したら「保存」をして、バリデーションルールの設定は完了です。

フォームの新規作成・入力欄の基本的な設定をする

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

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

    ポイント

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

    • テキスト
    • テキスト(複数行)
    • 日付(年月日)
    • メールアドレス
    • 電話番号
    • 郵便番号
    • URLフィールド
    • チェックボックス
    • ラジオボタン
    • セレクトボックス
    • 都道府県ボックス
    • 確認・送信ボタン
  7. プロパティの設定欄が開くので、各項目の設定を行います。
    項目の設定一覧
    name属性nameの設定ができます。バリデーションルール追加の際に使用します。
    id属性idが必要な場合、設定ができます。
    class属性classが必要な場合、設定ができます。
    最小文字数最小文字数を入力してください。入力しない場合は、制限がなくなります。
    最大文字数最大文字数を入力してください。入力しない場合は、制限がなくなります。
    初期値初期値がある場合は、入力をしてください。
    placeholder入力の参考例などが必要な場合は、入力してください。
    選択肢チェックボックスやラジオボタンなど、選択肢が必要な場合に入力します。
    [例]red:赤(「red」がvalue、「赤」がユーザー側に見える選択肢のテキストになります)
    ボタンの文字列確認ボタンなどの文字列の表示を変えたい場合は変更をしてください。
    エラー表示エラー表示はデフォルトで表示されますが、必要ない場合には『エラーを表示しない』にチェックを入れてください。
  8. 内容に問題がなければ、『挿入』をクリックしてください。
  9. これでエディタに、入力部分のショートコードが作成されます。ここがinputなどの要素になるイメージです。
  10. 必要に応じて、見た目はHTMLを使用して整えてください。これで入力部分についての基本的な設定は一旦完了です。