写真AC

AFFINGER ブログ運営

【ブログ初心者必読】AFFINGER 4でお問い合わせフォームを作るなら「Contact Form 7」がチョー簡単!

投稿日:

ブログ初心者の皆さん。ブログにお問い合わせフォーム設置してますか?
お問い合わせフォームは、情報発信をするブログには絶対なくてはならないページ。ただ、初心者にとってはどう設定していいのかよくわからない、けっこうハードルの高い難関のひとつですよね。
でも安心してください。いいプラグインがありますよ。「Contact Form 7」です。

ども。とんじるです。ぶっひん。

このブログはWordPressテーマ「AFFINGER 4」で作成しています。
今回は、ブログ運営に必須のお問い合わせフォームを簡単に作れる優れものプラグイン「Contact Form 7」の紹介と、その設定方法のお話ですよ。

「Contact Form 7」とは?

お問い合わせフォーム。いざ作ろうとすると結構構えますよね。
入力フォームを作ったり、メール転送の設定をしたり、入力してもらった方へサンクス表示をしたり、エラーメッセージを設定したり…

ああ、無理。ぜったい無理。

「Contact Form 7」は、そんな迷える子羊のために、簡単設定でフォームが作れる便利なプラグインです。

これさえあれば、お問い合わせフォームやアンケート、応募フォームなんかも簡単にできちゃうんですよ。

「Contact Form 7」をインストールする

まずはプラグイン「Contact Form 7」をインストールしましょう。

設定画面の「プラグイン」タグから「新規追加」を選んで、右上の検索窓に「Contact Form 7」と入力します。

富士山のイラストのやつがそれです。
プラグインの詳細は「詳細情報」をクリックすれば見れますので、
読んだら「今すぐインストール」

インストールできるとインストールボタンが変わります。

「有効化」
これをポチリ。これでインストールと有効化が完了しました。

お問い合わせフォームを設定する

続いてインストールしたContact Form 7を使ってお問い合わせフォームを設定します。

といってもとってもカンタン。ほとんどデフォルトで使えます。

設定は「お問い合わせ」タブから

Contact Form 7をインストールすると、管理画面に「お問い合わせ」というタブができます。

そこに「コンタクトフォーム」というタブがありますから、そこをクリックするとデフォルトの問い合わせフォームがでてきます。

もうね。「これでいいや」ってかんじ。

デフォルトでほとんど設定されてしまってます。

「フォーム」タブではフォームの体裁を設定します。
すでにデフォルトで「お名前」「メールアドレス」「題名」「メッセージ本文」「送信」の設定がされています。

「メール」タブではお問い合わせのメールをどこに飛ばすかの設定をします。ここもデフォルトである程度入力されていますので、適宜修正してください。

「メッセージ」タブではお問い合わせいただいた方の入力に応じたメッセージを設定します。
ここもデフォルトでメッセージが設定済みなので、お好みに応じて修正ください。

うーん。至れり尽くせり。

インストールからここまでの設定、5分くらいでできちゃいました!

チョー簡単!

スパム対策に「reCAPTCHA」を設定しよう!

これでひととおり設定できたのですが、公開(後悔ともいう)する前にやっておきたいことがあります。

スパム対策です。

スパム対策には「reCAPTCHA(リキャプチャ)」を適用します。「reCAPTCHA」は、機械的にサイトにアクセスしてくるbotを識別して遮断するための、Google様が考えた仕組みです。以前は画像で表示された英数字を入力するという結構面倒な作業を強いていたのですが、最近はもっと簡略化されました。

「私はロボットではありません」

というメッセージにチェックを入れるやつ。目にしたこともあるんじゃないでしょうか。
あれをお問い合わせフォームに設置できるんです。

こんなやつ↓

設置にはGoogleから発行されるキーが必要です。キーの発行にはGoogleアカウントが必要です。Googleアカウントを持っていない方はこの際作っておきましょう。

reCAPTCHAの登録

まずはGoogleのreCAPTCHAサイトにアクセス(「リチャッチャ」って…)、右上の「reCAPTCHAを取得する」をクリックします。

にゃんこがこっち見てますね…

すると下のような画面が出てきますので
「Label」欄にサイト名とかの任意の文字列(日本語でOK)を入力します。

選択肢が3つありますが、今回は「私はロボットではありません」を選ぶやつにしたいので、一番上のやつを選択。

「Label」を入力すると「Domains」という項目が出てきますので、適用したいドメイン名を入力します。
枠デカイですが1行でもだいじょぶですw

ふたつのチェックボックスをチェックして「Register」をポチリ。

これで登録完了。
すると設定に必要なキーが発行されます。

reCAPTCHAを設定する

ブログのダッシュボードに戻って「お問い合わせ」から「インテグレーション」に入ります。

すると下のような画面が出てきますので、先ほど発行された「サイトキー」「シークレットキー」のふたつをコピペします。

コピペできたら「保存」と。

これで設定完了。

お問い合わせフォームにreCAPTCHAボタンを設置する

ここまできたらあと一息。

「お問い合わせ」の「コンタクトフォーム」を開き、ボタンを設置したいところにカーソルを合わせます。

そして欄上の「reCAPTCHA」タブをクリック。

すると[reCAPTCHA]っていうコードが追加されます。

これで「保存」。

以上で適用完了です!!

できたお問い合わせフォームはこんな感じ↓

すげー。なんか本格的ー。

こんな設定も、コード1行も書かずに済むなんて、
なんてすばらしいんでしょう!

ブログ初心者のとんじるでもできるんで、皆さんもぜひお試しくださいませ。

というわけで、ほんじゃまた。ぶっひん。

この記事が気に入ったら
いいね ! しよう

-AFFINGER, ブログ運営

Copyright© merumae〈めるまえ通信〉 , 2019 All Rights Reserved Powered by AFFINGER5.