【画像で解説】Contact Form 7の使い方は？確認画面やカスタマイズ方法まで紹介
WordPressでお問い合わせフォームを設定する場合、簡単にフォームを作成できる無料プラグイン「Contact Form 7」の活用を検討している人も多いのではないでしょうか。
本記事では、Contact Form 7の基本の使い方から設定・カスタマイズ方法までを画像付きで解説します。
Contact Form 7とは？
「Contact Form 7」とは、お問い合わせフォームを作成できるWordPressの無料プラグイン。プログラミングに関する専門知識が不要で、簡単に設置可能なのが特徴です。サイト内への設置も、発行されるショートコードを貼り付けるだけと容易です。
日本人が開発しており、管理画面や操作画面に日本語表記が多いのもポイントです。公式のサポートコンテンツが豊富で、公式サポートフォーラムにて使用上の質問ができます。
Contact Form 7の使い方6ステップ
簡単に使用できるContact Form 7は、基本的な操作をマスターしておけばさまざまなカスタマイズも可能です。まずは、Contact Form 7の使い方の基本の6ステップを解説します。
STEP1．インストールを行う
Contact Form 7を使う場合は、まずインストールを行います。
WordPressの管理画面のログインし、左のメニューバー内にある「プラグイン」>「新規追加」の順番で進みます。
ページ右側にある検索欄に「Contact Form 7」と記入し、表示されたContact Form 7を「今すぐインストール」します。その後、プラグインを有効化すれば設定はインストールは完了です。
STEP2．お問い合わせフォームの作成を行う
インストールが完了したら、次にお問い合わせフォームの作成を行います。
ホーム画面に戻り、右側のメニューバーから「プラグイン」>「インストール済みプラグイン」の順番で移動し、Contact Form 7でお問い合わせフォームを作成します。
コンタクトフォームの右側に表示されている「新規追加」をクリックすると、お問い合わせフォームを新規で作ることができます。
作成したフォームは「編集」画面から、フォームの詳細を設定可能です。
どのような項目を設定するのか、編集画面で詳細を設定していきましょう。
STEP3．自動返信メールの設定を行う
フォームの設定が完了したら、次に、ユーザーがお問い合わせを送信した後に問い合わせフォームが問題なく送信されたことを共有するための、自動返信メールの設定を行います。
設定をしたいお問い合わせフォームを開き、タブを「メール」に変更。この画面で自動返信メールの編集を行います。デフォルトですでに記入されていますが、送信先を[your-email]に変更してください。
続いて、題名はお問い合わせフォームに合わせて「お問い合わせありがとうございます」などの文言を入れるのがおすすめ。メッセージ本文は、送信際に表示されることを考慮した文章を作成しましょう。
STEP4．完了画面の作成を行う
次に、完了画面の作成を行います。完了画面は通称「サンクスページ」とも呼ばれており、送信完了後に遷移するページのことです。
完了画面はプラグイン内で作成するのではなく、WordPressの固定ページとして作成します。
固定ページを新規作成する部分から、完了画面を作成していきましょう。テキストには、自動返信メールを送っていることや返信までにかかる日数などを記載。簡潔なもので問題ありません。
固定ページを作成したらコンタクトフォームに戻り、「その他の設定」の入力画面に以下のコードを入力します。
add_action( ‘wp_footer’, ‘mycustom_wp_footer’ );
function mycustom_wp_footer() {
?>
<script type=”text/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location.replace(“<?php echo home_url(‘/’);?>thanks/”);
}, false );
</script>
<?php
}
「location.replace」の括弧内の「<?php echo home_url(‘/’);?>」の部分に遷移先のURLを貼り付け、保存すれば完了画面の設定は完了です。
STEP5．お問い合わせフォームを設置する
ここまでの設定が完了したら、いよいよお問い合わせフォームをサイト上に設置します。
作成したコンタクトフォームの上に表示されているショートコードをコピーします。
次に「固定ページ」>「新規追加」の順番で、お問い合わせフォームを表示させるお問い合わせページを作成。「テキスト」タブに切り替え、先ほどコピーしたショートコードを貼り付けて保存します。これで、お問い合わせページから直接フォームへの入力が可能になります。
STEP6．動作確認を行う
設定を行った後は、動作確認を行います。すべての設定が終わったら、問題なく表示されているのかを確認した後、実際にフォームに入力し、送信までを完了させます。
自動返信メールが届いているか、完了ページ画面は表示されているかなど、細かくチェックしましょう。実際に動作を確認する前、チェックリストを作成しておくと漏れがなくなります。
Contact Form 7でカスタマイズできる項目
Contact Form 7では、項目のカスタマイズも可能です。
- 必須項目の設定
- ラジオボタン
- テキストエリア
- ドロップダウンメニュー
それぞれフォームの内容にあわせて、細かな設定ができます。例えば、テキストエリアに長文を入力できるようにしたり、項目を必須入力にしたりなどの機能が使用可能です。
Contact Form 7が送信できないときの対処法
Contact Form 7で、問い合わせフォームを送信できない不具合が発生する場合、原因は主に2つ考えられます。1つはプラグインの更新がされていないこと、もう1つはメール設定のエラーです。
Contact Form 7のバージョンが古いと送信できないトラブルが発生する場合があります。まずは、WordPressの左にあるメニューから「プラグイン」を選択し、Contact Form 7をチェックしましょう。
上記のように新バージョンが利用できるようになっているお知らせがある場合、古いバージョンを使っているということ。アップデートを実行し、その後、不具合が解消されているかをチェックしてみてください。
また、メール設定のエラーは、コンタクトフォーム編集画面から修正を行います。ブログドメインとメールドメインが異なる場合、送信できない状態に陥りやすいため、送信元のアドレスを確認し、修正を行いましょう。
Contact Form 7に関するよくある質問
編集のしやすさや充実した機能性が魅力のContact Form 7。よりユーザビリティの高いお問い合わせフォームを作るには、設定時に気になる機能の有無も知っておきましょう。
最後に、Contact Form 7に関するよくある質問をご紹介します。
添付ファイルは送付できる？
Contact Form 7に関するよくある1つ目の質問は、添付ファイルの送付に関してです。ファイルのアップロード項目の追加、およびメールへの添付ファイル設定を行えば、送付は可能です。
ただし、設定にはHTMLによる操作が必要です。添付ファイルの設定に関する詳細はContact Form 7公式の「ファイルのアップロードとメール添付」にて解説されています。
条件分岐はできる？
Contact Form 7に関するよくある2つ目の質問は、条件分岐に関してです。機能を追加するには、新たに「Conditional Fields for Contact Form 7」というプラグインを追加する必要があります。Contact Form 7のみでは設定できないため注意が必要です。
インストール後、コンタクトフォームの編集画面に「Conditional Fields」タブと「Conditional Fields Group」フィールドが追加されます。そこから設定・カスタマイズを行えば条件分岐は可能です。
送信元・送信先はどうなる？
Contact Form 7に関するよくある3つ目の質問は、送信元・送信先に関してです。デフォルトでは送信元は「サイト名と管理者メールアドレス」が表示されています。送信元を変更したい場合は、アドレスを書き換えれば問題ありません。
一方、送信先にも「_site_admin_email」、つまり管理者のメールアドレスがデフォルトで設定されています。ユーザーに宛先を変更したい場合は「_user_email」に書き換えが必要です。
スパム対策はどうしたらいいの？
Contact Form 7に関するよくある4つ目は、スパム対策に関してです。Contact Form 7でスパム対策を行うには、主に3つの方法があります。
- Contact Form 7の質問項目として承諾のチェックボックスを付ける
- スパムロボットを防ぐプラグイン「reCAPTCHA」を使う
- スパム防止プラグイン「Akismet」を使う
3つのなかでもよく使用されているのは、Googleが提供している「reCAPTCHA」。「私はロボットではありません」というチェックボックスにより、AIが人間と機械を判別します。比較的簡単に設定できるので、多くのお問い合わせフォームで採用されています。
文字化けしているときの対処法は？
Contact Form 7に関するよくある5つ目は、文字化けしているときの対処法です。メールの件名や送信元が文字化けしてしまうトラブルの解決は非常に簡単。
【変更前】サイト名 <wordpress@test.com>
【変更後】“サイト名” <wordpress@test.com>
例えば、送信元が文字化けしている場合、コンタクトフォームの編集画面へ移動。「送信元」に入力されている日本語のテキストをダブルクオーテーションで囲えば、文字化けは解消されます。トラブルの対処が比較的用意なのも、Contact Form 7の魅力です。
送信ボタンのカスタマイズはできる？
Contact Form 7に関するよくある6つ目は、送信ボタンのカスタマイズに関してです。ユーザビリティ向上のため、ボタンのカスタマイズはこだわっておきたいところ。
Contact Form 7で送信ボタンのデザインを変更はプラグイン内では難しく、HTMLやCSSといったプログラミング言語にて設定する必要があります。
デザイン性の高い問い合わせフォームを作りたいならTayori
Contact Form 7は無料で問い合わせフォームの設定が可能なため、WordPress利用者にとって役に立つプラグインです。本記事を参考に、ぜひフォームの設定を進めてみてください。
一方、デザインをカスタマイズする際、HTMLやCSSの知識が必要です。社内に知見を有している方がいれば自由にデザインを変更できますが、担当できる方がいない場合は、ほかのお問い合わせフォーム作成ツールも検討してみてください。
株式会社PR TIMESが運営する「Tayori（タヨリ）」を使えば、プログラミング言語を使わなくてもデザインの変更が可能です。
コーポレートカラーや、サイトのイメージにあわせた問い合わせフォームを作成したい方は、無料からでも利用できるTayoriの問い合わせフォームを検討してみてはいかがでしょうか。
