Neveでは、Starter Sitesからテンプレートをインポートし、サイト作成を簡単に行えることを以前の記事で書きました。

この機能で選択できるテーマの中には、問い合わせフォームが含まれているものがあります。Neveではこの問い合わせフォームはプラグインを使用して作成しており、スターターサイトインポート後は送信する宛先や内容を自分で設定することとなります。

そのプラグインがWPForms Liteです。

Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー – WordPress プラグイン | WordPress.org 日本語

非常に扱いやすいプラグインとして有名で、NeveだけでなくAstraでもこのプラグインが自動でインストールされたりしています。

早速このプラグインを使用して問い合わせフォームを作成したいと思います!

1.スターターサイトをインストール

はじめの手順として、問い合わせフォームがすでに内容に含まれているスターターサイトをインポートします。スターターサイトのインポート手順は上にあるリンクをクリックしてください。

今回試しにインポートしてみるサイトはこちらの「Vacation Rental」です。

問い合わせフォームを含むサイト

中央右側の濃紺の部分が問い合わせフォームですね。これをインポートします。インポート確認画面で、以下の箇所をONにしてインポートしてください。

インポート確認画面

インポート完了後はサイトが以下のようになります。

インポート後のサイト表示

濃紺の部分に特にフォームらしきものが表示されていませんが、インポート直後はこれでOKです。これから設定をしていきます。

2.WPFormの入力内容を設定する

フォームを新規追加する

サイトを訪れた人に入力してもらう内容を設定します。

管理画面 > WPForms > 新規追加 を選択します。

開かれた画面の「フォームに名前を付ける」に、これから作るフォームに名前を付けます。(入力する名前はなんでもいいです。)
その後、下の図の「Simple Contact Form」の「テンプレートを使用」ボタンをクリックしましょう。

WPForms セットアップ画面

すると、簡単なフォームが作成されます。

WPForms フィールド画面

この画面で、入力内容を編集できます。今回は以下の情報を入れられるフォームを作ります。

  • 氏名
  • メールアドレス
  • 性別
  • メッセージ

すでにあるフィールドを編集する

Nameのフィールドをクリックします。すると、そのフィールドの設定画面になります。

Nameフィールド設定

テンプレートが英語しかないので、これを日本語にします。左ブロックのラベルやフォーマットを編集しましょう。

Nameフィールド編集後

これらをほかのフィールドにも実施します。

フィールド編集後

フィールドを追加する

性別は入力ではなく選択式にしたいと思います。「フィールドを追加」タブの「多項選択式」をクリックします。

「フィールドを追加」タブ

すると、一番下に選択したフィールドが表示されます。

追加されたフィールド

これを以下のように設定します。フィールドの位置は、ドラッグアンドドロップで変えられます。

編集後

設定が終わったら、右上の「保存」ボタンを押して一時保存しましょう。

3.WPFormの外観を設定する

現状の設定だと、フォームの送信ボタンの文字が英語の「Submit」のままなので、変更します。左サイドバーの「設定」をクリックします。

設定ボタン

すると、フォームの入力内容以外の設定画面に移ります。以下の部分を日本語に変えましょう。

4.WPFormの送信先、送信内容を設定する

入力内容が決定したので、残りはその内容をどこに送信するのか、またどのような文章で送信するのか設定が必要です。「設定」>「通知」をクリックします。

通知

すると、通知内容の設定画面になります。

通知設定画面

かっこで囲まれている文字列が入力されていますが、「スマートタグ」と呼ばれるもので、これを使用することでフィールドに入力された値や、WordPressの設定値を通知内容として登録できます。

例)
「送信先メールアドレス」⇒「{admin_email}」
  WordPressで設定している管理者のメールアドレスが送信先になります。
「返信先メールアドレス」⇒「{field_id=”1″}」
  2.で設定したフィールドID「1」の要素が返信先メールアドレスとなります。
  フィールドのIDは以下に書いてあります。

フィールドID

設定が完了したら、「保存」ボタンを押して保存しましょう。

5.固定ページにフォームを表示させる

フォームの設定が終わったので、フォームを固定ページに表示させましょう。

右上の「埋め込み」>「既存のページ」を選択します。

WPForms設定画面

フォームを表示させるページを選択します。今回は「Home」を選びます。

埋め込みページ選択

ページ編集画面に移ります。フォームを表示させたい箇所を選択し、WPFormsブロックを挿入します。

WPFormsブロック

挿入後はこうなります。背景色に合わせて文字色などを整えましょう。

ブロック挿入後

編集後はこんな感じになりました。

フォーム追加後

6.フォームが正しく機能するか確認する。

試しにフォームに情報を入力し、送信してみましょう。自分が設定したメールアドレスに内容が送信されていればOKです。

まとめ

Neveのスターターサイトと一緒によく使用されているWPFormsについて書いてみました!この記事をみて作成の参考にしてもらえると幸いです。ほかにも設定できるフィールドや細かな設定もあるので、試しにいろいろ触ってみたいと思います!


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP