Contact Form 7 のフォームを Bootstrap 4 対応させる

WordPress にフォームを追加する定番プラグインである Contact Form 7。Contact Form 7 で生成されるフォームを Bootstrap 4 で装飾してみます。

前準備

必要のない <p> タグが挿入されるのを防ぐために、 wp-config.php に以下の記載を追記します(ドキュメント参照)。

define ('WPCF7_AUTOP', false);

Bootstrap 4 が読み込まれていることが前提となるので、Bootstrap 4 に対応したテーマをインストールしておいてください(このサイトでは、Luxeritas を Bootstrap 4 モードにして使っています)。

フォームテンプレート

新規にフォームを作成したときに表示される項目を Bootstrap 4 で書き換えると、こんな感じになります。

[response]
<div class="form-group row">
  <label class="col-md-4 col-form-label">お名前 <span class="badge badge-danger">必須</span></label>
  <div class="col-md-5">[text* your-name class:form-control]</div>
</div>
<div class="form-group row">
  <label class="col-md-4 col-form-label">メールアドレス <span class="badge badge-danger">必須</span></label>
  <div class="col-md-5">[email* your-email class:form-control]</div>
</div>
<div class="form-group row">
  <label class="col-md-4 col-form-label">題名</label>
  <div class="col-md-5">[text your-subject class:form-control]</div>
</div>
<div class="form-group row">
  <label class="col-md-4 col-form-label">メッセージ本文</label>
  <div class="col-md-7">[textarea your-message class:form-control]</div>
</div>
<p class="text-center">[submit class:btn class:btn-primary class:btn-lg " 送信 "]</p>

Bootstrap 3 と比べると、.form-horizontal がなくなり、代わりに .form-group.row を追加することで水平レイアウトにすることができます。また、.label の代わりに .badge で【必須】などの装飾をすることができます。

入力項目が多少違いますが、完成形はこんな感じになります。

この記事を書いた人

グッドネイバー

“ Webに悩むお客さまの「よき隣人」でありたい ” をモットーに、Web システム開発(主に Laravel)、Web マーケティング支援の仕事をしています。詳しい業務内容はこちら。お仕事のご依頼・ご相談はこちらからお気軽にどうぞ。