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

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

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

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

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

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

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

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

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

管理画面左メニュー > プラグイン > 新規追加
ContactForm7の使い方1検索欄に「Contact Form 7」と入力し、今すぐインストール&有効化する。

「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、nofollowにしておきましょう。

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

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

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

後は任意の場所に固定ページ(お問い合わせページ)のリンクを埋め込みます。
ContactForm7の使い方15サイドバーなどWordpressのウィジェット内に設置するなら、カスタムHTMLにa hrefタグを使って簡単に埋め込むことが可能です。

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

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

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

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

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

ContactForm7の使い方19最後に問い合わせフォームからテスト文章を送って、うまく動作するか確認しておきましょう。

Contact Form 7は導入後、サイト全体に不要なJavaScriptやCSSスタイルシートが読み込まれてしまいサイト速度に少し悪影響になります。
ぜひコチラもご参考下さい。
【関連記事】Contact Form 7でサイトが重くなる?ページ全体で読み込まれるJSとCSSを固定ページのみで読み込ませる方法。

まとめ

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

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

-Wordpress
-

© 2021 ソロ学