Web活のロゴ

Web制作Output&初心者のための徹底ガイド

お問い合わせフォームの構築
— Contact Form 7 — #2/3

2023.11.05
はじめに
概要

この記事では、WordPressで利用できる人気のお問い合わせフォームプラグイン「Contact Form 7」の設定とカスタマイズ方法について詳しく解説していきます。初心者から中級者までが、フォームの作成から応用的なカスタマイズ手法まで、簡単に学べるように段階を追って説明します。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

自動Pタグの削除

Worpressでは、自動的に生成されるPタグによってレイアウトが意図しない形に変わってしまうことがあります。デフォルトでコンテンツに自動的にPタグを挿入するwpautop関数が動作しているため、これが原因でフォームのデザインが崩れることがあります。

この問題を解決するためには、Contact Form 7のフォームタグを編集する際に、次のようなフィルターフックを使用してwpautop関数の影響を無効化することができます。※なお、このコードを使用する際は、子テーマのfunctions.phpに記述することをお勧めします。親テーマを直接編集すると、テーマが更新された際に変更が上書きされてしまう可能性があります。子テーマを使用すれば、テーマの更新があってもカスタムコードは保持されます。

funtions.php

add_filter('wpcf7_autop_or_not', '__return_false');

エラーメッセージのカスタマイズ

Contact Form 7では、フォームフィールドごとに独自のバリデーションメッセージを設定することができますが、このカスタマイズはデフォルトでは提供されていません。特定のカスタムキー(例えば、「your-name」フィールド)に対してエラーメッセージを表示するには、WordPressのfunctions.phpファイルにフックを追加する必要があります。

以下は、your-nameフィールドの入力にエラーがあった場合にカスタムエラーメッセージを表示するためのコードの例です。

functions.php

function custom_wpcf7_validation_error_message($result, $tag)
{
    if ('your-name' == $tag->name) {
        if (empty($_POST[$tag->name])) {
            $result->invalidate($tag, 'お名前を入力してください。');
        }
    }
        return $result;
}
add_filter('wpcf7_validate_text', 'custom_wpcf7_validation_error_message', 10, 2);

電話番号フィールドのカスタムバリデーション

// お電話番号フィールドのカスタムバリデーション
add_filter('wpcf7_validate_tel', 'custom_wpcf7_validation_error_message', 10, 2);

メールアドレスフィールドのカスタムバリデーション

add_filter('wpcf7_validate_email', 'custom_wpcf7_validation_error_message', 10, 2);

それぞれのタグにより、適切なフィルターフックを記述してカスタマイズする必要があります。

まとめ
  • 自動Pタグの挿入でデザインが崩れる場合がある
  • 自動Pタグを削除することができる
  • エラーメッセージをカスタムすることができる
  • デフォルトでは提供されていない
  • functions.phpに記述する必要がある
  • それぞれのタグに対し、フィルターフックを使用する必要がある
  • 編集にはバックアップを取ったうえ、ローカル環境及び子テーマでの編集が望ましい
  • それぞれのバージョンによって設定がことなる場合がある