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 で【必須】などの装飾をすることができます。
入力項目が多少違いますが、完成形はこんな感じになります。

ディスカッション
コメント一覧
まだ、コメントがありません