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

2017-12-24 21:362018-03-30 16:45カスタマイズ

1. お問い合わせフォームをカスタマイズする
2. あとがき

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

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;
}

あとがき

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

こちらもどうぞ