フォームを作るのに便利な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;
}

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

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

ページの表示

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

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