Contact Form 7プラグインで設置した「お問い合わせフォーム」をカスタマイズしてみよう

できれば、お問い合わせフォーム（プラグインContact Form 7）の表示を「表」で見やすくカスタマイズしたいな、と考えていました。

お問い合わせフォームをカスタマイズする

必須の文字を　赤い*に変えた以外はほぼデフォルトで設置した状態のお問い合わせフォームがこんな感じです。

カスタマイズ前のフォーム

Googleの画像認証ボタンを設置しても、送信ボタンとくっついていて、これじゃ見た目NGですよね。

上のフォームのコードはこちら

<p><span class="red">*</span> は必須です</p>
<label> お名前<span class="red">*</span>
[text* your-name] </label>
<label> メールアドレス <span class="red">*</span>
[email* your-email] </label>
<label> 件名<span class="red">*</span>
[text* your-subject] </label>
<label> メッセージ本文<span class="red">*</span>
[textarea* your-message] </label>
[recaptcha]
[submit "送信"]

赤色のCSSを追加

.red {
	color:red;
	font-weight: 500;
}

見た目を少しカスタマイズしたもの

少しカスタマイズしたコードはこちら

10行目の [recaptcha] にクラスを追加して [recaptcha class:recp] と変更しています。

<p><span class="red">*</span> は必須です</p>
<label> お名前<span class="red">*</span>
[text* your-name] </label>
<label> メールアドレス <span class="red">*</span>
[email* your-email] </label>
<label> 件名<span class="red">*</span>
[text* your-subject] </label>
<label> メッセージ本文<span class="red">*</span>
[textarea* your-message] </label>
[recaptcha class:recp]
[submit "送信"]

追加したCSS

label {
	font-weight: normal;
 }
.recp{
	margin-bottom:25px;
}

テーブルで作る

テーブル用のコード

<p><span class="red">*</span>は必須です</p>
<table class="table">
<tbody>
<tr>
<th>お名前 <span class="red">*</span></th>
<td> [text* your-name] </td>
</tr>
<tr>
<th>e-mail <span class="red">*</span></th>
<td> [email* your-email] </td>
</tr>
<tr>
<th>件　名 <span class="red">*</span></th>
<td> [text* your-subject] </td>
</tr>
<tr>
<th>内　容 <span class="red">*</span></th>
<td> [textarea* your-message] </td>
</tr>
</tbody>
</table>
[recaptcha class:recp]
[submit "送信"]

テーブル用で追加したCSS（レスポンシブ対応）

/* お問い合わせフォーム */
input[type="text"], input[type="email"], input[type="url"] {
    height: 32px;
}
input[type="text"], input[type="email"], input[type="url"], textarea {
    width: 100%;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
    resize: none;
}
.post td, .post th {
    padding: 8px 10px;
    border: 1px solid #ddd;
}
.table th {
    padding: 10px;
    font-weight: normal;
    background: #eee;
    text-align: left;
    white-space: nowrap;
}
th > .red{
	font-size:0.8em;
	color:red;
	vertical-align:super;
}
.table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

あとがき

最初、パソコンでの表示がうまくいった、と思ってスマホで確認してみたら、違う～～～～～。入力部分がテーブルからはみ出してるし。
何が間違っているのか、何を修正すればいいのか、はたまた追加すればいいのか、手探りでした。
私は使いませんが、添付ファイル項目もつけてみたいな、と思った日でした。
少しでもお役に立てたら、拍手ボタンやブログ村投票ボタンをポチッとして帰ってね♪
また、間違いがあったら教えていただけると幸いです。

こちらもどうぞ

関連プラグインを使用してお問い合わせフォームを設置する
お問い合わせフォームを設置する方法

関連お問い合わせフォームにGoogleの画像認証を実装する
Googleの画像認証（reCAPTCHA）を実装する

関連送信者にお問い合わせの控えを自動返信する
お問い合わせの控えを自動返信する