Contact Form by WPForms設定方法を9ステップで解説

「お問い合わせページ」を設置したいんだけど、どおやったらいいかわからない。

こんな風にお悩みではありませんか?

この記事でわかること
  • Contact Form by WPFormsの基礎知識
  • Contact Form by WPFormsの設定方法

僕はブログを始めて間もないですが、ブログを始めてみて疑問に思ってことや困ったことを発信しています。

SWELL推奨プラグインなどで「Contact Form by WPForms」が紹介されていたからインストールはしたけど、設定方法がいまいち分からないからそのままという方も多いんじゃないでしょうか。

そこでこの記事では、誰にでもできる「Contact Form by WPForms」の設定方法を分かりやすく解説していきます。それではいきましょう!

Contact Form by WPFormsの基礎知識

Contact Form by WPFormsとは

初心者でも簡単に「お問い合わせフォーム」が作れるプラグインです。

WordPressブログを運営していくにあたって、ユーザー・読者のためのお問い合わせフォームは必要になります。

Contact Form7と比較

Contact Form by WPForms」も「Contact Form7」もお問い合わせ機能に違いはありません。

Contact Form by WPForms
Contact Form7
  • ドラッグ&ドロップで直感的に作ることができて、初心者でも簡単
  • HTMLとCSSを使って作るので、初心者には難しい

Contact Form7の方が昔から使われているプラグインのため、今でも人気があります。しかし、初心者の方には簡単に作ることができるContact Form by WPFormsがおすすめで、利用者も増えている人気のプラグインです。

Contact Form by WPForms設定方法9ステップで解説

STEP1:お問い合わせ完了ページ作成

STEP
  1. 「固定ページ」をクリック
  2. 「新規追加」をクリック
STEP
  1. タイトルは「お問い合わせ完了」を入力
  2. お問い合わせいただいた方への説明文を入力
  3. 「TOPページ」へ戻れるSWELLボタンを作成
  4. パーマリンクを「inquiry-completed」に変更
  5. 「更新」をクリック

STEP2:新規作成

STEP
  1. 「WPForms」をクリック
  2. 「新規追加」をクリック
STEP
  1. 「フォーム名」を付ける
  2. 「空のフォーム」をクリック

STEP3:フィールドを追加

「名前」、「メール」、「段落テキスト」をドラッグ&ドロップで設置する

STEP4:フィールドオプション設定

STEP
  1. 「フィールドオプション」をクリック
  2. 「コメントまたはメッセージ」と入力
  3. 「必須」をクリック
STEP
  1. 「一言」添える ※「ハンドルネームでOKです」など
  2. 「必須」をクリック
STEP
  1. 「必須」をクリック
  2. 「確認メールを有効化」をクリック

STEP5:一般設定

STEP
  1. 「設定」をクリック
  2. 「一般」をクリック
  3. 「Google v3 reCAPTCHAを有効化」をクリック
STEP
  1. 「フィールド」をクリック
  2. 「reCAPTCHA」をクリック

STEP6:通知設定

  1. 「設定」をクリック
  2. 「通知」をクリック
  3. 「スマートタグを表示」をクリック
  4. 「メール」をクリック
  5. {field_id=”1″}が表示される
  6. 「件名」を入力 ※「お問い合わせありがとうございます」など
  7. そのまま
  8. そのまま
  9. そのまま
  10. 「メッセージ」を入力 ※最後に{user_ip}を入力

{user_ip}と入れておくと、相手のIPアドレスが分かるため、トラブル防止につながるので入れておくのをおすすめします。

STEP7:確認設定

  1. 「設定」をクリック
  2. 「確認」をクリック
  3. 「ページ表示」を選択
  4. 「お問い合わせ完了」を選択
  5. 「保存」をクリック

STEP8:re CAPTHCAの設定

reCAPTCHAの設定には「Google reCAPTCHA」の設定が必要です。

下の記事で「Google reCAPTCHA」の設定方法を分かりやすく解説しているので参考にしてみてください。

STEP
  1. 「WPForms」をクリック
  2. 「設定」をクリック
  3. 「CAPTCHA」をクリック
  4. 「reCAPTCHA」を選択
STEP
  1. 「reCAPTCHA v3」を選択
  2. 「サイトキー」を入力
  3. 「シークレットキー」を入力
  4. 「設定を保存」をクリック

STEP9:お問い合わせページ作成

STEP
  1. 「固定ページ」をクリック
  2. 「新規追加」をクリック
STEP
  1. タイトルを入力
  2. 「WPForms」を入力
STEP

「お問い合わせ」を選択

STEP
  1. パーマリンクを「inquiry」に変更
  2. 「更新」をクリック

お疲れ様でした!これで「お問い合わせフォーム」は完成です。

まとめ

最後におさらいです。

  1. Contact Form by WPFormsの基礎知識
  2. Contact Form by WPForms設定方法9ステップで解説
  3. まとめ

「お問い合わせ」は記事を読んでいただいた方や、企業の方との窓口になります。ブログを運営していく上で大切な設定なので、ぜひ参考にしてみてください。最後まで読んでいただきありがとうございました。