Contact Form 7をBootstrapで使用してみました

フォームを作るのに便利なWordPressのプラグイン「Contact Form 7」。
Bootstrapのデザインを使用したかったので作ってみました。こんな感じ↓になります。

フォーム

「Contact Form 7」のインストール

まずはWordpressでContact Form 7をインストールします。
管理画面から「プラグイン」> 「新規追加」> 「Contact Form 7」で検索し「いますぐインストール」、有効化にします。

フォームの作成

お問合わせ

「お問い合わせ」 > 「新規追加」 > 「新規追加」で表示されるフォームに以下を貼りつけます。

[response]
<div class="form-horizontal">
<div class="form-group"><label class="col-md-3 control-label">お名前 <span class="label label-default req">必須</span></label><div class="col-md-5">[text* your-name class:form-control]</div></div>
<div class="form-group"><label class="col-md-3 control-label">メールアドレス <span class="label label-default req">必須</span></label><div class="col-md-5">[email* your-email class:form-control]</div></div>
<div class="form-group"><label class="col-md-3 control-label">お問い合わせ内容</label><div class="col-md-7">[textarea your-message x8 class:form-control]</div></div>
<p class="text-center">[submit class:btn class:btn-primary class:btn-lg "　送信　"]</p>
</div>

[response] はエラーメッセージを表示してくれます。

Bootstrapの.form-horizontal を指定すると水平レイアウトが使用できます。
.form-group は下にマージンしてくれ.rowも兼ねているので使用しなくて大丈夫になります。
labelに.control-labelを指定するとラベルの調整をしてくれます。
inputには.form-controlをしてすることでBootstrapのデザインになります。

CSSの追加

Contact Form 7の.wpcf7-validation-errors と .wpcf-7-mail-sent-ok で送信メッセージの色を変更してくれます。Bootstrapのデザインに変更したいのでstyle.cssに貼りつけてください。

.wpcf7 .wpcf7-response-output {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.wpcf7 .wpcf7-validation-errors {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.wpcf7 .wpcf7-mail-sent-ok {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.req{
    font-size:11px;
    font-weight: normal;
}
メッセージクラス.wpcf7-response-output
入力エラー.wpcf7-validation-errors
メール送信OK.wpcf-7-mail-sent-ok

固定ページにショートタグを貼りつける

フォームを表示させたいページに出来上がったショートコードを貼りつけてください。

お問合わせ

ページの表示

こんな感じで表示されます。送信ボタンを押してみてください。

    ※その他の設定でdemo_mode: onを指定しているので実際送信はされません。

    関連記事