WordPressでブログを新しく立ち上げる時に絶対に欠かせてはいけないのが「お問い合わせフォーム」です。
一般的にお問い合わせフォームはWordpressのプラグインを使用して作っていくことになりますが、直感的な作業で初心者でも簡単にフォームを作れるのが「WP Forms」です。
WPFormsは正式名称を「Contact Forms by WPForms -WordPress用のドラッグ & ドロップフォームビルダー」と言いますが、当サイトでもこのプラグインを使ってお問い合わせフォームを作っています。
この記事では、WordPressに詳しくない初心者の方にもわかりやすく、簡単に見栄えの良いお問い合わせフォームを作る手順を紹介していきます。
WPFormsをインストールする
まずは通常のプラグイン導入の流れに沿って、WPFormsをインストールしましょう。
プラグインの「新規追加」から「WPForms」と検索すると、クマのイラストが印象的な「Contact Form by WPForms −WordPress用のドラッグ&ドロップフォームビルダー」が表示されます。
「今すぐインストール」を選択し、有効化まで進めましょう。
正式名称と通称が違うので注意ですね！
ちなみに、WPFormsには無料版のLiteと有料版のProがありますが、サイトにお問い合わせフォームを設置するくらいであればLiteで十分です。
新規でお問い合わせフォームを作る
ここからは実際にお問い合わせフォームを作るための手順を画像付きで紹介します。
WPFormsを有効した直後に、自動で「WPFormsへようこそ」というガイドが表示されるので、そこから「最初のフォームを作成」をクリックするか、
ダッシュボードのサイドバーから「WPForms」を選択し「新規追加」をクリックします。
「空のフォーム」を選択すると自分で自由にゼロからフォームを作ることができますが、「簡単なお問い合わせフォーム」を選択すると、既に出来上がったフォームを表示させられるので便利です。
お問い合わせフォームの内容をカスタマイズ
WPFormsでは一度作成したフォームの編集を簡単に行うことができます。
上記の編集画面を閉じてしまっていたら、ダッシュボードのサイドバーから「WPForms＞すべてのフォーム」と進み、編集したいフォームの「編集」をクリックしましょう。
既存の項目を修正したい場合
既に表示されている要素を修正したい場合は、修正したい項目をクリックすると、プレビューの左側のフィールドオプション画面で事細かに編集をすることができます。
今回は試しに姓名が分離している「名前」を、姓名同枠にしてみて、名字だけでも可ということが訪問者に伝わるようにしてみましょう。
フィールドオプションで行った変更はリアルタイムで右側のプレビュー画面に反映されるので、何も知識がなくても、簡単に自分好みのフォームを作ることができます。
新しい項目を追加したい場合
画面左側から追加したい項目を挿入したい箇所にドラッグ&ドロップするだけで、設置が可能です。
なお、ただクリックしただけだとフォームの一番下に追加されます。
フォーム内の順番を入れ替える時もドラッグ&ドロップで簡単に行うことができます。
追加した項目を削除したい場合
削除したい項目にカーソルを合わせるとゴミ箱のアイコンが表示されるので、それをクリックします。
すると「フィールドを削除してもよいですか？」という確認画面に切り替わるので「OK」を選択しましょう。これで指定した項目の削除が完了です。
お問い合わせフォームの設定をする
「設定」という項目からは、お問い合わせがあった時の通知先や、お問い合わせをしたユーザーに対して表示させる文言の設定ができます。
「一般」では、送信ボタンの文字を変えることができます。
「通知」では、実際に訪問者からのお問い合わせがあった時に、サイト運営者に通知が届く際の、送信先や送信される内容についての設定ができます。
「確認」では、ユーザーがお問い合わせを行なった直後に表示させる文章や画面の設定ができます。
- メッセージ：表示させるメッセージを自由に編集可能
- ページを表示：特定の固定ページに飛ばすことが可能
- URLに移動（リダイレクト）：指定したURLのページに飛ばすことが可能
セキュリティ対策も忘れずに
お問い合わせフォームを設置していると、必然的にセキュリティ面で不安が生じるものです。
僕の場合はお問い合わせフォームに「ReCAPTCHA」を追加して、チェックボックスを設置し、セキュリティ対策をしています。
悪質なアクセスやウイルスからサイトを守りましょう！
- ラベル：自分でわかればOK
- reCAPTCHAタイプ：reCAPTCHA v2（「私はロボットではありません」チェックボックス）
- ドメイン：reCAPTCHAを追加したいサイトのドメインを入力
- オーナー：別アドレスを使いたい場合はアドレスを新たに入力する
- reCAPTCHA利用条件に同意する：チェック
ダッシュボードのサイドバーから「WPForms＞設定」へと進み「reCAPTCHA」を選択すると、上記のような画面が表示されます。
- タイプ：Checkbox reCAPTCHA v2を選択
- サイトキー：コピーしたサイトキーを貼り付け
- シークレットキー：コピーしたシークレットキーを貼り付け
ここまで完了したら「設定を保存」をクリックしましょう。
これでreCAPTCHAを用いたチェックボックスの設定が完了します！
お問い合わせフォームをサイトに反映させる
ダッシュボードのサイドバーから「WPForms＞すべてのフォーム」と進み、作成したお問い合わせフォームの「ショートコード」をコピーします。
次に固定ページを新規作成し、本文部分にコピーしたショートコードを貼り付けます。
- Gutenbergの場合：「ショートコード」を選択し貼り付け
- クラシックエディタの場合：テキスト編集画面に貼り付け
これで、お問い合わせフォームは完成ですね！
セキュリティ強化のためのチェックボックスも無事に表示されてます！
このように「WPForms」を使うと、簡単にサイトにお問い合わせフォームを実装することができます。
お問い合わせフォーム作成用のWordPressプラグインでは「Contact Form7」も有名ですが、より直感的な作業で見栄えの良いフォームが作れるのは「WPForms」かなーと思います。
お問い合わせフォームがちゃんとしていることで、サイトの信頼性も高まるので、ぜひこの記事を参考に実装を進めてみてください！
