フォームの作成方法「GT form WP」
WordPressでお問い合わせフォームが簡単に設置できるプラグイン“GT form WP”のフォームの作成方法の使い方を詳しく説明しています。
フォームの作成
フォームの管理について
GT form WPで新しくフォームを作成するには、左サイドメニューに「フォーム」メニューから「新規フォーム追加」から行います。
フォームの作成数に制限はなく、用途に合わせて作成することができます。
フォームの新規作成
フォームの画面にある「新規フォームを追加」から新しくフォームを作成します。新規にフォームを作成すると下記のようにフォームエディター画面が表示されます。
この画面で「フォームパーツ」を配置しフォームを作成します。
※もしフォームエディター画面に「フォームパーツ」が表示されていない場合は、下記の画像の赤枠箇所「ツールバー切替」のアイコンをクリックしてください。
このアイコンをクリックすると非表示になっていたフォームパーツメニューが表示されます。
フォームパーツの配置
フォームパーツを配置するには、まずエディター画面内でパーツを配置する箇所をクリックしカーソル位置を指定します。
ツールバーの「フォームパーツ」をクリックして、配置するフォームを選択します。その際に「任意」か「必須」を選択します。
配置すると下記の画像のように、フォームパーツのコードが配置されます。
下記の画像の場合「社名（※1回のみ利用可）」のフォームパーツを配置した例となります。
コードのダブルコーテーション “” で囲まれた範囲のテキストを変更することで、フォームの文字を変更することができます。
下記画像の場合はダブルコーテーション（””）で囲まれた”会社名”を変更すればフォームの項目名を変えることができます。
また、 size=”30″ の””で囲まれた数字を変更するとフォームのsize属性が指定できます。
supplementarytext=”” の””で囲まれた箇所はinputタグの下に表示させる、プレースホルダーテキストとして表示させることができます。
フォームパーツの種類
フォームエディター画面のツールバーから、フォームに配置するパーツを選択して配置してフォームを作成します。
各フォームパーツは「任意・必須」の選択ができますので、配置する際に指定して配置することができます。
※但しメールアドレス、個人情報保護方針同意のパーツは必須のみとなります。
また、フォームパーツ内で（※1回のみ利用可）と記載のあるパーツは、1つのフォーム内に1回のみ利用することができます。
画面の情報（遷移元のページ情報）
画面の情報（遷移元のページ情報）は設置したフォームへリンクする際に、パラメータを付与することでどこのページからの問合せなのかが取得できる「URLパラメータ機能」です。
取得できるのはフォームへリンクを張った「ページタイトル」となります。
パラメータはフォームのURLの後に「?referrerid=xx」を付加します。（「xx」には記事のIDが入ります）
例）フォームのURLが https://yourdomain.com/contact だった場合
https://yourdomain.com/contact?referrerid=xx
区切り見出し
フォームの区切りの見出しとして利用できるパーツです。
会社名（※1回のみ利用可）
会社名の入力用フィールドで利用し、任意の項目または必須かを選択できます。※こちらは1つのフォームで1回のみ利用できます。
問い合わせユーザー：氏名（※1回のみ利用可）
氏名の入力用フィールドで利用し、任意の項目または必須かを選択できます。※こちらは1つのフォームで1回のみ利用できます。
問合せユーザー：氏名・フリガナ（※1回のみ利用可）
氏名のフリガナ入力用フィールドで利用し、任意の項目または必須かを選択できます。※こちらは1つのフォームで1回のみ利用できます。
問合せユーザー：メールアドレス（※1回のみ利用可）
メールアドレスの入力用フィールドで利用し、こちらの項目は必須のみとなります。
またメールアドレスは確認用のフィールドも自動で配置されます。
※こちらは1つのフォームで1回のみ利用できます。
郵便番号
郵便番号の入力用フィールドで利用し、任意の項目または必須かを選択できます。
カスタマイズから設定することで、郵便番号を入力すると「住所」テキストフィールドに自動入力することができます。
住所
住所の入力用フィールドで利用し、任意の項目または必須かを選択できます。
カスタマイズから設定することで、郵便番号を入力すると「住所」テキストフィールドに自動入力することができます。
電話番号
電話番号の入力用フィールドで利用し、任意の項目または必須かを選択できます。
URL
URLの入力用テキストフィールドで利用し、任意の項目または必須かを選択できます。
個人情報保護方針同意
個人情報の取扱いの同意用のチェックボックスで利用し、こちらはチェックボックスは必須のみとなります。
また、上記画像にある「個人情報保護方針を見る」の名称やリンク先を設定することができます。
フォームパーツで上記の“個人情報保護方針同意”までのパーツは、name属性が固定となっていますので、フォームパーツを配置するだけでご利用いただけましたが、下記の“テキスト”フォームパーツからは、name属性を必ず「半角英数字」で入力してお使いいただくパーツとなります。
設置の際はご注意ください。
テキスト
テキストの入力用フィールドで利用し、任意の項目または必須かを選択できます。
テキスト
※title=”テキスト” のダブルコーテーションで囲まれた文字はフォームの項目名として入力してください。
“name属性（半角英数字）を入力してください”のダブルコーテーションで囲まれた文字列は、半角英数字でname属性を設定します。
テキストエリア
テキストエリアの入力用フィールドで利用し、任意の項目または必須かを選択できます。
テキストエリア
※cols=”30″ のダブルコーテーションで囲まれた値で横幅を指定することができます。
rows=”5″ のダブルコーテーションで囲まれた値で高さを指定することができます。
ラジオボタン
ラジオボタンの入力用フィールドで利用し、任意の項目または必須かを選択できます。
項目名を入力してください
※value=”選択肢を半角カンマ区切りで入力してください” のダブルコーテーションで囲まれた文字を（,）半角カンマ区切りで入力すると選択肢が設定できます。
セレクトボックス
セレクトボックスの入力用フィールドで利用し、任意の項目または必須かを選択できます。
項目名を入力してください
※value=”選択肢を半角カンマ区切りで入力してください” のダブルコーテーションで囲まれた文字を（,）半角カンマ区切りで入力すると選択肢が設定できます。
チェックボックス
チェックボックスの入力用フィールドで利用し、任意の項目または必須かを選択できます。
項目名を入力してください
※value=”選択肢を半角カンマ区切りで入力してください” のダブルコーテーションで囲まれた文字を（,）半角カンマ区切りで入力すると選択肢が設定できます。
デートピッカー
デートピッカー（日付）の入力用フィールドで利用し、任意の項目または必須かを選択できます。
ボタンテキスト
ボタンテキストは「戻るボタン用テキスト」「確認ボタン用テキスト」「送信ボタン用テキスト」とあり、画面内に配置されるボタンのテキストを変更することができます。
※text=”” のダブルコーテーションで囲まれたテキストを変更することで、ボタン表示のテキストを変更することができます。
入力項目ステップ
ステップフォームを作成する場合のフォームパーツになります。
下記のフォームパーツの間に設定したフォームが1つ画面となります。次の画面を作る場合は、下記と同じフォームパーツを作成し、step=”” の値を2、3のように追加していくことで、画面遷移が行えるステップフォームが作成できます。
※step=”ステップ数を0以外の正整数で入力” ダブルコーテーションで囲まれた文字列を半角の数字を入力します。
例）step=”1″ とした場合はステップの1画面目となります。
画面設定
ここからはフォームの各種セッティングを行う画面の設定になります。
画面設定では、「カラーテーマ」「ステップガイド表示設定」「送信完了画面に表示するメッセージ」の設定項目があります。
それぞれの設定内容は下記の通りとなります。
カラーテーマ設定
フォームのカラーテーマとして全6色を用意しており、フォーム毎に色を変更することができます。
ステップガイド表示設定
フォームのステップガイドを「表示する」に設定すると、フォームの上部に「入力 → 確認 → 送信完了」とナビゲーションが表示されます。
また、入力項目ステップのプログレスバーのタイプを選ぶことが可能です。
送信完了画面に表示するメッセージ
フォーム送信後の完了画面に表示する画面を設定します。
メッセージの他にも画像を配置したり、他のページへのリンクを配置したり、エディター機能で画面を作ることができます。
フォームデータ挿入設定
送信されるメール内容にフォームのID、フォームの画面URL、問い合わせ番号を挿入する設定画面です。
フォームID
フォーム固有の「フォームID」が管理者宛メール内に挿入します。フォームが複数ある場合など、どのフォームで送信されたかを管理者が知ることができます。
フォームの画面URL
どのURLから送信されたか、フォームを設置した「画面のURL」を管理者宛メール内に挿入します。
問い合わせ番号
フォーム固有の「問い合わせ番号」として管理者宛と自動返信のメール本文に挿入されます。
番号は固有の番号となり「ハイフン（-）で区切られたランダムな32文字」が自動生成されます。
管理者宛メール
管理者宛に届くメールを設定します。
送信先メールアドレス（※必須）
フォームの送信先メールアドレスを設定します。
複数のメールアドレスに送る場合は、半角カンマ（,）で区切って入力してください。送信先メールアドレスを設定しないとフォームを保存することはできません。
送信元情報
送信者
フォームの送信者の名前を設定します。
送信元メールアドレス
フォームの送信元メールアドレスを設定します。未入力の場合は「ユーザーが入力したメールアドレス」が適用されます。
件名
管理者に届く件名を設定します。未入力の場合は「お問合せがありました」が自動で反映されます。
追加ヘッダー（Cc、Bcc用）
CcとBcc宛に追加する場合に入力します。
CcとBcc宛に設定する場合は改行してください。複数に送る場合は半角カンマ区切りで入力してください。
例）Cc:ccmail@example.com
Bcc:bccmail:example.com
自動返信メール
フォームを送信したユーザーに送る自動返信メールの設定です。
自動返信メール
自動返信メール機能を使う場合は「利用する」にチェックを入れます。
送信元情報
送信者
送信者の名称を設定します。未入力の場合は「サイト名」が挿入されます。
送信元メールアドレス
自動返信の送信元メールアドレスを設定します。未入力の場合は「管理者宛メール：送信先メールアドレス」が適用されます。
件名
自動返信メールの件名を設定します。未入力の場合は「お問合せいただきありがとうございます」が挿入されます。
あいさつ分
自動返信メールのメール本文のあいさつ文を設定します。
フォームを配置した際のname属性の値を使う事で、ユーザーがフォームで入力した会社名や名前など自動挿入することができます。
例）{company} 御中 {your_name_1} {your_name_2} 様
下記のname属性を設定するとあいさつ文で「会社名」「氏名」を自動で挿入することができます。
- 会社名 {company}
- 姓 {your_name_1}
- 名 {your_name_2}
署名
自動返信メールの署名を設定します。