5分でWordPressにフォーム作成[Contact Form 7+reCAPTCHA]

5分でWordPressにフォーム作成[Contact Form 7+reCAPTCHA] WordPress

そろそろブログにお問い合わせフォーム(コンタクトフォーム)を作りたい。

最近はSNSでのやり取りが主流だが、メールフォームもなんだかんだいっても未だに現役。無いよりもあったほうがイイ。

というわけでWordPressにお問い合わせフォームを追加するのだが、ここはやはり「reCAPTCHA」も簡単に追加できる「Contact Form 7」が無難だろう。

※reCAPTCHAとはロボットによる不正送信防止のために、人間による送信を確認するためのGoogle提供のシステム。

【ミッション】
「Contact Form 7」でお問い合わせフォームを作成して、ロボットの自動送信防止のために「reCAPTCHA」を設定する。

今回は所要時間5分で上記のミッションを試みる。

【2018年12月12日更新】
※Contact Form 7がreCAPTCHA v3に対応しましたのでこちらもご覧ください。

Contact Form 7のreCAPTCHAをv3に変更する方法【v2→v3】
Contact Form 7をバージョン 5.1へとアップデートした際に、reCAPTCHA v3へ変更してくださいと表示された場合のv3への変更方法です。 ※↑このようなメッセージが表示されたらreCAPTCHA v3へ変更...
スポンサーリンク

reCAPTCHAのキー取得

reCAPTCHAのアドミンページにログイン

GoogleのreCAPTCHAのアドミンページを開いてGoogleアカウントでログインする。

■reCAPTCHA admin page (Google)
https://www.google.com/recaptcha/admin

reCAPTCHA admin page (Google)

サイトの情報を入力

サイトの情報を入力して「Register」をクリックする。
※今回は「Contact Form 7」でサポートされているreCAPTCHA v2を利用します。

reCAPTCHAを利用するサイトのデータ入力(V2)

■[Label]:わかりやすい名前を入力(今回はドメインを入力)
■[Choose the type of reCAPTCHA]:「reCAPTCHA v2」と「Checkbox」を選択■[Domains]:ドメイン名を入力(複数ある場合は改行して入力)
■[Accept the reCAPTCHA Terms of Service.]:チェックを入れる
■[Send alerts to owners]:チェックを入れる

最後に「Register」をクリック。

キーを取得

生成された「Site key(サイトキー)」と「Secret key(シークレットキー)」をコピペして保存しておく。

reCAPTCHAのキーを保存

スポンサーリンク

プラグイン追加

Contact Form 7のインストールと有効化

WordPressにログインして「プラグイン」→「新規追加」をクリック。

Contact Form 7をインストール

「プラグインの検索」に「Contact Form 7」と入力して検索して「今すぐインストール」をクリック。

Contact Form 7を有効化

「有効化」をクリック。

reCAPTCHAのキーを設定

Contact Form 7を設定する

「プラグイン」→「インストール済みプラグイン」からContact Form 7の「設定」をクリック。

インテグレーションをクリックする

「インテグレーション」をクリック。

キーを設定するボタン

「キーを設定する」をクリック。

reCAPTCHAのキーを入力

先ほど生成した「サイトキー」と「シークレットキー」を入力して「保存」をクリック。

reCAPTCHAのキー設定完了

これでreCAPTCHAの設定完了です。

コンタクトフォームの生成

コンタクトフォームの新規追加

「新規追加」をクリック。

コンタクトフォームのデータ入力

コンタクトフォームのタイトルを入力し、フォームタブのテンプレートの[submit “送信”]の上に[recaptcha]と記入する。※「recaptcha」ボタンをクリックしてタグを挿入してもOKです。

【備考(パラメータ等に関して)】
your-name:閲覧者がフォームに入力した名前
your-email:閲覧者がフォームに入力したメールアドレス
your-subject:閲覧者がフォームに入力した件名
your-message:閲覧者がフォームに入力した本文
「*」印:「*」を付けると必須項目にできます。

他のタブ

「メール」タブ、「メッセージ」タブ、「その他の設定」タブは任意で変更する。※通常はデフォルトで問題ありません。

フォームのデータを保存

「保存」をクリック。

コンタクトフォームのショートコードが生成

コンタクトフォームが作成されるので、「ショートコード」をコピーして保存しておきます。

スポンサーリンク

固定ページ作成

メニューから「固定ページ」→「新規作成」をクリック。

コンタクトフォーム用の固定ページ作成

タイトルを記入し、パーマリンクを「contact」等に設定します。
そして任意で文面を記入して先ほどのコンタクトフォームの「ショートコード」をコピペして「公開」をクリック。

固定ページ完成

固定ページが公開されたので「ページを表示」をクリックして確認しましょう。

コンタクトフォーム固定ページ完成画像

めでたくコンタクトフォーム(お問い合わせフォーム)のページができました!

スポンサーリンク

動作確認

自分でコンタクトフォームに入力して、ちゃんと送信と受信ができるかを動作確認してチェックしましょう。

Contact form 7送信エラー

もし、上のように送信ボタンの横がクルクル回っているだけで送信ができないようなら「Contact Form 7 Controls」というプラグインが必要です。

送信できない原因とその対処

送信できない原因は「Rest API」というシステムがセキュリティ対策で無効になっているためです。

その際は「Rest API」を利用せずにフォームメールを送信するためのプラグイン「Contact Form 7 Controls」を利用します。

Contact Form 7 Controlsのインストール

Contact Form 7 Controlsの有効化

「Contact Form 7 Controls」をインストールして有効化します。

先ほど作ったフォームをクリック

左メニューの「お問い合わせ」をクリックして、先ほど作成したコンタクトフォームをクリックします。

Disable AJAX for this formにチェックを入れて保存

新しくできた「Customize」というタブを開いて、「AJAX Submissions」の部分の「Disable AJAX for this form」にチェックを入れて「保存」をクリック。

これで対策はOKです。

もう一度送信できるかテストしてみてください。

スポンサーリンク

固定ページをメニュー等に追加して終了

送信テストで問題が無ければ、最後にメニューやフッターに固定ページを表示させれば全ての作業完了です。

 


どうでしたか?5分でできましたか?

非常に簡単ですね!

当方はコンタクトフォーム設置に5分。ブログの記事作成に1時間かかりましたw

「Contact Form 7」は更にいろいろとカスタマイズして機能を拡張できるので、こだわりのあるコンタクトフォームをつくりたい方はカスタマイズに挑戦してみてください。

 

以上で解決です!

【2018年12月12日更新】
※Contact Form 7がreCAPTCHA v3に対応しましたのでこちらもご覧ください。

Contact Form 7のreCAPTCHAをv3に変更する方法【v2→v3】
Contact Form 7をバージョン 5.1へとアップデートした際に、reCAPTCHA v3へ変更してくださいと表示された場合のv3への変更方法です。 ※↑このようなメッセージが表示されたらreCAPTCHA v3へ変更...
WordPress
スポンサーリンク
スポンサーリンク
Ketsunosukeをフォローする
己で解決!泣かぬなら己で鳴こうホトトギス