Contact Form 7とは?メリットや使い方を徹底解説
「仕事の依頼があれば取りこぼしたくない」
「ブログの感想をもらって読者と接点をもっと増やしたい。」
こんな悩みを解決するために有効なのが「問い合わせフォーム」をブログ・ホームページに設置することです。
Contact Form7とは
Contact Form7はWordPressで作成したブログ・ホームページに問い合わせフォームを設置するためのプラグインです。
HTMLやCSSの知識がない初心者でも簡単に問い合わせフォームを作れるので、世界中の多くのユーザーに広く使われています。
また、開発者が日本人であるため日本語の情報が豊富にあり、公式サイトにFAQやサポート窓口もあるので分からないところを解決しやすいのも魅力的です。
Contact Form7の便利な機能
Contact Form7には問い合わせフォームだけではなく、自動返信メールやサンクスページなどのカスタマイズも簡単にできる機能があります。自動返信メールやサンクスページがあることによって送信者はメールがきちんと届いたことが確認できるメリットがあります。
送信できていないと不安になり何度も問い合わせフォームから送信されて、大切なメッセージが埋もれてしまう心配もなくなるので相互にメリットがあると言えるでしょう。
問い合わせフォーム(Contact Form7)を設置するメリット
問い合わせフォームを設置するメリットは送信者とサイト運営者の双方にあります。
送信者にとってのメリットは、メールフォームをわざわざ立ち上げる必要がなく手軽にメッセージを送信できる点です。
サイト運営者にとってのメリットは、問い合わせフォームがあることによりメールアドレスを公表する必要がないので迷惑メールを予防できる点です。問い合わせフォームがない場合、読者や顧客との接点の機会を失ってしまう恐れもあるので、必ず設置するべきものと認識しましょう。
Contact Form7の設定手順
Contact Form7の設定する方法を次の3ステップで紹介していきます。
- Contact Form7をインストール
- 問い合わせフォームの作成をする
- 問い合わせフォームを反映させる
ここでは固定ページに問い合わせフォームを反映させる方法で紹介していきます。
ステップ1: Contact Form7をインストール
Contact Form7をインストールしていきましょう。
まずはWordPress管理画面の左メニュー「プラグイン」から「新規追加」を選択しましょう。次に、プラグイン選択窓口から「Contact Form7」と入力して「今すぐインストール」をクリックして最後に「有効化」をクリックしましょう。これでインストールは完了です。
ステップ2: 問い合わせフォームの作成をする
次に、Contact Form7における問い合わせフォーム作成方法を説明していきます。
Contact Form7を有効化すると、WordPress管理画面の左メニューに「お問い合わせ」という項目が追加されています。
「お問い合わせ」から「新規追加」を選択すると「コンタクトフォームを追加」という画面が出てきます。初期設定では「名前」「メールアドレス」「題名」「メッセージ本文」の項目が設定されています。
この初期設定でも十分に問い合わせフォームとして活用できるので、これでよければカスタマイズは不要です。
ステップ3: 問い合わせフォームを反映させる
最後に、問い合わせフォームを固定ページに反映させていきましょう。
作成が終わったら、コンタクトフォーム編集ページの右上にある「保存」をクリックしてください。そして表示されているフォームのコード(例:[contact-form-7 404 "Not Found"])をコピーしましょう。
次にWordPress管理画面の左メニューの「固定ページ」から「新規追加」を選択します。タイトルには「お問い合わせ(※好きなタイトルでOK)」と入力して、本文には先ほどコピーしたコードを貼り付けてください。
最後に「更新」を押して、プレビュー画面で確認してください。しっかりと問い合わせが自分のメールアドレスに届くことを確認しましょう。
Contact Form7のおすすめカスタマイズ7選
Contact Form7では、サイト運営者の目的に合わせて問い合わせフォームをカスタマイズすることが可能です。
読者や顧客との接点を増やせるようなカスタマイズや、簡単なアンケートを作成するカスタマイズまでがあります。ここではおすすめカスタマイズを7つ紹介しているので、ご自身の目的に合いそうな設定があればぜひ試してみてください。
- 自動返信メール
- サンクスページ(完了画面)
- 日付
- チェックボックス
- ラジオボタン
- ドロップダウンメニュー
- ファイル
その1: 自動返信メール
自動返信メールを設定することで、返信する手間を省くことができます。また、送信者側からも送信できた証拠となるので設置した方が親切でしょう。
設定方法は、フォーム作成画面で「メール」タブをクリックします。画面をスクロールして「メール(2)」という項目の下にある「メール(2)を使用」のチェックボックスにチェックを入れると自動返信メールを作成できます。
- 送信先:[your-email]と入力されているか確認しましょう。
- 送信元:ご自身の名前を入力しましょう。
- 題名:自動返信メールだとわかるような題名を入力しましょう。
- メッセージ本文:自動返信メールの本文です。入力された内容が届くので誤字脱字には気をつけましょう。
その2: サンクスページ(完了画面)
サンクスページ(完了画面)とは、問い合わせフォーム入力後に表示される画面のことです。
サンクスページは自動返信メール同様に送信者が正確に送信できたことを確認できる画面でもありますが、遷移させたいページに飛ばすことができる点もメリットです。
設置方法は、お問い合わせフォーム用の編集画面の「テキスト」に下記のコードをテキストの上部に書き出すだけです。
サンクスページ(完了画面)コード
document.addEventListener( ‘wpcf7mailsent’,function( event ){
location = ‘遷移させたいサンクスページのURL’;}, false );
</script>
「遷移させたいサンクスページのURL」は必ず書き換えるようにしてください。
その3: 日付
問い合わせフォームに日付を追加することで、生年月日や面談希望日など、さまざまな場面で役立ちます。範囲の上限・下限も設定できるので、特定の日時を指定したい場合も有効です。
設定箇所は、フォーム作成画面で「フォーム」タブを選び「日付」をクリックして設定すれば完了です。
その4: チェックボックス
チェックボックスは複数の選択肢の中から、当てはまるものを複数回答してもらえることができます。
たとえば、
「問い合わせ内容に対して、どのような返信を希望されますか?」
「連絡の取れやすい時間帯はありますか?」など、さまざまな設問を用意できます。
設定箇所は、フォーム作成画面で「フォーム」タブを選び「チェックボックス」をクリックして設定すれば完了です。
その5: ラジオボタン
ラジオボタンは複数の回答から1つだけを選んでもらうシンプルな回答方式です。
たとえば、
「面談を希望されますか?」
「詳しい資料をご希望されますか?」など、
「はい」か「いいえ」で回答できるような設問を用意するといいでしょう。
設定箇所は、フォーム作成画面で「フォーム」タブを選び「ラジオボタン」をクリックして設定すれば完了です。設定内容は、チェックボックスと同様です。
その6: ドロップダウンメニュー
ドロップダウンメニューを使うと、複数の選択肢からプルダウンの中から1つのみを答えてもらう回答方式です。たとえば都道府県を選ぶときによく使われています。
単一回答という点ではラジオボタンと同じですが、選択肢が多い設問の場合にフォームの場所を取らないメリットがあります。設問の用途によって、ラジオボタンとドロップダウンメニューを使い分けるのがいいでしょう。
設定箇所は、フォーム作成画面で「フォーム」タブを選び「ドロップダウンメニュー」をクリックして設定すれば完了です。
その7: ファイル
ファイルのアップロードを利用すると、免許書や履歴書などのファイルを送付が可能となります。本人確認書類などが必要な場合に、メール送付時に送ってもらえるのであると便利な項目です。
設定箇所は、フォーム作成画面で「フォーム」タブを選び「ファイル」をクリックして設定すれば完了です。
- ファイルサイズの上限(バイト):添付可能なファイルの上限サイズを設定できます。空欄の場合は1MBが上限となります。
- 受け入れ可能なファイル形式:添付可能なファイルの形式を指定できます。
Contact Form7をより便利にするプラグイン5選
Contact Form7だけでも質の高い問い合わせフォームを利用できますが、更に便利な機能を追加できるプラグインがあります。ここでは4つのプラグインとスパム対策を紹介していくので、あなたのサイトに必要だと思えばぜひ導入を検討してみてください。
- 確認画面追加「add confirm」
- 条件分岐「Conditional Fields」
- ステップ分割「Multi-Step Forms」
- 自動入力「CF7 Google Sheets Connector」
- スパム防止「Google reCAPTCHA」
プラグイン1: 確認画面追加「add confirm」
「Contact Form7 add confirm」は作成したフォームに確認画面を追加できるプラグインです。
インストールして有効化すると、フォーム作成画面に新たに「確認ボタン」「戻って編集ボタン」の2つが追加されます。
たとえば、入力項目が多い問い合わせフォームの場合に、送信者としても間違った情報を送信したくないので確認画面があることにより安心できるでしょう。またサイト運営者側も、送信者の情報の信ぴょう性が保たれるので、導入して損はないプラグインの1つです。
プラグイン2: 条件分岐「Conditional Fields」
「Conditional Fields for Contact Form7」は、作成したフォームに条件分岐の機能を追加できるプラグインです。条件分岐とは、送信者の回答によって次の設問を変えられる機能のことです。
たとえば、「面談を希望する」という項目を作り、その質問に「はい」と回答した場合に希望日時を入力する項目が表示されます。「いいえ」の場合は表示されません。
インストールして有効化すると、フォーム作成画面に「Conditional Fields」というタブが追加されるのでそこから設定していきます。
プラグイン3: ステップ分割「Multi-Step Forms」
「Contact Form 7 Multi-Step Forms」は項目の多いフォームをステップ式(次ページに移動する)に分割できる機能を追加できるプラグインです。
長い入力フォームをステップ分割できるので項目の多いフォームを利用するときに見栄えが良くなります。もちろん確認画面も作成できるので送信者にとって安心して利用できるプラグインの1つです。
プラグイン4: 自動入力「CF7 Google Sheets Connector」
「CF7 Google Sheets Connector」は問い合わせフォームからの送信内容をGoogleの「スプレッドシート」に自動的に入力される便利なプラグインです。
「スプレッドシート」に自動的に入力されるので、お問い合わせ内容が一覧で管理できて分類や集計作業が簡単になるメリットがあります。
しかし、Googleアカウントを持っていない、MicrosoftのExcelを使っている場合は活用できないので注意が必要です。
【番外編】スパム防止「Google reCAPTCHA」
「Google reCAPTCHA(リキャプチャ)」はプラグインではありませんが、スパムメールを防ぎたい場合に有効です。
フォームに登録する際に、「私はロボットではありません」というチェックボックスを一度は見たことはありませんか?あれは「Google reCAPTCHA」の設定がある場合に表示されています。
「Google reCAPTCHA」を設定すると、常にreCAPTCHAマークが表示された状態となるためデザイン性を損なう恐れがあるので注意が必要です。
まとめ