【SWELL】WPFormsでお問い合わせフォームを作成する方法を解説

    転妻はりー

    WordPressブログを開設したら、お問い合わせフォームを作成しよう?

    転妻はりー

    あれもこれも作れって・・・正直めんどくさいわ!

    転妻はりー

    難しそうだし・・・後回しにしちゃお!

    まさる

    今すぐ作ってください!

    転妻はりー

    急に出てくるわね!びっくりするじゃない

    まさる

    お問い合わせフォームを作っておかないと困ったことが起きますよ?

    困ってしまうこと

    • 読者が質問や要望を伝えたくても届かない
    • 読者とコミュニケーションが取れない
    • ブログのコンテンツやデザインを改善する読者からのヒントが得られない
    • 読者が不満を持ってブログを訪れなくなる
    転妻はりー

    それは困るわ!
    でも作るのめんどくさそうだし・・・

    まさる

    大丈夫です!
    「Contact Form by WPForms」を使えば、誰でも10分でステキなお問い合わせフォームが作れます!

    この記事を読めば

    • 直感的操作でカンタンにお問い合わせフォームを作成できる
    • お問い合わせフォームをトップページに掲載する方法がわかる
    • スパムメッサージが届かなくなる
    まさる

    有名なお問い合わせフォーム作成プライグインには次の2種類あります。

    • Contact Form by WPForms
    • Contact Form 7
    まさる

    Contact Form 7の方が有名ですが、SWELL開発者の了氏はContact Form by WPForms推しです。

    Contact Form by WPForms

    シンプルなコンタクトフォームが超簡単に設置できるプラグイン。
    私はいつも「Contact Form 7」よりこっちを使ってます。

    推奨プラグインと非推奨・不要・注意すべきプラグインについて
    まさる

    両方使った感想は、圧倒的に「WPForms」の方が使いやすかったです!

    この記事では「Contact Form 7」「Contact Form by WPForms」を使ったことがある著者がおすすめする「Contact Form by WPForms」でお問い合わせフォームを作成する方法を紹介します。

    転妻はりー

    難しそう・・・
    私なんかができる気がしない

    まさる

    大丈夫!
    画像をたくさん使って解説しますよ。

    まさる

    誰でも10分
    慣れた人なら5分で作れますよ!

    この記事を書いているのは

    まさる

    • 転勤族の夫×専業主夫×Webライター×ブロガー
    • 専業主夫として2歳と3歳の息子を育てながら月5万円以上稼ぐ
    • 月10万円達成済み
    • 3つのブログを運営中
    • 全日本SEO協会SEO検定1級保有
    • 3級ファイナンシャル・プランニング技能士(国家資格)保有

    @WebWriterMasaru

    masaru_sengyo_web_writer

    \ 詳しいプロフィールはこちら /

    目次

    「Contact Form by WPForms」をインストール・有効化する

    まさる

    まずは2ステップでインストールして、有効化していきます!

    2ステップでインストール・有効化
    1. プラグイン追加画面で検索する
    2. インストール・有効化する
    STEP

    プラグイン追加画面で検索する

    プラグイン追加画面を開きます。

    検索窓に「WPForms 」と入力して、Contact Form by WPFormsを見つけます。

    STEP

    インストール・有効化する

    「今すぐインストール」ボタンを押す。

    インストールできれば「有効化」に変わるので押す。

    インストールされたら有効化ボタンをクリックして有効化する
    インストールされたら有効化ボタンをクリックして有効化する
    まさる

    これでContact Form by WPFormsのインストール、有効化は完了です。

    「Contact Form by WPForms」でお問い合わせフォームを編集する

    まさる

    次の5ステップで自分好みに編集していきましょう!

    3ステップでお問い合わせフォーム編集
    1. 【共通】WPFormsを「新規追加」する
    2. 【共通】WPFormsテンプレートを選択する
    3. フィールドを追加する
    4. フィールドを自分好みに編集する
    5. お問い合わせ送信先メールアドレスを変更する
    STEP

    【共通】WPFormsを「新規追加」する

    【管理画面】から

    1. 【WPForms】を選択
    2. 【新規追加】をクリック
    WordPress管理画面から「WPForms」を選択し、新規追加をクリックする
    WordPress管理画面から「WPForms」を選択し、新規追加をクリックする
    STEP

    【共通】WPFormsテンプレートを選択する

    「簡単なお問い合わせフォーム」を選択する。

    簡単なお問い合わせフォームを選択
    簡単なお問い合わせフォームを選択
    まさる

    シンプルなお問い合わせフォームが作成されるので、好みに合わせて編集します。

    フィールドの追加・編集で自分好みにカスタマイズできます。

    フィールドを追加・編集すれば自分好みにカスタマイズ可能
    フィールドを追加・編集すれば自分好みにカスタマイズ可能
    まさる

    考えるのが面倒な人は、ステップ3以降をそのままマネして下さい。

    STEP

    フィールドを追加する

    「フィールドを追加」の中から

    1. 「単一行テキスト」をクリック
    2. 単一行テキストが追加される
    「単一行テキスト」をクリックすれば単一行テキストが追加される
    「単一行テキスト」をクリックすれば単一行テキストが追加される
    まさる

    追加した「単一行テキストフィールド」を「フリガナ欄」用として移動させます。

    「名前」の下にドラッグ&ドロップで移動させる。

    名前欄の下にドラッグ&ドロップで移動させる
    名前欄の下にドラッグ&ドロップで移動させる
    まさる

    マウス操作だけで動かせますよ。

    「単一行テキスト」を3つ追加して移動させます。

    • 「名前」欄を1つのブロックに変更するために「単一行テキスト」の追加と移動
    • 「電話番号」欄用に「単一行テキスト」の追加と移動
    • 「題名」欄用に「単一行テキスト」の追加と移動
    まさる

    フィールドの追加は完了です!
    次はフィールドの内容を編集していきます。

    STEP

    フィールドを自分好みに編集する

    • 編集したいフィールドをクリック(今回はお名前に変更予定の1番上のフィールドを選びます)
    • 「ラベル」を「お名前」に変更
    • 名前は絶対に入力して欲しいので「必須」をチェックする
    • 「保存」をクリックして完了
    各フィールドを自分好みに編集する
    各フィールドを自分好みに編集する
    まさる

    同じ要領で、他のフィールドも編集していきます!

    当ブログでは以下の内容に編集しています。

    スクロールできます
    ラベル説明必須設定
    お名前空欄ON
    フリガナ空欄OFF
    メール例:sample@example.comON
    電話番号例:123−4567−8901OFF
    題名例:〇〇についてON
    内容空欄ON
    フィールドの編集例

    参考当ブログのお問い合わせフォーム

    まさる

    考えるのが面倒な人は、上記の表をコピーしてマネしちゃいましょう!

    最後は忘れずに「保存」をクリックしてくださいね!

    まさる

    自分好みのお問い合わせフォームに変更して下さいね。

    STEP

    お問い合わせ送信先メールアドレスを変更する

    「送信先メールアドレス」欄にデフォルトで入力されている{admin_email}とはワードプレスの管理者メールアドレスのことです。

    まさる

    普段使っているメールアドレスの方が便利です。
    違う場合は変更しておきましょう。

    • 「設定」をクリック
    • 「通知」をクリック
    • 「送信先メールアドレス」を任意のメールアドレスに変更
    • 「保存」をクリック
    お問い合わせ送信先のメールアドレスを変更する
    まさる

    これで、お問い合わせフォームの作成は完成です。

    「WPFormsお問い合わせフォーム」をブログに設置する

    まさる

    お問い合わせフォームを作成したらブログに設置します!

    転妻はりー

    カンタンにできる?

    まさる

    3ステップでできますよ!

    3ステップでブログに設置
    1. 固定ページを新規作成して「お問い合わせフォーム」を埋め込む
    2. フッターメニューを作成する
    3. メニュー項目に追加する
    まさる

    お問い合わせページは「フッター」に設置するのがオススメです!

    フッターとは…?

    Webサイトの下部に配置された領域で、サイトの運営者情報や連絡先、プライバシーポリシー、免責事項、その他ユーザーが必要な情報が設置されています。

    まさる

    この記事ではフッターに設置する方法を紹介しますね。

    STEP
    固定ページを新規作成して「お問い合わせフォーム」を埋め込む

    WordPressの管理画面から固定ページ新規追加を選びます。

    新しくできた固定ページのタイトルを「お問い合わせ」にする。

    ブロックを追加するの+ボタンからContact Form by WPFormsを選ぶ。

    設定したお問い合わせフォームをクリックします。

    作成していたお問い合わせフォームが表示されます。

    まさる

    パーマリンクはcontactなどに変更しておきましょう。

    まさる

    下にスクロールして「インデックスさせない(noindex)」に設定しておきます。

    まさる

    最後に画面右上の「公開」ボタンを押せば、お問い合わせページの完成です。

    STEP
    メニュー項目に追加する
    1. 作成したお問い合わせフォームに「✔︎」を入れる
    2. 「メニューに追加」をクリック
    3. メニュー構造に作成したお問い合わせフォームが追加される
    4. 忘れずに「メニューを保存」をクリック
    まさる

    フッターにお問い合わせフォームが表示されるようになりましたよ。

    転妻はりー

    5分くらいでできたわ!

    まさる

    新しくメニューを作成すれば、メニューの位置を好みの場所に設置できますよ!

    スパム対策で「reCAPTCHA(リキャプチャ)」を導入する

    まさる

    スパム対策のため「reCAPTCHA」を導入していきましょう!

    転妻はりー

    スパムってなにかしら?

    まさる

    スパムとは、不特定多数の受信者に無差別に送信されるメッセージのことです。

    スパム対策をしていないと、無数のメッセージが送られてきます。

    まさる

    reCAPTCHAを導入すれば激減するので、一緒にやっていきましょう!

    reCAPTCHA導入方法
    1. reCAPTCHA(リキャプチャ)の設定
    2. Contact Form by WPFormsとreCAPTCHAを連動させる

    reCAPTCHA(リキャプチャ)の設定

    まさる

    reCAPTCHAを次の4ステップで設定していきます。

    1. Googleアカウントにログインする
    2. reCAPTCHAを開く
    3. reCAPTCHAの設定を行う
    4. 表示されたサイトキーとシークレットキーをコピーする

    reCAPTCHA公式はこちらから

    STEP

    Googleアカウントにログインする

    reCAPTCHAを使用するためにはGoogleへのログインが必要です。

    ※すでにログイン済みの人はこのステップを飛ばしてください。

    まさる

    いつも使用しているGoogleアカウントでログインしてくださいね。

    ※Googleアカウントをお持ちでない場合は、この機会に作成してくださいね。

    STEP

    reCAPTCHAを開く

    GoogleアカウントにログインしたらreCAPTCHAのトップページを開きます。

    reCAPTCHAトップページ

    ※初期では英語表記になっているので、翻訳することをオススメします。

    「v3管理コンソール」をクリックして設定に移ります。

    STEP

    reCAPTCHAの設定を行う

    右上の+をクリックして自分のブログを登録します。

    項目内容
    ①ラベルサイトのURLやブログ名を入力
    ②reCAPTCHAタイプv3を選択(デフォルトでは設定)
    ③ドメイン下線部を入力
     例)https://◯◯◯◯◯◯◯.com/
    ④利用規約チェックを入れる
    ⑤送信クリックする
    ブログ登録で必要な入力項目
    STEP

    表示されたサイトキーとシークレットキーをコピーする

    まさる

    登録できれば、連動するためのキーが表示されるので①・②をクリックしてコピーします。

    ※キーは「サイトキー」と「シークレットキー」の2種類あるので注意しましょう。

    まさる

    間違ってページを閉じないようにして下さい。

    これで設定完了です。

    Contact Form by WPFormsとreCAPTCHAを連携させる

    まさる

    reCAPTCHAを設定したら、次の3ステップでお問い合わせフォームと連携させます。

    1. WordPress管理画面からWPFormsを開く
    2. コピーしたキーを入力する
    3. reCAPTCHAをフィールドに追加する
    STEP

    WordPress管理画面からWPFormsを開く

    WordPressの管理画面からContact Form by WPFormsを開いてreCAPTCHAを選びます。

    • WPFortms
    • 設定
    • CAPTCHA
    • reCAPTCHA
    STEP

    コピーしたキーを入力する

    下にスクロールしていくと下記のような画面になるので、入力していきます。

    • reCAPTCHA v3を選択する
    • コピーしたサイトキーをペーストする
    • コピーしたシークレットキーをペーストする
    • 「設定を保存」をクリックする

    設定を保存したあと、しばらくすると「設定は正常に保存されました。」と表示されます。

    まさる

    表示されれば連携完了です。

    STEP

    reCAPTCHAをフィールドに追加する

    Contact Form by WPFormsを開いて、reCAPTCHAをフィールドに追加しましょう。

    「WPForms」→「作成したお問い合わせフォーム」

    下記の手順でreCAPTCHAをクリックします。

    • フィールド
    • フィールドを追加
    • reCAPTCHAをクリック

    reCAPTCHAをクリックすると下記のようなポップアップが表示されるので「OK」をクリックします。

    「OK」をクリックすると画面右上にreCAPTCHAのマークが表示されるので確認して「保存」をクリックする。

    転妻はりー

    正常に設定されているか実際にお問い合わせを開いて確認します。

    右下にreCAPTCHAのマークが表示されていれば、WPFormsとreCAPTCHAが連携されています。

    まさる

    お疲れ様でした!
    これでお問い合わせフォームはあなたのものです!

    転妻はりー

    疲れたわ!
    でもカンタンだったわね。

    Contact Form 7とContact Form by WPFormsを使ったことがありますが、Contact Form by WPFormsの方が断然カンタンです。

    まさる

    この記事を参考にして「Contact Form by WPForms」で作って下さいね!

    お問い合わせフォーム作成でよくある質問

    まさる

    ここからはお問い合わせフォーム作成でよくある疑問にお答えしていきますね!

    WordPressでお問い合わせフォームを作るのは難しいですか?

    いいえ、プラグイン「Contact Form by WPForms」を使用すれば、簡単にフォームを作成できます。

    まさる

    以前はContact Form 7を使っていましたが、WPFormsの方が簡単なのでオススメですよ!

    Contact Form by WPFormsを使用するメリットは何ですか?

    メリットは次のとおりです。

    • 直感的な操作で簡単にフォームを作成できる
    • 豊富なテンプレートから選択できる
    • WordPressの管理画面から簡単に管理できる
    • フォームのデザインやレイアウトを自由にカスタマイズできる
    • フォームのセキュリティを高められる
    まさる

    特に簡単に作れるのがいいですよ!

    この記事を参考にして作ってくださいね。

    WPFormsで作ったお問い合わせフォームをブログに配置するにはどうすればいいですか?

    作成したフォームには専用のショートコードが発行されます。このコードをブログのページや記事に貼り付けるだけで表示できます。

    まさる

    もしくは、この記事で解説しているように、ブロックエディタから呼び出すこともできますよ。

    設定方法を見てみる(解説している箇所に飛びます)

    WPFormsのお問い合わせフォームから送信されたメッセージはどこに届きますか?

    フォーム設定で指定したメールアドレスにメッセージが送られます。

    転妻はりー

    よく使うメールアドレスに変更するのがオススメですよ!

    設定方法を見てみる(解説している箇所に飛びます)

    スパムメッセージを防ぐ方法はありますか?

    「reCAPTCHA」を使えば防げますよ。

    設定方法を見てみる(解説している箇所に飛びます)

    まさる

    カンタンに設定できるのでやっておきましょうね!

    メールアドレスを公開せずに、読者からのメッセージを受け取る方法は?

    次の方法があります。

    • お問い合わせフォームを設置する
    • SNSでメッセージを受け取る

    WPFormsを使えば、メールアドレスを公開せずにお問い合わせフォームを設置できます。

    まさる

    この記事を見て一緒にサクッと作ってしまいましょう!

    WPFormsで複数のお問い合わせフォームを作ることはできますか?

    可能です。

    まさる

    とはいえ、いくつも作る人は少なそうですが……

    まとめ:Contact Form by WPFormsでさっさとお問い合わせフォーム作っちゃおう

    本記事では、Contact Form by WPFormsでお問い合わせフォームを作成する方法を解説してきました。

    Contact Form by WPFormsとreCAPTCHAでお問い合わせフォームを作る方法
    • Contact Form by WPFormsを使用すればカンタンにお問い合わせフォームを設定できる
    • スパム対策にreCAPTCHAが有効
    • 10分あれば設定可能
    • 円滑なブログ運用のためにお問い合わせフォームは必要不可欠

    Contact Form by WPFormsはSWELL開発者の了氏が推奨する、シンプルなお問い合わせフォーム作成プラグインです。

    お問い合せフォームはが設置されていないと、ブログの信頼性は大きく損なわれてしまいます。

    きっちり設置されていれば、クローズドASPからのスカウトや仕事の依頼などがくることも

    まさる

    実際に僕もクローズドASPのスカウトが来ました!

    転妻はりー

    羨ましいわ!
    私も設置してスカウトされる!

    まさる

    この記事を参考にして、あなただけのステキなお問い合わせフォームを作ってくださいね。

    最後まで読んでいただきありがとうございました!

    この記事が気に入ったら
    フォローしてね!

    \シェアしてくれると励みになります/
    • URLをコピーしました!

    コメント

    コメントする

    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

    目次