Contact Form 7の基本と使い方まとめ|WordPressに問い合わせフォームを設置しよう

今回は初心者でも簡単に問い合わせフォームを追加できる「Contact Form 7(コンタクトフォーム7)」について紹介していきます。

使用方法のみならず、問い合わせの増加につながるカスタマイズ方法についても紹介しているので、ぜひ参考にしてください。

Contact Form 7とは

Contact Form 7とは、WordPressで作成したホームページに問い合わせフォームを設置するためのプラグイン(拡張機能)です。

Contact Form 7はプログラミングの知識が少ない方でも導入しやすく、世界中で利用されているのが特徴です。

また開発者が日本人であるため、日本語の情報が豊富な点も特徴です。

Contact Form 7の使い方

こちらではホームページに問い合わせフォームを設置すると仮定して、手順を説明していきます。

1インストール

まずは自身のWordPressにContact Form 7をインストールします。

インストール方法は左側のプラグインから【新規追加】を選択し、右上に表示された検索窓に「Contact Form 7」と入力した上で、【今すぐインストール】ボタンをクリックします。

インストールが完了すると【有効化】のボタンが表示されるので、【有効化】をクリックをします。

2フォームの作成

有効化が完了すると、左側に【お問い合わせ】が追加されます。

左側の【お問い合わせ】から【新規追加】を選択し、フォームを作成していきます。

フォームを編集する部分には、あらかじめ「名前」「メールアドレス」「題名」「メッセージ本文」の項目が設けられており、このままのシンプルなお問い合わせフォームであればこのまま左下の【保存】をクリックしても問題ありません。

3. 自動返信メールの設定

次に、【メール】のタブをクリックして自動返信メールを設定します。

自動返信メールとは、フォームを使って問い合わせを行った人に対して自動で送られるメールのことです。

お問い合わせをした方に対して「お問い合わせありがとうございます。」といった内容のメールを送ったり、会員登録をした方に対して「会員登録完了のお知らせ」を送ったりなど、自動返信メールを設定することで返信の手間を削減ができます。

【メール】のタブに移動し、スクロールすると【メール (2)】という項目があります。

そちらのチェックボックスにチェックを入れると自動返信メールを作成できるようになります。

4. 自動返信メールの内容を編集

次に、自動返信メールで送られるメッセージ内容を作成します。

初期設定のままだと、お問い合わせ内容がそのまま転送されるだけなので、問い合わせに対するコメントや返信までにかかる日数などを記載するのもおすすめです。

5. 完了画面(サンクスページ)の作成

Contact form 7はフォーム送信後に自動的に完了画面(サンクスページ)に移行する機能がないため、

そのためサンクスページを用意したい方はWordPressの固定ページなどで別途作成し、フォーム送信後に遷移するように設定する必要があります。

設定方法はお問い合わせフォーム用の編集画面に移動し、【ビジュアル】から【テキスト】に変更したら下記のコードをテキストの上部に書き足すだけです。

<script>

document.addEventListener( ‘wpcf7mailsent’,function( event ){

location = ‘遷移させたいサンクスページのURL’;

}, false );

</script>

6. フォームをページに設置・公開

フォームの作成の完了後に【保存】をクリックし、次に上部にあるお問い合わせフォームのコードをコピーを行い追加したいページにペーストします。

あとはプレビュー画面・公開画面で実際に問い合わせメールを送信し、挙動に問題がないかチェックするだけです。

Contact Form 7をさらに便利にするプラグイン

Contact Form 7をより活用したい方は、別のプラグインや機能と組み合わせ使用するのもおすすめです。

確認画面を作成できる「add confirm」

Contact Form 7 add confirmは、自身で作成したフォームに対して確認画面を追加するためのプラグインになります。

プラグインをインストールを行い有効にすることによって、フォーム作成用の画面に【確認ボタン】と【戻って編集ボタン】が追加されます。

確認画面は、記入ミスを防げますので、導入をおすすめします。

条件分岐ができる「Conditional Fields」

「Conditional Fields」は、Contact Form 7で作成したフォームに条件分岐の機能を追加できるプラグインになります。

フォーム入力者の回答によって設問を変動させられる仕組みのことを条件分岐と言い、「YES」「NO」の選択肢があった場合、「YESと回答した人にだけ追加の質問を表示させる」などの対応が可能となります。

スパムを防止する「Google reCAPTCHA」

お問い合わせフォームからのスパムメールを防ぎたい方は「Google reCAPTCHA」を設定するようにしましょう。

設定方法は、まず「Google reCAPTCHA 」のページでサイトの情報を登録し、表示されたサイトキーとシークレットキーをWordPressのインテグレーションにコピー&ペーストするだけで完了となります。

しかし「Google reCAPTCHA」を設定すると、reCAPTCHAのマークが常に表示された状態となるためデザイン性が落ちる場合があり注意が必要となります。

該当するページ以外でマークを非表示にしたい方は「Invisible reCaptcha for WordPress」などのプラグインをインストールするのもおすすめです。

まとめ

WordPressはカスタマイズ性が高くなっており、知識さえあればさまざまな目的に応じたホームページの制作が可能になります。

問い合わせフォームを設置するだけでも複数のやり方があるので、自身のスキルなどに適した方法を選ぶことが大切になります。