WordPressに問い合わせフォームを簡単に実装できるプラグイン「Contact Form 7」の使い方。


WordPress

ContactForm7の使い方_eyecatch

当サイトにも問い合わせフォームが必要だと感じたので実装しました。

サイト運営者といつでも連絡が取れる環境であるということはサイトの信頼度を高めます。グーグルアドセンスを使用するにもコンタクトフォームは必要です。

その他にもクローズドASPから特別案件の連絡があったり、とにかく大切です。

WordPressを使ったサイトでは「Contact Form 7」というプラグインをインストールすることで、固定ページを使用して簡単に問い合わせページを作成することができます。

「Contact Form 7」では送信先に自分のメールアドレスを設定することができますが、Cpanelを利用している方ならデフォルト設定でCpanel内の電子メールアカウントにメールが届きます。

ContactForm7でお問い合わせページを実装する方法

メールサーバーの設定など難しい設定は一切不要!
画像を見ながら順番に真似していただければ10分もかからず、自サイトにお問い合わせページを実装することが可能です!

プラグインのインストール

執筆時、プラグインはWordpressのダッシュボードからインストールできました。

管理画面左メニュー > プラグイン > 新規追加

に進みます。

ContactForm7の使い方1

続いてプラグイン検索に「Contact Form 7」と入力し、今すぐインストール&有効化すればOKです!

外部リンク

「Contact Form 7」の設定画面は管理画面左メニューの「お問い合わせ」または、
インストール済みプラグインの中にある「Contact Form 7」の設定どちらでもOK!

スポンサーリンク

お問い合わせページの編集

インストールが終わったら早速設定していきましょう。
とはいっても基本的にデフォルトのままでOKです。

ContactForm7の使い方4

管理画面左メニュー>お問い合わせ>コンタクトフォーム

プラグインの設定画面を開きましょう。
「コンタクトフォーム1」か「編集」をクリックすればお問い合わせページの編集が可能です。

ContactForm7の使い方5

デフォルト設定

フォームタブの画面に入力した内容が実際の問い合わせページで表示されます。
デフォルト設定の注意点として、氏名、メールアドレス、題名の3項目の入力が必須になっています。
各ショートコードの中のtext*やemail*のアスタリスク「*」が付いている項目が入力必須となります。

入力必須項目があると問い合わせのコンバージョンが下がる(問い合わせにくい)ので適宜変更しましょう。

ContactForm7の使い方6

実際の画面

各項目の日本語も少し乱雑な言いまわしになっているので変更しておくと吉です。

ContactForm7の使い方7

カスタム後の画面

コンタクトフォーム1というページ名からお問い合わせに変更したうえ、ページ上部に一言追加し、各項目の日本語も少し変更しました。
また名前と題名のアスタリスクを外し、メールアドレスのみ入力必須に変更しております。

ContactForm7の使い方8

カスタム後の問い合わせ画面

このプラグインではお問い合わせページの内容はすぐに変更できるので、いろいろ試してみてください!

ContactForm7の使い方9

メールタブもデフォルトでOK!
送信先に自分の受け取り用のメールアドレスを指定することも可能です。
デフォルト設定の場合はCpanel内の電子メールアカウントでメールの確認が可能です。

固定ページでお問い合わせを作成する

先ほどお問い合わせページの編集を行い保存しましたが、ページのリンクがどこにもないため設定しただけでは、コンタクトフォームは使用できません。

「Contact Form 7」では固定ページに専用のショートコードを記述することで、固定ページを問い合わせページとして動作させることができます。

それでは早速固定ページにショートコードを記述し、コンタクトフォーム専用ページを作りましょう!

ContactForm7の使い方10

このコードで固定ページにテンプレが呼び出される

設定画面上部にあるショートコードをコピーします。
コピーしたらお問い合わせフォーム用の固定ページを作成します。

ContactForm7の使い方11

管理画面左メニューの固定ページ > 新規追加

に進み、固定ページを作ります。
その際、ページ名を「お問い合わせ」や「コンタクトフォーム」など任意の分かりやすいタイトルにします。

そして先ほどコピーしたショートコードをそのまま貼り付けましょう。

お問い合わせページはnoindexに設定する

お問い合わせやプロフィール、プライバシーポリシーなどの固定ページは検索エンジンにインデックスされないようにnoindex,nofollowに設定しておきましょう。

ほとんどのWordpressテーマでこの設定は投稿ページで行うことが出来るはずです。

ContactForm7の使い方12

投稿ページにある設定(テーマ:AFFINGER5)

ContactForm7の使い方13

投稿ページ下にある設定(テーマ:Cocoon)

上の画像は有料テーマAFFINGER5の投稿画面にあるindex設定。
下の画像は無料テーマCocoonの投稿画面の下部にあるindex設定です。

ContactForm7の使い方14

また固定ページなので、パーマリンクURLを一意のものに決めておくとよいです。

スポンサーリンク

固定ページのリンクを設置する

これでお問い合わせページを使用する準備ができました。

あとは任意の場所に固定ページ(お問い合わせページ)のリンクを埋め込みます。

ContactForm7の使い方15

a href等で作成したお問い合わせページへのリンクを設置する

サイドバーなどWordpressのウィジェット内に設置するなら、カスタムHTMLにa hrefタグを使って簡単に埋め込むことが可能です。
テーマによってはお問い合わせページ専用のウィジェットがあるものもあるので、確認してみて下さい!

ContactForm7の使い方16

a hrefタグだけでは質素な見た目になる...

ただのリンクだと見た目があまりよろしくありませんので、CSSを調整して枠で囲ったりしてある程度分かりやすくする必要はありそうです…

使用しているテーマによって問い合わせ用用のウィジェットが用意されているかもしれません。一度確認してみてください。

有料テーマAFFINGER5では「STINGER問合せボタン」というウィジェットが用意されておりましたので、こちらにお問い合わせ用に作った固定ページのURLを指定するといい感じになりました!

ContactForm7の使い方17

ウィジェットにショートコードを使うことも可能

また先ほどコピーした専用ショートコードをそのままウィジェットに使用することも可能です。

ContactForm7の使い方18

サイドバーにお問い合わせのショートコードを埋め込んだ例

見た目は画像の通りです。
良いのですが、サイトによっては少し邪魔になるかもしれませんね。

ContactForm7の使い方19

メールが受信できるかの確認も行う

最後に問い合わせフォームからテスト文章を送って、うまく動作するか確認しておきましょう。
Contact Form 7は導入後、サイト全体に不要なJavaScriptやCSSスタイルシートが読み込まれてしまいサイト速度に少し悪影響になります。
ぜひ下記の関連記事もご確認下さい。

初期設定だと届いたメールはCpanelから確認可能です。

お問い合わせメールの転送設定方法はこちら。

まとめ

Contact Form 7プラグインを使用してお問い合わせページをサイト内に実装する方法を簡単にまとめました。

インストールして有効化後、固定ページにショートコードを記載し、その固定ページへのリンクをサイト内に埋め込むだけで超簡単にお問い合わせページが作れてしまうので良いです!

-WordPress
-

ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。

© 2022 ソロ学