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

2020年2月6日

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 で【必須】などの装飾をすることができます。

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