カテゴリー
お問い合わせ

【WordPress】Contact Form 7の自動整形・CSSを無効化してオリジナルデザインにする方法

WordPress
目次

WordPressのお問い合わせフォーム作成で定番のプラグイン「Contact Form 7」。 非常に便利なプラグインですが、デフォルトの状態だと「勝手に<p>タグや<br>タグが挿入されてレイアウトが崩れる」「プラグイン独自のCSSが読み込まれてデザインが浮いてしまう」といった問題に悩まされることがよくあります。

実務のWeb制作では、デザイナーが作成したデザインカンプ通りにフォームを実装するため、これらの余計な機能をオフにして、自分自身でゼロからスタイル（CSS）を当てるのが一般的です。

今回は、Contact Form 7の自動整形やデフォルトCSSを無効化し、エラーメッセージや送信中のローディング（スピナー）に至るまで、完全にオリジナルのデザインを適用するカスタマイズ手順をご紹介します！

準備編：functions.phpで不要な機能を無効化する

Contact Form 7（以下、CF7）をオリジナルデザインにするための第一歩は、「プラグインのデフォルトの機能をオフにする」ことです。 テーマの functions.php に以下の2行を追記するだけで、自動整形とデフォルトCSSを完全に無効化できます。

// Contact Form 7: 自動整形（<p>や<br>の挿入）を無効化
add_filter('wpcf7_autop_or_not', '__return_false');

// Contact Form 7: デフォルトCSSの読み込みを無効化
add_filter('wpcf7_load_css', '__return_false');

・wpcf7_autop_or_not
CF7は初期状態だと、改行を自動で <p> や <br> に変換する機能が働いています。これがレイアウト崩れの原因になるため、__return_false で無効化します。

・wpcf7_load_css
CF7が用意している標準のCSSファイルを読み込まないようにします。これにより、後から自分で書くCSSとの競合（スタイルの打ち消し合い）を防ぎ、クリーンな状態でコーディングを進められます。

構造編：BEM設計を意識したフォームタグの作成

準備が整ったら、WordPress管理画面の「お問い合わせ > コンタクトフォーム」から、フォームの構造（HTML）を作成していきます。

ここでのポイントは、CSSでスタイルを当てやすくするために、すべての要素にクラス名を付与し、構造を <div> でしっかり囲むことです。今回は、保守性の高い「BEM設計」をベースにしたクラス名で構成しました。

<div class="p-contact-form">

  <div class="p-contact-form__item">
    <label for="name" class="p-contact-form__label">お名前 <span class="p-contact-form__required">必須</span></label>
    [text* your-name id:name class:p-contact-form__input placeholder "例：みかん箱 太郎"]
  </div>

  <div class="p-contact-form__item">
    <label for="email" class="p-contact-form__label">メールアドレス <span class="p-contact-form__required">必須</span></label>
    [email* your-email id:email class:p-contact-form__input placeholder "例：info@example.com"]
  </div>

  <div class="p-contact-form__item">
    <label for="type" class="p-contact-form__label">お問い合わせ種別 <span class="p-contact-form__optional">任意</span></label>
    [select your-subject id:type class:p-contact-form__select "お仕事のご依頼" "サイトに関するご質問" "記事へのご感想" "その他"]
  </div>

  <div class="p-contact-form__item">
    <label for="message" class="p-contact-form__label">お問い合わせ内容 <span class="p-contact-form__required">必須</span></label>
    [textarea* your-message id:message class:p-contact-form__textarea placeholder "こちらにお問い合わせ内容をご入力ください。"]
  </div>

  <div class="p-contact-form__agreement">
    [acceptance your-consent class:p-contact-form__acceptance]
      <a href="/privacy-policy/" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意する
    [/acceptance]
  </div>

  <div class="p-contact-form__submit-wrapper">
    [submit class:p-contact-form__submit "送信する"]
  </div>

</div>

実装のポイント
CF7のショートコード（[text* ...] など）には、class:クラス名 と記述することで任意のクラスを付与できます。 これを活用して .p-contact-form__input などのBEMベースのクラスを当てておけば、後ほどCSSを書く際に「どの要素に対してのスタイルなのか」が一目瞭然になり、コードのメンテナンス性が向上します。

装飾編：SCSSでオリジナルデザインとアニメーションを適用する

HTMLの構造ができたら、いよいよSCSS(CSS)でスタイルを当てていきます。スタイル適用後のフォームは以下の画像のようになります。

ここでは、CF7のカスタマイズで特につまずきやすい「エラーメッセージの調整」と「送信中スピナーの自作」の2つのポイントに絞って解説します。

エラーメッセージのデザインを上書きする

CF7では、未入力や入力エラーがあった場合、自動的に .wpcf7-not-valid-tip（各項目のエラー）や .wpcf7-response-output（フォーム全体のエラー）といった特定のクラスが付与されたメッセージが出力されます。

デフォルトCSSをオフにしているため、これらに対しても自分でしっかりスタイルを当てる必要があります。

// 各項目の入力エラーメッセージ（「必須項目です」など）
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #c72c4c; // 目立つ赤色を指定
}

// フォーム下部に出力される全体メッセージ（送信エラーなど）
.wpcf7-response-output {
  display: none; // 初期状態では非表示
  padding: 1em;
  margin-top: 1em;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

// 送信失敗などのエラー状態の時のみ、全体メッセージを赤字で表示
form.invalid .wpcf7-response-output,
form.failed .wpcf7-response-output,
form.unaccepted .wpcf7-response-output {
  display: block;
  color: #c72c4c;
  background-color: rgba(#c72c4c, 0.15); // 背景を薄い赤にして警告感を出す
}

送信中の「ローディング（スピナー）」をCSSで作る

CF7のデフォルトのスピナー（送信ボタンの横に出るくるくる）は古い画像ファイルが使われており、モダンなデザインには少し浮いてしまいます。 そこで、デフォルトの画像を消し、CSSの @keyframes アニメーションを使ってオリジナルのスピナーを作成します！

// カスタムスピナー（ローディングインジケーター）のデザイン
.wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  visibility: hidden; // 初期状態は見えないようにする
  width: 1.5em;
  aspect-ratio: 1;
  border: 3px solid #fff; // リングのベース色
  border-top: 3px solid #1bb4d4; // 回転する強調部分
  border-radius: 50%;
  transform: translate(calc(-100% - 1.6rem), -50%);
  animation: cf7-spin 1s linear infinite; // アニメーションの適用
}

// フォーム送信処理中（.submittingが付与された時）のみスピナーを表示
form.submitting .wpcf7-spinner {
  visibility: visible;
}

// スピナーの回転アニメーション
@keyframes cf7-spin {
  0% {
    transform: translate(calc(-100% - 1.6rem), -50%) rotate(0deg);
  }
  100% {
    transform: translate(calc(-100% - 1.6rem), -50%) rotate(360deg);
  }
}

CF7では、送信ボタンクリック時にform要素に.submittingクラスが付与されるので、そのタイミングのみスピナーを表示させるようにしています！

まとめ

今回は、WordPress案件で必須となる「Contact Form 7をオリジナルデザインにする方法」をご紹介しました。

  • functions.php で自動整形と不要なCSSを無効化する
  • BEM設計を意識して、HTML側にしっかりクラス名を付与する
  • エラーや送信中など、状態の変化に応じたCF7特有のクラスに対してSCSSでスタイルを当てる

プラグインは導入して終わりではなく、「いかに自分のコード（デザイン）のコントロール下に置くか」がフロントエンド開発において非常に重要です。 デフォルトの機能に依存せず、細かいUIやインタラクション（アニメーションなど）まで責任を持って作り込めるエンジニアとして、これからも技術を磨いていきます！

最後まで読んでいただき、ありがとうございました！

Prev
Next

関連記事