生徒サイトに問い合わせフォームを付けたいです
先生WPFormsプラグインで問い合わせフォームを作る方法を説明します。
WEBサイトには問い合わせフォームを設置して、訪問者からの指摘や問い合わせを受け付けることができるようにしておいた方がよいとされています。
ここでは、プラグインWPFormsを使用してお問い合わせフォームを作成する方法を説明します。
WPFormsプラグインをインストール
WordPressの管理画面で「プラグイン」ー「新規追加」を開いて、キーワードにContact Form by WPFormsと入力して、検索結果からContact Form by WPFormsをインストールします。
インストールが完了すると有効化ボタンが表示されるのでクリックします。
インストールして有効化すると、WordPressの管理画面にWPFormsのメニューが追加されます。その中の新規追加をクリックします。
WPFormsでフォーム画面を作成する
WPFormsの開始画面が表示されるので「フォームを作成」をクリックします。
フォームの作成画面になるので、作成するフォームの名前を入力してテンプレートを選択します。
ここでは名前は「お問い合わせ」、テンプレートは「Simple Contact Form」を選択しています。
「空白のフォーム」を選択してゼロからフォームを作成することもできますが、問い合わせフォームを作るのであれば、英語とはいえ「Simple Contact Form」を基に作成する方が簡単です。
選択したテンプレートからフォームが作成されます。
画面項目の設定
テンプレートの項目に加えて会社名欄も設けたいので「単一行テキスト」フィールドをドラッグして先頭の位置に配置します。
選択したテンプレートを基に作成されたフォームが表示されます。
配置したテキスト欄を選択して、画面左側のフィールド設定のラベル欄を会社名に変えます。
次にその下のテキスト欄を選択して、同じようにラベルをお名前に変更します。また、フォーマットをシンプルへと変更します。
次のメールアドレス欄も同様に、ラベルをメールアドレスへと変更します。
最後のお問い合わせ内容欄も、同じようにラベルをお問い合わせ内容とします。
以上で画面項目の設定は完了です。これまでの設定内容をまとめると以下になります。
| 項目 | 必須 | 入力タイプ |
|---|---|---|
| 会社名 | NO | 単一行テキスト |
| お名前 | YES | 名前［シンプル］ |
| メールアドレス | YES | メール |
| お問い合わせ内容 | YES | 段落テキスト |
次に、「設定」ページへと移動して「送信」ボタンの文字を英語から変更します。
フォーム編集は終わりましたので、ここでフォームを保存しておきます。
フォーム送信時の通知方法を設定する
次に、フォームが送信された時の通知方法を設定します。
「通知」画面を開いて「デフォルト通知」の「スマートタグを表示」をクリックします。
「メールアドレス」欄がリストに表示されるので選択します。
送信先メールアドレス欄には{field_id="1"},{admin_email}と入力します。これで送信時に入力者にも通知メールが送信されます。
入力者にも送信されるのに合わせて、通知メールの件名などを編集します。
「お問い合わせ内容」に最初からある{all_fields}は全ての項目の入力内容を表示するためのものです。これが無いと入力内容の確認ができないので、必ず残すようにします。
フォーム送信完了後の動きを設定する
今度は、送信後に表示される内容に付いて設定するために「確認」画面を開きます。
以下の3つから送信後の動作「確認タイプ」を選択できます。
| 項目 | 説明 |
|---|---|
| メッセージ | 入力フォームのページのまま確認メッセージを表示（入力フォームは見えなくなる） |
| ページを表示 | このサイト内の別ページに移動 |
| URLに移動（リダイレクト） | 外部サイトのページに移動 |
ここではメッセージを選択していますが、使い方に応じて変えてください。
メッセージの場合の表示は以下のようになります。
ページに配置する時に必要なショートコードをメモしておきます。
作成したフォームをページに配置する
作成したフォームをページに配置します。WordPressの管理メニューで「固定ページ」ー「新規追加」を開きます。
ページにショートコードのブロックを配置します。
作成したフォームのショートコードを入力します。
編集ページではショートコードが表示されているだけですが、ページのプレビューを開くと、ページにフォームが配置されています。
以上でお問い合わせフォームの設置は完了です。
