WordPressのサイトに問い合わせフォームを設置したいです
WPFormsプラグインで問い合わせフォームを作る方法を説明します
WEBサイトの問い合わせフォームについて
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の管理メニューで固定ページ
ー新規追加
を開きます。
ページにショートコード
のブロックを配置します。
作成したフォームのショートコードを入力します。
編集ページではショートコードが表示されているだけですが、ページのプレビューを開くと、ページにフォームが配置されています。
以上でお問い合わせフォームの設置は完了です。