SWELLをWordPressにインストールしたけれど、お問い合わせフォームの作り方がわからない
この疑問に答えるためにWPForms Lite(正式名はContact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー)を使ってお問い合わせフォームを作成する手順を紹介しています。
お問い合わせページは完成までの手順
- 「WPForms Lite」のインストールと有効化
- プラグインでお問い合わせフォームを作成する
- スパム対策として「reCAPTCHA」を設定する
- 作成したお問い合わせフォームを固定ページに設置する
- 固定ページで作成したお問い合わせページをメニューに追加する
WPForms Liteを使えばお問い合わせフォームがワンクリックで作成でき、操作性が抜群。
プラグインのインストールから15分で見栄えのいいお問い合わせフォームが完成するので、一緒にチャレンジしていきましょう。
「WPForms Lite」のインストール手順

では、さっそくプラグインをインストールしていきましょう♪





では、さっそくお問い合わせフォームを作成していきましょう。
「WPForms Lite」でお問い合わせフォームを作成する
お問い合わせフォームの作成はワンクリックのみ
WPForms Liteでは「名前」「メールアドレス」「メッセージ」のみのシンプルなお問い合わせフォームならワンクリックで作成することができます。

「ここにフォーム名を入力してください」にわかりやすい名前を入力しましょう。
入力したフォーム名は「WPForms」の設定画面でのみ表示されるもの。特にこだわる必要はありません。

お問い合わせフォームは2個も3個も作るようなものではないので、僕はシンプルに「お問い合わせ」と入力しました。
フォーム名を入力したら「簡単なお問い合わせフォーム」をクリック♪

編集画面が開くと、あらかじめ「名前」「メールアドレス」「メッセージ」がセットされたお問い合わせフォームが表示されます。
ここに好きな項目(フィールド)を追加してオリジナルのお問い合わせフォームを作成しましょう。

Lite版では標準フィールドの機能が使えます
- 一行のテキスト入力
- ドロップダウン
- チェックボックス
- 名前
- 番号スライダー
- 段落テキスト
- 複数選択
- 数字
- メール
- reCAPTCHA
フィールドの移動はマウスのドラッグ&ドロップでOK。必要な項目を簡単にフォームに追加することができ、例えば【複数選択】や【チェックボックス】を使えば簡単なアンケートも作成できちゃいます!
フィールドオプションは各フィールドの細かなカスタマイズができる機能です。
タブを「フィールド追加」から「フィールドオプション」に切り替えてみましょう。
下記の画像では薄水色の背景になっている【名前】のフィールドが選択されています。

僕の場合は姓・名をわけて入力するのがめんどくさいのでフォーマットを「シンプル」に変更して1か所に名前を入力できるように。また、ニックネームやハンドルネームで入力できることも記載しておきました。
スパム対策「reCAPTCHA」の設定方法
reCAPTCHAは、Googleが開発したサイトにアクセスしているのがロボットなのか人なのか判断するためのシステムです。
- 「私はロボットではありません」のチェックボックスを選択する
- ゆがんだ数字やアルファベット、ひらがなを入力する
- 複数の画像のなかから指定された画像だけを選択する
こんな経験はありませんか?
これらすべてが「reCAPTCHA」によるスパム対策なんです。
WPFormsではGoogleから発行される「サイトキー」と「シークレットキー」を使用して簡単にreCAPTCHAを設置することができます。


画像の番号順に各項目を入力しまっしょう♪
- ラベルには「あなたのサイトの名前」などわかりやすいものを入力
- reCAPTCHAタイプは「reCAPTHCA v2」を選択
- ドメインはhttp(s)://を除いたサイトのアドレスを入力
⇒僕のブログの場合は「kurosuke.com」を入力します。 - reCAPTCHA利用条件に「同意する」にチェック
- すべて入力して「送信」をクリック

【WPForms】>【設定】>【reCAPTCHA】に進み、取得したサイトキーとシークレットキーをコピペして「設定を保存」をクリック。

reCAPTCHAの設定が完了するとお問い合わせフォームの編集画面にてreCAPTCHAのフィールドが選択できるようになっています。
【reCAPTCHA】のフィールドを選択すると以下のようなポップアップが表示されますが、気にせず「OK」をクリック。

すると右上に「reCAPTCHA 有効 ☑」と表示されます。お問い合わせフォームを保存すればreCAPTCHAの設定は完了です。

お問い合わせフォームを固定ページに設置する
完成したお問い合わせフォームを固定ページに設置することで、お問い合わせページとしてサイトに表示することができます。
【ダッシュボード】> 【 WPForms】 >【すべてのフォーム】に制作済みのフォームが表示されるので使用したいフォームの右側にある「ショートコード」をコピーします。

- 【固定ページ】>【新規追加】をクリック
⇒ タイトルは「お問い合わせ」または「コンタクトフォーム」など、好きなタイトルをつけてOK - 本文にショートコードをコピペ
⇒ ブロックエディターではブロックから「WPForms」を選択して本文に設置することも可能 - 記事を公開
⇒ 記事公開前にSEO SIMPLE PACKの設定でお問い合わせページを「nofollow,noindex」に設定

SEO SIMPLE PACKの設定でお問い合わせページは「nofollow,noindex」に設定しておきましょう。

- 【外観】>【メニュー】をクリック
- メニュー名に管理しやすい名前を入力
- 「メニューを作成」をクリック

追加したいページを選択して「メニューに追加」をクリック。

- メニューを表示したい位置にチェックする
- 「メニューを保存」をクリック

お問い合わせページがサイトのトップページにあるグローバルナビ(グローバルメニュー)に設置できました。
動作確認した環境について
WordPress バージョン: 5.5
Contact Form by WPForms バージョン:1.6.2.2
WordPressテーマ :「SWELL」バージョン2.2.1.3(子テーマを使用)
今回のプラグインは上記の環境で動作を確認しました。
お使いのテーマや環境によっては動作しない、不具合が起こる場合があります。あらかじめバックアップを取ったうえでインストールをお願いします。
まとめ
この記事は、お問い合わせフォームが簡単に設置できるプラグイン「WPForms Lite」の使い方について解説しました。
お問い合わせフォームはブログのコンテンツのなかでも地味な存在です。でも、読者のための連絡窓口としてだけではなく「なにかあったときにでも対応してくれそう」と読者に安心感を与え、サイトの信頼性を高めてくれます。
ぜひ、サイトの運営開始と同時に設置してみてくださいね。
コメント