【画像18枚】Contact Form by WPFormsの使い方と設定方法(初心者向け)

WPForms 使い方 設定方法

SWELLをWordPressにインストールしたけれど、お問い合わせフォームの作り方がわからない

この疑問に答えるためにWPForms Lite(正式名はContact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー)を使ってお問い合わせフォームを作成する手順を紹介しています。

お問い合わせページは完成までの手順

  1. 「WPForms Lite」のインストールと有効化
  2. プラグインでお問い合わせフォームを作成する
  3. スパム対策として「reCAPTCHA」を設定する
  4. 作成したお問い合わせフォームを固定ページに設置する
  5. 固定ページで作成したお問い合わせページをメニューに追加する

WPForms Liteを使えばお問い合わせフォームがワンクリックで作成でき、操作性が抜群。

プラグインのインストールから15分で見栄えのいいお問い合わせフォームが完成するので、一緒にチャレンジしていきましょう。

目次

「WPForms Lite」のインストール手順

くろすけ

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

STEP
【プラグイン】>【新規追加】をクリック
STEP
キーワード欄に「WPForms」と入力する
STEP
「今すぐインストール」をクリック
STEP
「有効化」をクリック
STEP
WPForms へようこそ

プラグインを有効化すると「WPForms」の案内ページが表示されます。一瞬「え?課金された?」とドキッとするかもしれませんがLite版は完全無料で使用することができるので安心してくださいね。

では、さっそくお問い合わせフォームを作成していきましょう。

「WPForms Lite」でお問い合わせフォームを作成する

お問い合わせフォームの作成はワンクリックのみ

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

STEP
「WPForms へようこそ」から 最初のフォームを作成 をクリック
STEP
フォーム名を入力して「簡単なお問い合わせフォームを作成」をクリック

「ここにフォーム名を入力してください」にわかりやすい名前を入力しましょう。

入力したフォーム名は「WPForms」の設定画面でのみ表示されるもの。特にこだわる必要はありません。

くろすけ

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

フォーム名を入力したら「簡単なお問い合わせフォーム」をクリック♪

STEP
編集画面で好きな項目を追加する

編集画面が開くと、あらかじめ「名前」「メールアドレス」「メッセージ」がセットされたお問い合わせフォームが表示されます。

ここに好きな項目(フィールド)を追加してオリジナルのお問い合わせフォームを作成しましょう。

Lite版では標準フィールドの機能が使えます

  1. 一行のテキスト入力
  2. ドロップダウン
  3. チェックボックス
  4. 名前
  5. 番号スライダー
  6. 段落テキスト
  7. 複数選択
  8. 数字
  9. メール
  10. reCAPTCHA

フィールドの移動はマウスのドラッグ&ドロップでOK。必要な項目を簡単にフォームに追加することができ、例えば【複数選択】や【チェックボックス】を使えば簡単なアンケートも作成できちゃいます!

STEP
フィールドオプションで細かなカスタマイズができる

フィールドオプションは各フィールドの細かなカスタマイズができる機能です。

タブを「フィールド追加」から「フィールドオプション」に切り替えてみましょう。

下記の画像では薄水色の背景になっている【名前】のフィールドが選択されています。

僕の場合は姓・名をわけて入力するのがめんどくさいのでフォーマットを「シンプル」に変更して1か所に名前を入力できるように。また、ニックネームやハンドルネームで入力できることも記載しておきました。

スパム対策「reCAPTCHA」の設定方法

reCAPTCHAは、Googleが開発したサイトにアクセスしているのがロボットなのか人なのか判断するためのシステムです。

  • 「私はロボットではありません」のチェックボックスを選択する
  • ゆがんだ数字やアルファベット、ひらがなを入力する
  • 複数の画像のなかから指定された画像だけを選択する

こんな経験はありませんか?

これらすべてが「reCAPTCHA」によるスパム対策なんです。

WPFormsではGoogleから発行される「サイトキー」と「シークレットキー」を使用して簡単にreCAPTCHAを設置することができます。

STEP
「Google reCAPTCHA」にアクセス
STEP
画面右上の「Admin console」をクリック
STEP
必要事項を入力する

画像の番号順に各項目を入力しまっしょう♪

  1. ラベルには「あなたのサイトの名前」などわかりやすいものを入力
  2. reCAPTCHAタイプは「reCAPTHCA v2」を選択
  3. ドメインはhttp(s)://を除いたサイトのアドレスを入力
    ⇒僕のブログの場合は「kurosuke.com」を入力します。
  4. reCAPTCHA利用条件に「同意する」にチェック
  5. すべて入力して「送信」をクリック
STEP
サイトキー、シークレットキーを取得
STEP
サイトキー、シークレットキーを入力

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

reCAPTCHAの設定が完了するとお問い合わせフォームの編集画面にてreCAPTCHAのフィールドが選択できるようになっています。

【reCAPTCHA】のフィールドを選択すると以下のようなポップアップが表示されますが、気にせず「OK」をクリック。

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

お問い合わせフォームを固定ページに設置する

完成したお問い合わせフォームを固定ページに設置することで、お問い合わせページとしてサイトに表示することができます。

STEP
ショートコードをコピーする

【ダッシュボード】> 【 WPForms】 >【すべてのフォーム】に制作済みのフォームが表示されるので使用したいフォームの右側にある「ショートコード」をコピーします。

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

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

STEP
メニューにお問い合わせページのリンクを貼る
  1. 【外観】>【メニュー】をクリック
  2. メニュー名に管理しやすい名前を入力
  3. 「メニューを作成」をクリック

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

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

お問い合わせページがサイトのトップページにあるグローバルナビ(グローバルメニュー)に設置できました。

プラグイン「Contact Form 7」を使わないのはなぜですか?

お問い合わせフォームの定番プラグインのContact Form 7ですが、

  • レイアウトの変更やデザインの微調整にプログラミング(HTMLやCSS)の知識が必要になる
  • すべてのページでお問い合わせフォームが読み込まれるためページの表示速度が遅くなる

といった理由から僕のブログではSWELL推奨プラグインであるWPForms Liteを使用しています。

動作確認した環境について

WordPress バージョン: 5.5
Contact Form by WPForms バージョン:1.6.2.2
WordPressテーマ :「SWELL」バージョン2.2.1.3(子テーマを使用)

今回のプラグインは上記の環境で動作を確認しました。

お使いのテーマや環境によっては動作しない、不具合が起こる場合があります。あらかじめバックアップを取ったうえでインストールをお願いします。

まとめ

この記事は、お問い合わせフォームが簡単に設置できるプラグイン「WPForms Lite」の使い方について解説しました。

お問い合わせフォームはブログのコンテンツのなかでも地味な存在です。でも、読者のための連絡窓口としてだけではなく「なにかあったときにでも対応してくれそう」と読者に安心感を与え、サイトの信頼性を高めてくれます。

ぜひ、サイトの運営開始と同時に設置してみてくださいね。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
よかったらシェアしてね!

コメント

コメントする

目次
閉じる