フォームを作るのに便利な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
を指定しているので実際送信はされません。