Contact Form by WPFormsの設定方法【軽量・簡単使い方】

  • URLをコピーしました!

お問い合わせフォームを作成する上でContact Form 7は人気こそあれど、少々処理が重い部類のプラグインでもあります。

Contact Form 7に代わるプラグインが「Contact Form by WPForms」!

WordPressテーマSWELLが推奨しているプラグインの一つです。

今回はContact Form by WPFormsの設定方法を画像付きで解説していきます。

目次

Contact Form by WPFormsのメリット

処理が軽い

Contact Form 7は無料で高機能ではありますが、代わりに動作・処理が重いプラグイン。

プラグインが重いとページの表示速度が下がる原因になります。

少しでも表示速度を速くしたい!という人におすすめできるのがContact Form by WPFormsです。

PV数が多いサイト・ブログならともかく、お問い合わせなんてめったにこない!という人にはメリットしかありません。

簡単

お問い合わせフォームに細かいこだわりがない人ほどContact Form by WPFormsは向いています。

操作は簡単!

編集画面も見やすく「コードばかりでわからない、見づらい」ということがありません。

Contact Form 7の設定ができる方なら、Contact Form by WPFormsの設定は楽々です。

Contact Form by WPFormsの設定方法

STEP
プラグイン→新規追加で【Contact Form by WPForms】を入力
STEP
【今すぐインストール】→【有効化】
STEP
有効化後、スクロールして【最初のフォームを作成】を選択
STEP
【簡単なお問い合わせフォーム】を選択
STEP
初期配置で【名前】【メール】【コメントまたはメッセージ】が出るので編集したい項目をクリック

順当に【名前】のところをクリック。

STEP
フィールドオプションで詳細編集

画像の例だとラベルを【お名前】、フォーマットを【シンプル】に変更。

【シンプル】を選択すると、STEP5で名前の性・名が分かれていた部分が1つの項目にまとまります。

STEP
【メール】の項目をクリック
STEP
ラベルを【メールアドレス】に変更

※細かい文言を気にしない人はスキップ可

STEP
【コメントまたはメッセージ】をクリック
STEP
ラベルを【メッセージ本文】に変更

※細かい文言を気にしない人はスキップ可

STEP
左上の【フィールドを追加】→標準フィールド内の【一行のテキスト入力】を選択
STEP
【一行のテキスト入力】をメッセージ本文の上にドラッグ
STEP
ラベルを【件名】に記述

必須チェックボックスに✓を入れる

STEP
内容に問題がなければ右上の【保存】を選択
STEP
お問い合わせの内容ができたら【</>埋め込む】を選択
STEP
【ショートコードを使用する】を選択

画面に表示された[wp forms id=”番号” title=”false”]をコピー

STEP
お問い合わせのための固定ページが作成済みの場合【既存のページを選択】

※固定ページでタイトル(例、お問い合わせ)とURLスラッグ(例、form)を入力して公開すればOK

STEP
お問い合わせのために作成した固定ページを選択→【行きましょう!】
STEP
STEP16でコピーしたショートコードを貼り付け(ペースト)→【更新】

※貼り付け(ペースト)が上手くいかなかったら、ブロックエディターから【ショートコード】を選択して貼り付け

STEP
完了!

更新後、固定ページを確認すると表示されてます!

スパム対策:reCAPTCHA設置方法

Google reCAPTCHAサイトキーとシークレットキーを取得してある前提で進めます

STEP
【WPForms】→【設定】を選択
STEP
【CAPTCHA】タブ→【reCAPTCHA】を選択
STEP
スクロールして【タイプ】【サイトキー】【シークレットキー】を入力

Google reCAPTCHAで取得したタイプ・サイトキー・シークレットキーを入力

STEP
他設定に問題がなければ【設定を保存】
STEP
【WPForms】→【すべてのフォーム】を選択

作成したお問い合わせフォームの編集画面へ移動

STEP
標準フィールドの右下【CAPTCHA】を選択
STEP
【OK】を選択
STEP
reCAPTCHA有効のマークを確認できたら【保存】
STEP
完了!

お問い合わせフォームを固定ページで確認。

reCAPTCHA v3の場合、画面右下あたりにreCAPTCHAアイコンが表示されているのを確認できたら完了です!

まとめ

・簡単手軽なお問い合わせフォームはContact Form by WPFormsがおすすめ
・Contact Form by WPFormsの簡単な設定方法とreCAPTCHA設置方法を解説
・サイトの表示速度を少しでも早くしたい人はContact Form by WPForms

最初、サイトの表示速度を挙げるためにContact Form 7が重いことがわかった!何か別のプラグインで代替しよう→Contact Form by WPFormsがよさそう!という流れで乗り換えました。

有名どころだけでなく他のプラグインを試してみることも必要ということですね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる