WordPressでできる!企業向けLPの作成と活用【お問い合わせフォーム編】

これまでWordPressを使った企業向けランディングページ(LP)の導入や活用方法を紹介してきました。
今回はLPのコンバージョンとして絶対に欠かせない、お問合せフォームの作成手順について詳しく紹介します。

プラグインを活用したメールフォームの作成

Contact Form 7を中心に、いくつかのプラグインを利用してメールフォームを作成します。
これらすべてのプラグインの利用が必須ではありませんが、お勧めの構成のひとつとして紹介します。今回紹介するプラグインの他にも便利なプラグインがあるはずです。必要に応じて追加を検討してください。

Contact Form 7

Contact Form 7は、WordPressサイトにお問い合わせフォームを作成できる人気のプラグインです。HTMLの知識がなくても簡単な操作でフォームを作成でき、メール通知の設定やスパム対策も簡単に行えます。HTMLソースにクラスやIDを指定できるため、WordPressで設定したCSSを適用することができます。

導入のメリット

  • これだけでメールフォームが実現できる: 多機能ながら無料でメールフォームが利用可能。
  • カスタマイズ性が高い: 簡単にカスタマイズでき、複雑なフォームも作成可能。
  • スパム対策: reCAPTCHAやAkismetと連携することでスパムメールの防止が可能。
  • 他プラグインとの連携: Flamingoをはじめ、データ管理やカスタム通知機能を拡張するプラグインと連携可能。

導入手順

  1. WordPressの管理画面からプラグイン > 新規追加をクリックします。プラグイン名「Contact Form 7」を検索し、インストール後に有効化します。
  2. 「お問い合わせ」メニューから「新規追加」を選び、必要なフィールドを追加します。
    「フォーム」タパネルブでは一般的なメールフォームの設定のほかに、HTMLソースを挿入することができます。そのため利用規約や個人情報の取扱いに関するウェブページのリンクなどを追加できます。
  3. 「メール」タブパネルでは作成したメールフォームへのお問い合わせがあった場合に送信される、自動返信メールを設定することができます。
    「メール」ではお問い合わせフォームを送信した送信者向けに、「メール (2)」ではウェブサイトの管理者向けに送信する自動返信メールのテンプレートを設定します。ヘッダー項目、メッセージ本文へのフォーム回答内容の設定方法についてはContact Form 7公式のメールのセットアップを参照してください。
  4. 作成したフォームをページや投稿にショートコードを使って挿入します。ページのプレビューを実行するとフォームの表示を確認することができます。

スパム対策の強化

Contact Form 7はGoogleのreCAPTCHAと連携してスパム対策を強化できます。
フォームからスパムメールが送信されるようになると本来のお問い合わせメールの受信に気づかなかったり、スパムメールばかり送信するサーバーとしてブラックリストに追加され、メールが届かなくなったりするリスクがあります。このようなトラブルを避けるためにもreCAPTCHAの導入をお勧めします。

reCAPTCHAの導入手順

  1. Google reCAPTCHAのサイトにアクセスし、APIキーを取得します。Googleアカウントでログインし、新しいサイトを登録してください。
  2. 「reCAPTCHA v3」または「reCAPTCHA v2」を選択し、ドメイン情報を入力してサイトキーとシークレットキーを取得します。
  3. WordPressの管理画面でお問い合わせ > インテグレーションに移動し、「reCAPTCHA」を選択します。
  4. 先ほど取得した「サイトキー」と「シークレットキー」を入力して設定を保存します。
  5. フォームにreCAPTCHAのチェックボックスが自動的に表示され、スパム防止機能が有効になります。

WP Mail SMTP

WP Mail SMTPは、WordPressサイトから送信されるメールの配信信頼性を向上させるプラグインです。デフォルトのメール送信機能では、メールが迷惑メールフォルダに入ったり、そもそも送信されなかったりするというトラブルがありますが、WP Mail SMTPを使うことで信頼性の高いSMTP(Simple Mail Transfer Protocol)を経由してメールを送信することができます。Gmail、SendGrid、Amazon SESなどの外部メールサービスを介してメールを送信することによって、受信者の迷惑メールフォルダではなく受信トレイにメールが届くようになります。

導入のメリット

  • メール送信の信頼性向上: デフォルトのPHPメール送信機能は、メールサーバーによって信頼されないことがあり、迷惑メールに分類されるリスクがあります。WP Mail SMTPを使うと信頼性の高いSMTPサーバーを使用するため、メールの到達率が大幅に向上します。
  • 簡単な設定: WordPress初心者でも設定がわかりやすく、主要なメールサービスと簡単に連携することができます。専用のセットアップウィザードが提供されているため、手順に沿って進むだけで設定が完了します。
  • 多様なメールサービスとの連携: WP Mail SMTPはGmail、Outlook、Amazon SES、SendGridなど、さまざまなメールサービスプロバイダと簡単に連携できます。特定のメールプロバイダのSMTP機能を利用して、セキュアかつ効率的なメール送信を可能とします。
  • デバッグ機能: WP Mail SMTPにはメールの送信状況をテストする機能があり、送信エラーや設定の問題を簡単に確認できます。エラーログやデバッグモードも備わっているため、トラブルシューティングが容易となります。

導入手順

  1. WordPressの管理画面からプラグイン > 新規追加をクリックします。プラグイン名「WP Mail SMTP」を検索し、インストール後に有効化します。
  2. 「設定」メニューから「WP Mail SMTP」に移動し、ウィザードまたは手動設定から希望のSMTPサービスを選択します。主要なオプションとして、Gmail、Outlook、Amazon SES、SendGridなどのメールサービスがあります。
  3. 選択したサービスの「SMTPホスト名」「ポート番号」「暗号化方式(SSL/TLS)」などの設定情報を入力します。必要に応じて「SMTP認証」をオンにし、SMTPユーザー名(メールアドレス)とパスワードを入力します。
  4. 設定を保存した後、ツール > WP Mail SMTPからメール送信テストを実行します。送信したメールが正常に届くかどうかを確認し、エラーがあれば設定を再度確認します。
  5. このときメールが送信されない場合、設定画面の「デバッグモード」を有効にして、エラーメッセージを確認します。ポート番号や認証情報の間違いが原因となることが多いです。

Flamingo

FlamingoはContact Form 7と連携するプラグインで、フォームを通じて送信されたメッセージをWordPressの管理画面内で保存・管理できる機能を提供します。これにより、万が一メールが届かなかった場合でも、フォームから送信されたデータを確認することができます。

導入のメリット

  • データ管理の強化: フォームから送信されたすべてのメッセージがWordPress内に保存されるため、重要な問い合わせの見落としを防げます。
  • 簡単な管理: メールを見逃しても、WordPress管理画面からすべてのメッセージを確認できるので、メールサーバーのトラブルにも対処可能です。アドレス帳ではタグを付けて送信者を管理できます。

導入手順

  1. WordPressの管理画面からプラグイン > 新規追加をクリックします。プラグイン名「Flamingo」を検索し、インストール後に有効化します。
  2. 次にContact Form 7に設定を追加します。「お問い合わせ」メニューから「コンタクトフォーム」に移動し、設定済みのコンタクトフォームを選択します。
  3. 「その他の設定」タブパネルを開き、Contact Form 7とFlamingoの項目を紐づけます。設定が完了したら「保存」をクリックして完了します。

▼設定例(公式ページ参照

flamingo_email: "[メールのフィールド名]"
flamingo_name: "[名前のフィールド名]"
flamingo_subject: "[件名のフィールド名]"

注意事項

デフォルトの状態ではスパム対策が不十分な場合があるため、reCAPTCHAなどのスパムフィルターの導入をお勧めします。定期的にメール送信を行い、正しくメールが送信されていることを確認することも大切です。
また、Flamingoに 保存されているメールデータやメールアドレスは適切に管理する必要があります。定期的なエクスポートの実施やデータ削除を検討してください。

お問い合わせ

株式会社HumAInではWordPressを使用したLP制作のほか、様々なサービスやウェブサイトの制作を行っています。詳しくはお問合せください。


関連記事

カテゴリー:

ブログ

情シス求人

  1. チームメンバーで作字やってみた#1

ページ上部へ戻る