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

Contact Form 7, CSS, お問い合わせ, 画像認証

2018.03.30 | テーブル用のCSSの内容を更新しました。

できれば、お問い合わせフォーム（プラグイン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（レスポンシブ対応）

2018.03.30 | Chromeでテーブル幅が100%になっていなかったので、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の画像認証を実装する

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

2

カスタマイズ

Posted by どらみ