Contact Form 7 | マブログ https://mablog.org 30代のサラリーマン、OLがネット広告で簡単に月1万円稼ぐ方法 Sat, 01 May 2021 06:45:53 +0000 ja hourly 1 https://wordpress.org/?v=6.3.8 https://mablog.org/wp-content/uploads/2020/07/cropped-favicon_ma-32x32.png Contact Form 7 | マブログ https://mablog.org 32 32 【Contact Form 7】WordPressの問い合わせフォームの設置方法を教えて！【7ステップで解説】 https://mablog.org/wordpress-contact-form-7/ https://mablog.org/wordpress-contact-form-7/#respond Sat, 01 May 2021 03:40:20 +0000 https://mablog.org/?p=1993

WordPressブログを立ち上げたのですが、問い合わせフォームの設置方法を知りたいな。

設置手順を教えて！

こういった疑問に答える記事です。

本記事を読めば以下を知ることができ、問い合わせフォームを設置できます。

  • Contact Form 7を使った問い合わせフォームの設定や設置方法
  • スパム対策（reCAPTCHAの導入）
  • プロフィールに問い合わせ先を入れる
マー
マー

本記事の信憑性は、実際にContact Form 7を使ったWordPressブログを運用しており、ブログで月17万円以上、総額600万円以上の収入実績があります。


WordPressの問い合わせフォームの設置方法

問い合わせフォーム導入理由は、以下があげられます。

  • 純粋に問い合わせ窓口を設けたいから
  • Googleアドセンスの審査に通りやすくするため
  • e-mailアドレスをブログに公開しなくない

今回は、Contact Form 7プラグインを使った問い合わせフォーム設置方法を紹介します。

マー
マー

Contact Form 7は500万件以上インストールされており、メジャーな問い合わせフォームプラグインです。


Step1 Contact Form 7プラグインのインストール

  • １）
    WordPress管理画面を開き、「プラグイン＞新規追加」メニューをクリックする。
    WordPressプラグイン＞新規追加メニュー
  • ２）
    「キーワードの検索」に”Contact Form 7″と入力する。
    WordPressプラグインの検索
  • ３）
    Contact Form 7 が検索結果に表示されるので、「今すぐインストール」をクリックする。
    WordPress_ContactForm7_今すぐインストール
  • ４）
    インストールが終わると「有効化」ボタンが表示されるので、クリックする。
    WordPress_ContactForm7_有効化
  • ５）
    プラグイン画面に自動的に切り替わり、Contact Form 7が表示される。
    WordPress_ContactForm7_有効化しました

これでインストールは完了です。


Step2 Contact Form 7の設定

  • １）
    WordPress管理画面を開き、「お問い合わせ＞新規追加」メニューをクリックする。
    WordPressお問い合わせ＞新規追加メニュー
  • ２）
    「コンタクトフォームを追加」画面が表示されるので、「ここにタイトルを入力」に”お問い合わせ１”と入力する。
    WordPress_コンタクトフォームを追加＞ここにタイトルを入力
  • ３）
    「フォーム」タブは初期値のままにする。
    WordPress_コンタクトフォームを追加＞フォームタブ
  • ４）
    「メール」タブも初期値のままにする。
    WordPress_コンタクトフォームを追加＞メールタブ
  • ５）
    「メッセージ」タブも初期値のままにする。
    WordPress_コンタクトフォームを追加＞メッセージタブ
  • ６）
    「保存」ボタンをクリックする。
    WordPress_コンタクトフォームを追加＞保存ボタン
  • ７）
    画面上部に”コンタクトフォームが作成されました”が表示される。
    WordPress_コンタクトフォームを追加＞コンタクトフォームが作成されました
  • ８）
    「お問い合わせ」メニューをクリックし、「お問い合わせ１」が表示されることを確認する。
    WordPress_お問い合わせメニュー

これでContact Form 7の設定は完了です。


Step3 問い合わせフォーム用固定ページを作成

  • １）
    「お問い合わせ」メニューをクリックし、Step2で作った「お問い合わせ１」のショートコードをコピーし、テキストエディターにペーストしておく。
    WordPress_コンタクトフォーム＞ショートコード
  • ２）
    WordPress管理画面を開き、「固定ページ＞新規追加」メニューをクリックする。
    WordPress_固定ページ＞新規追加メニュー
  • ３）
    「新規固定ページを追加」画面が表示されるので「タイトル」に”問い合わせフォーム用固定ページ”と入力し、「お問い合わせ１」のショートコードを貼り付ける。
    WordPress_固定ページ＞ショートコード貼り付け
  • ４）
    「下書き保存」をクリックし、「プレビュー」をクリックする。
    WordPress_固定ページ＞下書き保存、プレビュークリック
  • ５）
    問い合わせフォームが表示される事を確認する。
    WordPress_固定ページ＞問い合わせフォームプレビュー
  • ６）
    問題なければ「公開」をクリックします。
    WordPress_固定ページ＞公開
  • ７）
    パーマリンクの「編集」をクリックします。
    WordPress_固定ページ＞パーマリンク＞編集
  • ８）
    パーマリンクに”contact”と入力し、「OK」をクリックします。
    WordPress_固定ページ＞パーマリンク＞編集＞OK
  • ９）
    「更新」をクリックします。
    WordPress_固定ページ＞更新
  • １０）
    入力したコンタクトフォームのパーマネントURLにアクセスし、問い合わせフォーム用固定ページが表示されればOKです。

    　https://あなたのサイトのドメイン/contact/

これで「問い合わせフォーム用固定ページ」が完成です。


Step4 スパム対策のためreCAPTCHAを導入

  • ０）
    reCAPTCHAを導入するには、Googleアカウントが必要です。あらかじめ準備しておきます。

  • １）
    Google reCAPTCHA にアクセスする。

    https://www.google.com/recaptcha/admin/create

  • ２）
    「新しいサイトを登録する」画面が表示されるので、下記の値を入力し「送信」ボタンをクリックする。

    項目名設定値
    ラベルサイト名
    reCAPTCHAタイプreCAPTCHA v3
    ドメイン導入するドメイン
    オーナーgoogleアカウントの
    メールアドレスが
    初期値で入っている
    reAPTCHA利用
    条件に同意する    		チェックする
    reCAPTCHA_Create
    reCAPTCHA_Create2
  • ３）
    「サイトキー」と「シークレットキー」が表示されるので、テキストエディターにコピーしておく。
    reCAPTCHA_サイトキーとシークレットキー


Step5 Contact Form 7にサイトキー、シークレットキーを設定

  • １）
    WordPress管理画面を開き、「お問い合わせ＞インテグレーション」メニューをクリックする。
    WordPress＞お問い合わせ＞インテグレーション
  • ２）
    「外部 API とのインテグレーション」画面が表示されるので、reCAPTCHAの「インテグレーションのセットアップ」をクリックする。
    WordPress＞お問い合わせ＞外部 API とのインテグレーション＞reCAPTCHA＞インテグレーションのセットアップ
  • ３）
    Step4で取得した「サイトキー」と「シークレットキー」を貼り付け、「変更を保存」をクリックする。
    WordPress＞お問い合わせ＞外部 API とのインテグレーション＞reCAPTCHA＞サイトキーとシークレットキー入力
  • ４）
    「設定を保存しました。」が表示されれば完了です。
    WordPress＞お問い合わせ＞外部 API とのインテグレーション＞reCAPTCHA＞設定を保存しました


Step6 プロフィールに問い合わせ先を入れる

  • １）
    WordPress管理画面を開き、「ユーザー＞プロフィール」メニューをクリックする。
    WordPress＞ユーザー＞プロフィール
  • ２）
    プロフィール情報に以下を入れる。
    "<a href="https://あなたのサイトのドメイン/contact/">お問い合わせ先</a>"

<!-- 例  -->
"<a href="https://mablog.org/contact/">お問い合わせ先</a>"
    WordPress＞ユーザー＞プロフィール＞お問い合わせ先

  • ３）
    「プロフィールを更新」をクリックする。
    WordPress＞ユーザー＞プロフィール＞プロフィールを更新
  • ４）
    プロフィールに「お問い合わせ先」リンクが表示されている事を確認し、クリックして問い合わせフォームが表示される事を確認する。
    WordPress＞プロフィール


Step7 動作確認

Contact Form 7でメッセージが正常に送信できるかテストします。

  • １）
    お問い合わせのページを表示する。

  • ２）
    名前、メールアドレス、題名、メッセージ本文を入力し、「送信」をクリックする。
    WordPress＞コンタクトフォーム＞入力
  • ３）
    「ありがとうございます。メッセージは送信されました。」と表示されれば正常に動作しています。
    コンタクトフォーム＞ありがとうございます。メッセージは送信されました

「メッセージの送信に失敗しました。後でまたお試しください」と表示される場合

Step4で間違って「reCAPTCHA v2」を選んでいませんか？

「reCAPTCHA v3」に修正してください。


まとめ

問い合わせフォームはContact Form 7を使い、以下の手順で設定します。

  • Step1 Contact Form 7プラグインのインストール
  • Step2 Contact Form 7の設定
  • Step3 問い合わせフォーム用固定ページを作成
  • Step4 スパム対策のためreCAPTCHAを導入
  • Step5 Contact Form 7にサイトキー、シークレットキーを設定
  • Step6 プロフィールに問い合わせ先を入れる
  • Step7 動作確認


以上です。

【まず初めに読んでね！】ブログ初心者がネット広告で月1万円稼ぐ！
マブログのスタートページ です。ブログ初心者がネット広告で月1万円稼ぐ方法を順を追って説明しています。まず初めに読んでね！　
mablog.org
2021.04.13
【簡単】WordPress テーマCocoonをカスタマイズしてマブログのようにしたい！【7ステップ】
WordPress テーマCocoonをカスタマイズしてマブログのクローンを作ってみよう。7ステップで簡単に作れるよ！
mablog.org
2021.04.25

]]> https://mablog.org/wordpress-contact-form-7/feed/ 0