WPFormsの使い方!お問い合わせフォームを超簡単に作れるプラグイン

WordPressでブログを新しく立ち上げる時に絶対に欠かせてはいけないのが「お問い合わせフォーム」です。

一般的にお問い合わせフォームはWordpressのプラグインを使用して作っていくことになりますが、直感的な作業で初心者でも簡単にフォームを作れるのが「WP Forms」です。

WPFormsは正式名称を「Contact Forms by WPForms -WordPress用のドラッグ & ドロップフォームビルダー」と言いますが、当サイトでもこのプラグインを使ってお問い合わせフォームを作っています。

この記事では、WordPressに詳しくない初心者の方にもわかりやすく、簡単に見栄えの良いお問い合わせフォームを作る手順を紹介していきます。

目次

WPFormsをインストールする

まずは通常のプラグイン導入の流れに沿って、WPFormsをインストールしましょう。

プラグイン追加画面でWPFormsを追加する
WPFormsをインストール

プラグインの「新規追加」から「WPForms」と検索すると、クマのイラストが印象的な「Contact Form by WPForms −WordPress用のドラッグ&ドロップフォームビルダー」が表示されます。

「今すぐインストール」を選択し、有効化まで進めましょう。

ノジーのアイコン画像ノジー

正式名称と通称が違うので注意ですね!

ちなみに、WPFormsには無料版のLiteと有料版のProがありますが、サイトにお問い合わせフォームを設置するくらいであればLiteで十分です。

新規でお問い合わせフォームを作る

ここからは実際にお問い合わせフォームを作るための手順を画像付きで紹介します。

WPFormsを有効した直後に、自動で「WPFormsへようこそ」というガイドが表示されるので、そこから「最初のフォームを作成」をクリックするか、

WPFormsで新規のお問い合わせフォームを作成する
有効化直後はガイドが表示される

ダッシュボードのサイドバーから「WPForms」を選択し「新規追加」をクリックします。

WPformsのセットアップ画面
簡単なお問い合わせフォームを選択

「空のフォーム」を選択すると自分で自由にゼロからフォームを作ることができますが、「簡単なお問い合わせフォーム」を選択すると、既に出来上がったフォームを表示させられるので便利です。

WPFormsのフィールド画面
デザインが整ったフォームを簡単に作れます。

お問い合わせフォームの内容をカスタマイズ

WPFormsでは一度作成したフォームの編集を簡単に行うことができます。

上記の編集画面を閉じてしまっていたら、ダッシュボードのサイドバーから「WPForms>すべてのフォーム」と進み、編集したいフォームの「編集」をクリックしましょう。

「すべてのフォーム」から「編集」を選択

既存の項目を修正したい場合

既に表示されている要素を修正したい場合は、修正したい項目をクリックすると、プレビューの左側のフィールドオプション画面で事細かに編集をすることができます。

WPFormsのフィールド画面
編集したい項目をクリック!

今回は試しに姓名が分離している「名前」を、姓名同枠にしてみて、名字だけでも可ということが訪問者に伝わるようにしてみましょう。

フィールドオプションで行った変更はリアルタイムで右側のプレビュー画面に反映されるので、何も知識がなくても、簡単に自分好みのフォームを作ることができます。

WPFormsのフィールド画面
フィールドオプションで自由に編集

新しい項目を追加したい場合

画面左側から追加したい項目を挿入したい箇所にドラッグ&ドロップするだけで、設置が可能です。

なお、ただクリックしただけだとフォームの一番下に追加されます。

WPFormsのフィールド画面
追加したいフィールドをドラッグ&ドロップ

フォーム内の順番を入れ替える時もドラッグ&ドロップで簡単に行うことができます。

追加した項目を削除したい場合

削除したい項目にカーソルを合わせるとゴミ箱のアイコンが表示されるので、それをクリックします。

WPFormsで項目を削除する画面
削除したい項目のゴミ箱をクリック

すると「フィールドを削除してもよいですか?」という確認画面に切り替わるので「OK」を選択しましょう。これで指定した項目の削除が完了です。

WPFormsのフィールド削除
OKを選択したら削除完了

お問い合わせフォームの設定をする

「設定」という項目からは、お問い合わせがあった時の通知先や、お問い合わせをしたユーザーに対して表示させる文言の設定ができます。

「一般」では、送信ボタンの文字を変えることができます。

WPFormsの一般設定画面
「設定>一般」

「通知」では、実際に訪問者からのお問い合わせがあった時に、サイト運営者に通知が届く際の、送信先や送信される内容についての設定ができます。

WPFormsの通知設定画面

「確認」では、ユーザーがお問い合わせを行なった直後に表示させる文章や画面の設定ができます。

  • メッセージ:表示させるメッセージを自由に編集可能
  • ページを表示:特定の固定ページに飛ばすことが可能
  • URLに移動(リダイレクト):指定したURLのページに飛ばすことが可能
WPFormsの確認設定画面

セキュリティ対策も忘れずに

お問い合わせフォームを設置していると、必然的にセキュリティ面で不安が生じるものです。

僕の場合はお問い合わせフォームに「ReCAPTCHA」を追加して、チェックボックスを設置し、セキュリティ対策をしています。

ノジーのアイコン画像ノジー

悪質なアクセスやウイルスからサイトを守りましょう!

STEP
ReCAPTCHAにアクセスをする
STEP
Admin Consoleをクリック
reCAPTCHAの設定画面
Admin Consoleをクリック
STEP
新しいサイトを登録する
reCAPTCHAの設定画面
  • ラベル:自分でわかればOK
  • reCAPTCHAタイプ:reCAPTCHA v2(「私はロボットではありません」チェックボックス)
  • ドメイン:reCAPTCHAを追加したいサイトのドメインを入力
  • オーナー:別アドレスを使いたい場合はアドレスを新たに入力する
  • reCAPTCHA利用条件に同意する:チェック
STEP
キーをコピーする
reCAPTCHAのサイトキーコピー画面
サイトキーとシークレットキーをコピー
STEP
WPFormsにそれぞれのキーを貼り付ける
WPFormsのreCAPTCA設定画面
WPForms内でreCAPTCHAの設定

ダッシュボードのサイドバーから「WPForms>設定」へと進み「reCAPTCHA」を選択すると、上記のような画面が表示されます。

  • タイプ:Checkbox reCAPTCHA v2を選択
  • サイトキー:コピーしたサイトキーを貼り付け
  • シークレットキー:コピーしたシークレットキーを貼り付け

ここまで完了したら「設定を保存」をクリックしましょう。

これでreCAPTCHAを用いたチェックボックスの設定が完了します!

お問い合わせフォームをサイトに反映させる

ダッシュボードのサイドバーから「WPForms>すべてのフォーム」と進み、作成したお問い合わせフォームの「ショートコード」をコピーします。

WPFormsの「すべてのフォーム」画面
ショートコードを取得

次に固定ページを新規作成し、本文部分にコピーしたショートコードを貼り付けます。

  • Gutenbergの場合:「ショートコード」を選択し貼り付け
  • クラシックエディタの場合:テキスト編集画面に貼り付け
WPFormsのショートコード画面
固定ページの本文中にコードを貼り付け

これで、お問い合わせフォームは完成ですね!

ノジーのアイコン画像ノジー

セキュリティ強化のためのチェックボックスも無事に表示されてます!

WPFormsで実装されたお問い合わせフォーム

このように「WPForms」を使うと、簡単にサイトにお問い合わせフォームを実装することができます。

お問い合わせフォーム作成用のWordPressプラグインでは「Contact Form7」も有名ですが、より直感的な作業で見栄えの良いフォームが作れるのは「WPForms」かなーと思います。

お問い合わせフォームがちゃんとしていることで、サイトの信頼性も高まるので、ぜひこの記事を参考に実装を進めてみてください!

目次
閉じる