【連載その8】WordPressとLightningでホームページを自作する方法!「お問い合わせ編」

この記事のレベル

初心者 (4.0)
重要度 (3.0)
難しさ (2.0)

こんにちは、編集長のカワウソです!

「WordPressでホームページを作りたいけど、実際に何から始めればよいのか分からない……」とお悩みではありませんか?

そこで今回は、WordPressテーマ『Lightning(ライトニング)』で、ホームページを作る手順を全12回に分けて解説。

この記事は、第8回「お問い合わせ編」です。

カワウソ

この記事は次のような人におすすめ!

  • WordPressで会社のホームぺージを自作したい人
  • WordPressのテーマ選びで迷っている人
  • 『Lightning』のテーマでぺージを作りたい人

この記事を読めば、WordPressのテーマ『Lightning』で、ぺージを作る方法が分かります。

実際に作りながら進めれば、『Lightning』はもちろん、WordPressの基本操作も覚えられるでしょう。他のテーマを利用する時にも役に立つため、ぜひ参考にしてください。

それではどうぞ!

先に作る「導入事例」ぺージの完成形をイメージしよう

下記から完成イメージを確認してください。

WordPressのテーマには『Lightning(ライトニング)』を使用しています。WordPressのテーマとは、ホームぺージのデザインプレート(雛形)のことです。

編集作業の前に必要な準備

まず、ページを編集する前の準備について解説します。

WordPressとLightningのインストール

前提として、以下の作業が完了しているかご確認ください。

確認事項
  • レンタルサーバーにWordPressがインストールされている
  • 『Lightning』の「Lightning G3 クイックスタート」をインポートし、初期設定が完了している
  • 前回の記事まで解説したコンテンツを作成できている

前回の記事は、以下からご覧いただけます。

問い合わせフォームを編集

下記の問い合わせフォームを作ります。

完成形イメージ

問い合わせフォームは自作すると時間や費用がかかります。WordPressなら、問い合わせフォームを簡単に設置できる「プラグイン」を利用するのがおすすめです。

『Lightning』デモサイトでは、『Contact Form 7(コンタクト・フォーム・セブン)』というプラグインを利用して問い合わせフォームを設置しています。

※『Contact Form 7』は、『Lightning』の開発元とは異なる作者のプラグインです。

Contact Form 7とは

WordPressで問い合わせフォームを簡単に作成できるプラグイン。複数のフォームを作れる。WordPress公式ディレクトリに登録されていて無料で利用可能。有効インストール数はなんと500万以上。世界中で利用されている。

>> Contact Form 7 公式サイト

今回の連載企画のなかの事前準備編で「Lightning G3 クイックスタート」をインストールすると、『Contact Form 7』も一緒にインストールされて使える状態になっています。

つまり、お問い合わせページにフォームが設置されている状態。あとは編集するだけです。

この記事では以下の順で解説します。

フォームの内容を編集

以下の順番となるようフォームの項目を編集します。

  • メールアドレス
  • 会社名(法人の方のみ)
  • 会社名(フリガナ)
  • 名前(法人の場合は担当者)(必須)
  • 名前(フリガナ)(必須)
  • 電話番号(必須)
  • お問い合わせ内容(必須)
ポイント

なお、これから紹介する編集内容については、万が一うまくいかなかった場合も想定して、あとで正しい内容のソースコードをまるごと提示しています。コピペするだけでフォームが完成するので、ご安心ください。

STEP1
お問い合わせからコンタクトフォームをクリックする

サイドメニューから「お問い合わせ」の「コンタクトフォーム」をクリックします。

STEP2
お問い合わせを編集する

Contact Form 7ですでに作成されたフォームの一覧が表示されます。「お問い合わせ」と「採用情報」があります。
お問い合わせ」の方の「編集」をクリックします。

以下のような画面が表示されます。

Contact Form 7の設定画面について

タブが4つあり、各タブをクリックすると設定画面が切り替わります。

  • 「フォーム」タブ
    • 問い合わせフォームの内容の設定
  • 「メール」タブ
    • 自動返信メール(管理者側)を編集
    • 自動返信メール(ユーザー側)を編集
  • 「メッセージ」タブ
    • 問い合わせフォームで表示する各種メッセージ
  • 「その他設定」タブ
    • カスタマイズするためのコードの入力欄(今回は使いません)
STEP3
不要なテキストを削除する

それではフォームの項目について設定していきます。「フォーム」タブで作業します。

テキストの編集画面の上に並んでいるのは「フォームタグ生成」ボタンです。これを利用してフォームを作ります。

今あるテキストを削除します。最後の1行は残して、それ以外を選択してキーボードの「delete」キーを押して削除してください。

最後の1行について

最後の1行は送信ボタンのコードです。説明が複雑になるため、今回はこのコードをそのまま利用します。
<p class="center">[submit class:btn class:btn-primary class:btn-lg class:btn-block "送信"]</p>

STEP4
フォームを追加する

メールアドレスのフォームを作ってみましょう。

完成形イメージ

編集画面の一番上にカーソルが表示されていることを確認します。
フォームタグ生成ボタンのなかの、「メールアドレス」をクリックします。

以下のような画面が表示されます。

以下のように編集します。

  • 項目タイプ:「必須項目」にチェックを入れる
  • 名前:半角で「your-email」と入力
  • デフォルト値:「xxx@xxxxx.xxx」と入力し、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れる
補足

「プレースホルダー」を使うことで、グレーの文字でフォームの入力例が表示されます。

[ ]で囲まれたコードが1行目に挿入されます。これがメールアドレスの入力欄になります。

[email* your-email placeholder "xxx@xxxxx.xxx"]

STEP5
項目名を追加する

メールアドレスの入力欄の上に、項目名「メールアドレス(必須)」を付けてみましょう。

完成形イメージ

挿入したコードの先頭(「[」の前)にカーソルを置き、キーボードの「Enter」キーを押します。さらに、カーソルを1行目の先頭に置いてください。

以下のコードをコピーして貼り付けてください。

<label>メールアドレス<small class="text-danger">(必須)</small>

コードの(「]」の後ろ)にカーソルを置きます。以下のコードをコピーして貼り付けます。

</label>
STEP6

貼り付けたテキストは、HTML(エイチ・ティー・エム・エル)とCSS(シー・エス・エス)を使っています。
参考までにそれぞれ簡単に解説します。難しく感じる場合は読み飛ばしてOKです。

HTML(エイチ・ティー・エム・エル)とは?

「Hyper Text Markup Language」の略称。ホームぺージ制作によく利用されるマークアップ言語。

CSS(シー・エス・エス)とは?

「Cascading Style Sheets」の略称で、スタイルシート言語と呼ばれる。HTMLで書かれたテキストや画像のスタイル(見た目)を装飾するために用いる。

labelタグ

HTMLタグ。 このタグで囲むと、項目名をクリックした時にフォームにカーソルが移動する。フォームの入力がしやすくなるので、おすすめ。

smallタグ

HTMLタグ。注釈などに用いる。基準の文字サイズより一段階文字を小さくする。

small内のclass=”text-danger”

(必須)の文字色を赤にするための記述。CSSの「クラス」と呼ばれる。(このクラスはLightning側で用意)

なお、HTMLとCSSについては、以下の記事で詳しく解説しています。

STEP7
保存をクリックする

一旦保存します。左下にある保存をクリックします。

STEP8
フォームの表示を確認する

編集したフォームを確認してみます。
画面左上の家のマークから「サイトを表示」を右クリックし、「新しいタブで開く」をクリックします。

ブラウザの別タブでトップページが表示されます。
グローバルナビゲーションの「お問い合わせ」をクリックします。

以下のようになっていることを確認してください。
これでメールアドレスのフォームを設置できました。

メモ

「お問い合わせ」ページはこの後も使用しますので、ブラウザのタブは閉じないでください。

STEP9
フォームの他の項目を追加する

ブラウザのタブを切り替えて、フォームの編集画面に戻ります。

同様にフォームの他の項目を追加していきます。
以下は、どのフォームタグ生成ボタンを使えばいいかをまとめた表です。

フォームの項目 フォームタグ生成ボタン
メールアドレス(必須) メールアドレス
会社名(法人の方のみ) テキスト
会社名(フリガナ) テキスト
名前(法人の場合は担当者)(必須) テキスト
名前(フリガナ)(必須) テキスト
電話番号(必須) 電話番号
お問い合わせ内容(必須) テキストエリア
個人情報の取り扱いについて同意する(必須) 承諾確認
確認した(必須) 承諾確認
送信ボタン 送信ボタン

それでは以下を参考にして、各フォームを追加していきます。

ポイント

下記画像のように、項目名とフォームをひとつのまとまりにして1行の改行を入れておくと、分かりやすくなります。

会社名(法人の方のみ)

  • フォームタグ生成ボタン:テキスト
    • 項目タイプ:チェックなし
    • 名前:半角で「company」と入力
    • デフォルト値:「株式会社〇〇〇〇」と入力し、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れる

フォームタグを挿入後、項目名を追加する

  • 項目名:以下を[ ]のコードの前後に貼り付ける
    • :<label>会社名(法人の方のみ)
    • 後ろ:</label>

会社名(フリガナ)

  • フォームタグ生成ボタン:テキスト
    • 項目タイプ:チェックなし
    • 名前:半角で「kana-company」と入力
    • デフォルト値:「カブシキガイシャ〇〇〇〇」と入力し、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れる

フォームタグを挿入後、項目名を追加する

  • 項目名:以下を[ ]のコードの前後に貼り付ける
    • 前:<label>会社名(フリガナ)
    • 後ろ:</label>

名前(法人の場合は担当者)

  • フォームタグ生成ボタン:テキスト
    • 項目タイプ:「必須項目」にチェックを入れる
    • 名前:半角で「your-name」と入力
    • デフォルト値:「山田 太郎」と入力し、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れる

フォームタグを挿入後、項目名を追加する

  • 項目名:以下を[ ]のコードの前後に貼り付ける
    • 前:<label>会社名(フリガナ)
    • 後ろ:</label>

名前(フリガナ)

  • フォームタグ生成ボタン:テキスト
    • 項目タイプ:「必須項目」にチェックを入れる
    • 名前:半角で「kana-name」と入力
    • デフォルト値:「ヤマダ タロウ」と入力し、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れる

フォームタグを挿入後、項目名を追加する

  • 項目名:以下を[ ]のコードの前後に貼り付ける
    • 前:<label>名前(フリガナ)<small class="text-danger">(必須)</small>
    • 後ろ:</label>

電話番号

  • フォームタグ生成ボタン:電話番号
    • 項目タイプ:「必須項目」にチェックを入れる
    • 名前:半角で「tel」と入力
    • デフォルト値:「000-000-0000」と入力し、「このテキストを項目のプレースホルダーとして使用する」にチェックを入れる

フォームタグを挿入後、項目名を追加する

  • 項目名:以下を[ ]のコードの前後に貼り付ける
    • 前:<label>電話番号<small class="text-danger">(必須)</small>
    • 後ろ:</label>

お問い合わせ内容

  • フォームタグ生成ボタン:テキストエリア
    • 項目タイプ:「必須項目」にチェックを入れる
    • 名前:半角で「your-message」と入力
    • デフォルト値:空欄

フォームタグを挿入後、項目名を追加する

  • 項目名:以下を[ ]のコードの前後に貼り付ける
    • 前:<label>お問い合わせ内容<small class="text-danger">(必須)</small>
    • 後ろ:</label>

STEP10
保存をクリックする

一旦保存します。左下にある保存をクリックします。

STEP11
フォームの表示を確認する

編集したフォームを確認してみます。
ブラウザの別タブ「お問い合わせ」ページに切り替えます。
ブラウザの更新マークをクリックしてページを再読み込みします。

STEP12
確認項目を追加する

ブラウザのタブを切り替えて、フォームの編集画面に戻ります。

以下の確認項目を2つ追加していきます。

※先ほど作成した「お問い合わせ内容」の下に追加します。

完成形イメージ

まず、1つめは以下のように編集します。

▼個人情報の取り扱いについて同意する

  • フォームタグ生成ボタン:承諾確認
    • 名前:半角で「consent」と入力
    • 同意条件:「個人情報の取り扱いについて同意する」と入力
    • オプション:「チェックボックスを任意選択にする」のチェックを外す

フォームタグを挿入後、説明文を追加する

  • 説明文:以下を[ ]のコードの前後に貼り付ける
    • [acceptance consent] の前:<p>お問い合わせの際には「<a href="https://ドメイン名/privacy/" target="_blank">個人情報の取り扱いについて</a>」をお読みいただき、予め同意の上、お問い合わせください。
    • [acceptance consent] の後ろ:<small class="text-danger">(必須)</small>
    •  [/acceptance]の後ろ:</p>

ポイント

  • 挿入されるフォームタグは以下です。
    [acceptance consent] 個人情報の取り扱いについて同意する [/acceptance]
  • 「https://ドメイン名/privacy/」は、「プライバシーポリシー」ページのURLです。貼り付けた後、URL内の「ドメイン名」はご自身のドメイン名に変更してください。

次に2つ目です。以下のように編集します。

▼確認した

  • フォームタグ生成ボタン:承諾確認
    • 名前:半角で「confirmation」と入力
    • 同意条件:「確認した」と入力
    • オプション:「チェックボックスを任意選択にする」のチェックを外す

フォームタグを挿入後、説明文を追加する

  • 説明文:以下を[ ]のコードの前後に貼り付ける

STEP13
保存をクリックする

左下にある保存をクリックします。

STEP14
フォームの表示を確認する

編集したフォームを確認してみます。
ブラウザの別タブ「お問い合わせ」ページに切り替えます。ブラウザの更新マークをクリックしてページを再読み込みします。
以下のようになっていたら完成です!

メモ

「お問い合わせ」ページはこのあとも使用しますので、このタブは閉じないでください。

なお、このような作業がご不安だったり、うまくいかなかった場合は以下のコードを丸ごとコピペしていただいたら、一旦は完了します。

※「個人情報の取り扱いについて」のURLにある「ドメイン名」は、ご自身のドメイン名に変更してください。

<label>メールアドレス<small class="text-danger">(必須)</small>
[email* your-email placeholder "xxx@xxxxx.xxx"]</label>

<label>会社名(法人の方のみ)
[text company placeholder "株式会社〇〇〇〇"]</label>

<label>会社名(フリガナ)
[text kana-company placeholder "カブシキガイシャ〇〇〇〇"]</label>

<label>名前(法人の場合は担当者)<small class="text-danger">(必須)</small>
[text* your-name placeholder "山田 太郎"]</label>

<label>名前(フリガナ)<small class="text-danger">(必須)</small>
[text* kana-name placeholder "ヤマダ タロウ"]</label>

<label>電話番号<small class="text-danger">(必須)</small>
[text* tel placeholder "000-000-0000"]</label>

<label>お問い合わせ内容<small class="text-danger">(必須)</small>
[textarea* your-message]</label>

<p>お問い合わせの際には「<a href="https://ドメイン名/privacy/" target="_blank">個人情報の取り扱いについて</a>」をお読みいただき、予め同意の上、お問い合わせください。
[acceptance consent] 個人情報の取り扱いについて同意する<small class="text-danger">(必須)</small> [/acceptance]</p>

<p>確認画面は表示されません。送信ボタンを押す前に、入力内容に間違いがないかご確認ください。
[acceptance confirmation]確認した<small class="text-danger">(必須)</small>[/acceptance]</p>

<p class="center">[submit class:btn class:btn-primary class:btn-lg class:btn-block "送信"]</p>

自動返信メール(管理者側)を編集

問い合わせがあった時には、指定したメールアドレス宛にメールを送信できます。そのメールの内容を編集します。

完成形イメージ

STEP1
メールタブに切り替える

メール」タブをクリックします。

STEP2
メールの内容を編集する

各項目を以下のように編集します。

  • 送信先:受信したいメールアドレスを入力
  • 送信元:半角で「[_site_title] <xxx@xxxxx.xxx>」と入力。※「xxx@xxxxx.xxx」は送信元にしたい実際のメールアドレスを入力してください
  • 題名:「[_site_title]ホームページよりお問い合わせがありました」と変更する
  • 追加ヘッダー:このままで変更しなくてOK
  • メッセージ本文:以下のテキストをコピーして貼り付ける

送信元について

ホームページと同じドメインのメールアドレスを設定してください。gmail.comなど異なるドメインのメールアドレスを指定すると、通知の際にスパムとして判定されてしまう可能性があります。
また、法人でよく利用されるメールアドレス「info@ドメイン名」などを設定するとよいでしょう。
その場合、メールアドレス「info@~」は、ご利用のサーバー側でメールアカウントを作成して取得しておいてください。

※『エックスサーバー』のメールアカウント作成方法は、マニュアルを参考にしてください。
>>メールアカウントの追加

追加ヘッダーとは?

届いたメールに対し、管理者が返信する時に「送信先」に指定されるメールアドレスです。ユーザー側のメールアドレスを自動的に挿入してくれます。

【[your-name] 様 <[your-email]>】よりホームページにお問い合わせがありました。
ご確認ください。
----------------------------
お問い合わせ内容
----------------------------
【メールアドレス】
 [your-email]
【会社名】
 [company]
【会社名(フリガナ)】
 [kana-company]
【お名前】
 [your-name]
【お名前(フリガナ)】
 [kana-name]
【お電話番号】
 [tel]
【お問い合わせ内容】
 [your-message]
【個人情報の取り扱いについて】
 [consent]
----------------------------
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

補足

入力欄「送信先」の上部に並んでいる[your-email]や[company]は、「メールタグ」と呼ばれます。メッセージ本文欄ではこのメールタグを利用しています。メールタグがあることで、ユーザーが入力した内容が自動で挿入されるようになっています。ご自身でメッセージ本文を編集される場合は、メールタグをコピーして利用すると良いでしょう。

STEP3
保存する

ページ下部にある保存をクリックします。

自動返信メール(ユーザー側)を編集

自動返信メール(ユーザー側)の内容を編集します。自動返信メールは、フォーム送信者の問い合わせ内容の控えにもなります。

完成形イメージ

STEP1
設定画面

メール (2)から下が自動返信メール(ユーザー側)の設定画面です。

補足
  • メール (2)の設定画面は、初期状態では非表示です。「メール(2)を使用」にチェックを入れることで、設定画面が現れる仕組みになっています。
  • 「Lightning G3 クイックスタート」のインストールによって、メール(2)がすでに設定されている状態となっています。
STEP2
メールの内容を編集する

各項目を以下のように編集します。

  • 送信先:[your-email]のままでOK
  • 送信元:半角で「[_site_title] <xxx@xxxxx.xxx>」と入力。※「xxx@xxxxx.xxx」は送信元にしたい実際のメールアドレスを入力してください。
  • 題名:「[_site_title]お問い合わせありがとうございました」と変更
  • 追加ヘッダー:上で入力した「送信元」のメールアドレスでやり取りしたい場合は、ここの内容をすべて消してください。
  • メッセージ本文:以下のテキストをコピーして貼り付ける

送信元について

自動返信メール(管理者側)と同様に、ホームページと同じドメインのメールアドレスを設定してください。

追加ヘッダーについて

企業から届いたメールに対し、お客様が返信する時に「送信先」のメールアドレスを指定できます。「送信元」とは異なるメールアドレスを指定したい場合は「Reply-To: 」の後にメールアドレスを入力します。

[company]
[your-name] 様
このたびはお問い合わせくださいまして、ありがとうございます。
以下の内容でお問い合わせをお受けいたしました。
改めて担当者よりご連絡させていただきますので、今しばらくお待ちください。
----------------------------
お問い合わせ内容
----------------------------
【メールアドレス】
 [your-email]
【会社名】
 [company]
【会社名(フリガナ)】
 [kana-company]
【お名前】
 [your-name] 様
【お名前(フリガナ)】
 [kana-name] 様
【お電話番号】
 [tel]
【お問い合わせ内容】
 [your-message]
【個人情報の取り扱いについて】
 [consent]
--------------------------------------------------------
※このメールはシステムにより自動で返信しています。
本メールに直接返信をいただいても対応できかねますことをご了承ください。
※本メールの到着より3営業日を過ぎても弊社からの連絡がない場合は
お手数ではございますが、確認のために下記までご連絡くださいますよう
お願いいたします。
————————————————————————————————————————————————————————
オフィス家具のレンタルサービス オフィスプロ
株式会社オフィスプロ
メール:info@xxxxx.xxx
TEL : 000-000-0000
https://www.xxxxx.xxx
営業時間:平日 9時~18時
————————————————————————————————————————————————————————
メモ

メッセージ本文の最後は署名です。ご自身の情報に適宜変更してください。

STEP3
保存する

ページ下部にある保存をクリックします。

フォーム送信後に表示するメッセージの編集

Contact Form 7では、フォームの送信後、送信ボタンの下にメッセージが表示されます。

このメッセージを編集してみましょう。

完成形イメージ

STEP1
メッセージタブに切り替える

メッセージ」タブをクリックします。

STEP2
メッセージを編集する

「メッセージが正常に送信された」に入っているメッセージを、「メッセージは正常に送信されました。担当者よりご連絡させていただきますので、今しばらくお待ちください。」と編集します。
※メッセージの内容は適宜変更してください。また、他のメッセージについても必要に応じて編集しても良いでしょう。

STEP3
保存する

ページ下部にある保存をクリックします。

問い合わせフォームの設定は以上です。次に、固定ページ側を編集していきます。

固定ページのテキストを編集

「お問い合わせ」ページのフォーム上部にあるテキストを編集します。このテキストは固定ページ側にあります。

完成形イメージ

STEP1
固定ページを編集

すでに開いている「お問い合わせ」ページのタブに切り替えます。最上部にあるバーから「固定ページを編集」をクリックします。

STEP2
段落を編集

「このフォームはダミーです」から「ご参照ください」までを選択し、キーボードの「delete」キーを押して削除します。

カーソルが表示されます。「ご質問などありましたら、以下お問い合わせフォームよりお気軽にご連絡ください。」と入力します。

STEP3
更新をクリックする

編集画面右上の更新をクリックして、保存します。

STEP4
固定ページを表示をクリック

更新すると、編集画面左下に「固定ページを更新しました」とメッセージが表示されます。
固定ページを表示」をクリックします。

もう一度「お問い合わせ」ページが表示されます。

送信テストを実施

「お問い合わせ」ページでブラウザの更新マークをクリックし、ページを再読み込みします。

フォームを入力して実際に送信してみましょう。

メールアドレスには、ご自身で受信可能なメールアドレスを入力してください。

これまで設定した以下について、思いどおりに設定できているかを確認します。

確認事項
  • フォーム送信後に表示するメッセージ
  • 自動返信メール(管理者側)の内容
  • 自動返信メール(ユーザー側)の内容

補足:問い合わせフォームを固定ページに挿入する方法

『Lightning』のデモサイトでは、すでに固定ページに問い合わせフォームが設置されていますので、以下は今後の参考にしてください。

Contact Form 7のフォームを固定ページに挿入する方法は3つあります。

問い合わせフォームを固定ページに挿入する方法
  1. ショートコードを直接本文欄に貼り付ける
  2. ショートコードブロックを利用する
  3. Contact Form 7のブロックを利用する
ショートコードとは

[ ]で囲んだ短いコードのこと。あらかじめプログラムを組んでおいたものを呼び出せるWordPressの便利な機能。

『Lightning』のデモサイトでは、「お気軽にご連絡ください」の下にある[ ]で囲んだテキストがショートコードです。

ショートコードを直接本文欄に貼り付けて、問い合わせフォームを固定ページに呼び出しているのです。

フォームのショートコードの確認場所、他の方法でフォームを挿入する方法については以下をご参照ください。

フォームのショートコードの確認場所

サイドメニューの「お問い合わせ」をクリックし、表示される一覧画面でショートコードを確認できます。フォームごとに発行されます。ショートコードを選択し、右クリックでコピーできます。

ショートコードブロックを使う場合

検索窓に「ショート」と入力し、「ショートコード」をクリックします。ブロック内の枠にショートコードを貼り付けます。

Contact Form 7のブロックを利用する場合

検索窓に「contact」と入力し、「Contact Form 7」をクリックします。プルダウンから挿入したいフォームタイトルを選択します。

問い合わせフォームのスパム対策

問い合わせフォームを設置すると、スパムメールが届くことがあります。

スパムメールは、無差別に繰り返し送りつけてくる迷惑メールです。

なかには、フォームがスパムメールを配信する踏み台として悪用されてしまうケースも。

この記事では、スパム対策のひとつとして「reCAPCTHA(リキャプチャ)」の導入方法を解説します。必須の対応ではありませんが、あらかじめ対策しておくことをおすすめします。

なお、reCAPTCHAにはバージョンがいくつかあります。この記事では「reCAPCTHA v3」の導入手順を紹介します。

reCAPTCHAとは

Google社が開発・提供しているツール。自動化された悪意のあるプログラム(スパムボット)からホームページを保護してくれる。

完成形イメージ

ページ右側の下部に表示されるのがreCAPTCHAの「バッジ」です。どこかのホームページで見かけたことがあるかもしれませんね。

※ページ内にバッジを埋め込んで表示させたり、バッジを非表示にしているケースもあります。

reCAPTCHAを導入すると、ページ内での操作の特徴から、人間かロボットかを自動的に判定します。人間として判定されると何もしなくてよいため、フォームを送信する際に手間がかかりません。

Contact Form 7はreCAPTCHA v3に対応しているので、簡単に設定できます。

reCAPTCHAを設定するには以下が必要です。順番に解説します。

reCAPTCHAで利用するサイトキーの取得

reCAPTCHAの利用には、Googleアカウントが必要になります。お持ちでない方は、まず先に作成してください。

STEP1
Google reCAPTCHAのサイトにアクセス

Google reCAPTCHA』のサイトにアクセスします。

STEP2
v3 Admin Consoleをクリック

グローバルメニューの「v3 Admin Console」をクリックします。

STEP3
ホームページの情報を入力

登録画面が表示されるので、画面に従ってホームページの情報を入力します。

STEP4
キーを保存

設定に必要なサイトキーとシークレットキーを取得できます。この後で作業しやすいよう、それぞれコピーし、メモ帳などに貼り付けて保存しておきます。

Contact Form 7公式サイトにも手順がありますので、参考にしていただくとよいでしょう。

Contact Form 7公式サイト reCAPTCHA (v3)

Contact Form 7でサイトキーの設定

Contact Form 7にサイトキーとシークレットキーを設定します。

STEP1
お問い合わせからインテグレーションをクリックする

サイドメニューの「お問い合わせ」から「インテグレーション」をクリックします。 

ページ下部にある「reCAPTCHAスパム対策」のインテグレーションのセットアップをクリックします。

STEP2
サイトキーを設定する

取得したサイトキーとシークレットキーをそれぞれ入力して変更を保存をクリックします。

STEP3
バッジの表示を確認する

画面左上の家のマークから「サイトを表示」を右クリックし、「新しいタブで開く」をクリックします。

ブラウザの別タブでホームページが表示されます。
右下にreCAPTCHAのバッジが表示されます。

メモ

Contact Form 7でreCAPTCHAを設定すると、問い合わせページのみではなく、全ページにバッジが表示される仕様となっています。

ただ、ページをスクロールすると、「ページトップへ戻る」ボタンと重なって表示されてしまいます。

バッジの位置を上にずらすことで重ならないように調整してみましょう。

位置の調整はWordPressの管理画面に設定項目がないため、こういう場合はCSSでのカスタマイズが必要になります。

この記事では具体的なコードをご用意していますので、貼り付けるだけでできます。

STEP4
外観からカスタマイズをクリックする

Contact Form 7の「インテグレーション」が表示されているブラウザのタブに切り替えます。
サイドメニューの「外観」から「カスタマイズ」をクリックします。

STEP5
追加CSSをクリックする

「追加CSS」をクリックします。

追加CSSとは?

WordPressの標準機能で、管理画面からCSSを追記できる。位置を調整したい、ここだけデザインや色を変えたいなど、部分的にCSSでカスタマイズしたいときに利用するとよい。

STEP6
コードを貼り付ける

以下のコードを選択してコピーします。

.grecaptcha-badge { bottom: 70px !important; }

「1」の行にカーソルを置き、右クリックから「貼り付け」をクリックします。

右側のプレビュー画面(トップページが表示している)でスクロールしてみると、バッジが上にずれて表示されます。
「70px」はブラウザの画面下からの位置です。数字を変更すればお好みの位置に調整できます。70〜80px程度がよさそうです。

適宜調整後、公開をクリックします。

「×」をクリックして閉じてください。

画面左上の家のマークから「サイトを表示」をクリックします。
トップページが表示されますので確認してみましょう。

まとめ

今回の記事では、『Lightning』を使って「お問い合わせ」ページを作成する方法を解説しました。

まとめ
  • Contact Form 7でフォームの作成ができる
  • お問い合わせがあった旨のメール通知や自動返信メールの設定もできる
  • 固定ページへ問い合わせフォームを挿入できる
  • reCAPTCHAのバッジの表示位置はCSSでずらせる

不明点がある方は、ツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

次回の記事は、【連載その9】WordPress×Lightningでホームページを自作する方法!「無料相談窓口編」です。どうぞお楽しみに。

なお連載企画は1週間ごとに公開予定。下記リストのうちリンクがある記事は公開済みです。

※進行状況によっては公開スケジュールが遅れる場合がございます。あらかじめご了承ください。

以上、最後まで読んでいただき、ありがとうございました。

コスパ&価格重視でレンタルサーバーを探している方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1のレンタルサーバーであり、21万社の導入実績があります。

2024年11月5日(火)17時まで、サーバー利用料金が最大30%オフとなる期間限定キャンペーンを開催中です!

今なら月額693円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2024年5月時点、W3Techs調べ。

法人向けレンタルサーバーをお探しの方へ

XServerビジネスは、エックスサーバーを法人向けに特化したレンタルサーバーです。
サーバー月間稼働率99.99%以上を保証する「SLA」をはじめ、セキュリティやサポートが充実しています。

2024年12月24日(火)17時まで、月額料金が30%キャッシュバックとなる期間限定キャンペーンを開催中です!

今ならお得にホームページを開設できます!
コーポレートサイトでよく使われる「.co.jp」のドメインも永久無料で、大変お得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!