Neveでは、Starter Sitesからテンプレートをインポートし、サイト作成を簡単に行えることを以前の記事で書きました。
この機能で選択できるテーマの中には、問い合わせフォームが含まれているものがあります。Neveではこの問い合わせフォームはプラグインを使用して作成しており、スターターサイトインポート後は送信する宛先や内容を自分で設定することとなります。
そのプラグインがWPForms Liteです。
Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー – WordPress プラグイン | WordPress.org 日本語
非常に扱いやすいプラグインとして有名で、NeveだけでなくAstraでもこのプラグインが自動でインストールされたりしています。
早速このプラグインを使用して問い合わせフォームを作成したいと思います！
１．スターターサイトをインストール
はじめの手順として、問い合わせフォームがすでに内容に含まれているスターターサイトをインポートします。スターターサイトのインポート手順は上にあるリンクをクリックしてください。
今回試しにインポートしてみるサイトはこちらの「Vacation Rental」です。
中央右側の濃紺の部分が問い合わせフォームですね。これをインポートします。インポート確認画面で、以下の箇所をONにしてインポートしてください。
インポート完了後はサイトが以下のようになります。
濃紺の部分に特にフォームらしきものが表示されていませんが、インポート直後はこれでOKです。これから設定をしていきます。
２．WPFormの入力内容を設定する
フォームを新規追加する
サイトを訪れた人に入力してもらう内容を設定します。
管理画面 ＞ WPForms ＞ 新規追加 を選択します。
開かれた画面の「フォームに名前を付ける」に、これから作るフォームに名前を付けます。（入力する名前はなんでもいいです。）
その後、下の図の「Simple Contact Form」の「テンプレートを使用」ボタンをクリックしましょう。
すると、簡単なフォームが作成されます。
この画面で、入力内容を編集できます。今回は以下の情報を入れられるフォームを作ります。
- 氏名
- メールアドレス
- 性別
- メッセージ
すでにあるフィールドを編集する
Nameのフィールドをクリックします。すると、そのフィールドの設定画面になります。
テンプレートが英語しかないので、これを日本語にします。左ブロックのラベルやフォーマットを編集しましょう。
これらをほかのフィールドにも実施します。
フィールドを追加する
性別は入力ではなく選択式にしたいと思います。「フィールドを追加」タブの「多項選択式」をクリックします。
すると、一番下に選択したフィールドが表示されます。
これを以下のように設定します。フィールドの位置は、ドラッグアンドドロップで変えられます。
設定が終わったら、右上の「保存」ボタンを押して一時保存しましょう。
３．WPFormの外観を設定する
現状の設定だと、フォームの送信ボタンの文字が英語の「Submit」のままなので、変更します。左サイドバーの「設定」をクリックします。
すると、フォームの入力内容以外の設定画面に移ります。以下の部分を日本語に変えましょう。
４．WPFormの送信先、送信内容を設定する
入力内容が決定したので、残りはその内容をどこに送信するのか、またどのような文章で送信するのか設定が必要です。「設定」＞「通知」をクリックします。
すると、通知内容の設定画面になります。
かっこで囲まれている文字列が入力されていますが、「スマートタグ」と呼ばれるもので、これを使用することでフィールドに入力された値や、WordPressの設定値を通知内容として登録できます。
例）
「送信先メールアドレス」⇒「{admin_email}」
WordPressで設定している管理者のメールアドレスが送信先になります。
「返信先メールアドレス」⇒「{field_id=”1″}」
２．で設定したフィールドID「１」の要素が返信先メールアドレスとなります。
フィールドのIDは以下に書いてあります。
設定が完了したら、「保存」ボタンを押して保存しましょう。
５．固定ページにフォームを表示させる
フォームの設定が終わったので、フォームを固定ページに表示させましょう。
右上の「埋め込み」＞「既存のページ」を選択します。
フォームを表示させるページを選択します。今回は「Home」を選びます。
ページ編集画面に移ります。フォームを表示させたい箇所を選択し、WPFormsブロックを挿入します。
挿入後はこうなります。背景色に合わせて文字色などを整えましょう。
編集後はこんな感じになりました。
６．フォームが正しく機能するか確認する。
試しにフォームに情報を入力し、送信してみましょう。自分が設定したメールアドレスに内容が送信されていればOKです。
まとめ
Neveのスターターサイトと一緒によく使用されているWPFormsについて書いてみました！この記事をみて作成の参考にしてもらえると幸いです。ほかにも設定できるフィールドや細かな設定もあるので、試しにいろいろ触ってみたいと思います！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
