みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
WordPressのプラグイン「Contact Form 7」は利用されていますか？
いわゆる「問い合わせフォーム」を簡単に作ることができる超超超定番プラグインの一つです。
WordPressで企業サイトを作っている場合、ブログサイトでコンテンツマーケティングをする場合には、問い合わせフォームは必須ですから、Contact Form 7はたいへん重宝します。
ですがこのContact Form 7。ちょっと見た目が寂しい…。
ということで、今回はテーブル化とCSSでContact Form 7による問い合わせフォームの見栄えをよくする方法についてお伝えします。
ちょっとのカスタマイズでできますので、初心者でも簡単ですよ！
デフォルトのContact Form 7による問い合わせフォーム
最初にContact Form 7のデフォルトの問い合わせフォームはこんな感じ、というのを共有しておきましょう。
まず、WordPress管理画面の「お問い合わせ」から編集したいコンタクトフォームを選択すると
このような編集画面が開きます。
この中に表示する内容やフォーム部品を入力していって、問い合わせフォームを作るわけですね。
お名前 (必須)<br />
[text* your-name placeholder akismet:author "山田 太郎"]
メールアドレス (必須)<br />
[email* your-email placeholder "sample@example.com"]
題名<br />
[text* your-subject]
メッセージ本文<br />
[textarea* your-message]
[submit "送信"]
実際に表示する内容をpタグ内にベタベタと書いていき、テキストや入力部品を編集していきます。
ちなみに上記はほぼデフォルトで入力されているものを少し変えただけです。
実際の表示は
となります。
それにしてもちょっと寂しい…。
では、少しコーディングをしてテーブル表示にしていってみましょう。
Contact Form 7の表示をテーブル化する
コンタクトフォームの編集でContact Form 7の表示をテーブル化していきます。
なおプレビュー機能がないので、表示を確認するには保存して更新するしかありません。
念のため、以前のコンタクトフォームの内容は「」でコメントアウトにしておくか、新規のコンタクトフォームを作りましょうね。
もとに戻したいときに困ります。
では、単純に上記の内容（送信ボタン以外）をテーブルで構成してみましょう。
<table>
<tr>
<th>お名前 (必須)</th>
<td>[text* your-name placeholder akismet:author "山田 太郎"]</td>
</tr>
<tr>
<th>メールアドレス (必須)</th>
<td>[email* your-email placeholder "sample@example.com"]</td>
</tr>
<tr>
<th>題名(必須) </th>
<td>[text* your-subject]</td>
</tr>
<tr>
<th>メッセージ本文(必須) </th>
<td>[textarea* your-message]</td>
</tr>
</table>
[submit "送信"]
- 全体をtableタグで囲む
- 一行ずつをtrタグで囲む
- 見出しはthタグで囲む
- 入力フォーム部品はtd部品で囲む
- 一行ずつをtrタグで囲む
という構成にします。
ちなみに、WordPressのエディタはインデントが使いづらいので、Atomなどのエディタで作って貼り付けるとコーディング楽ちんですよ。
では、表示を確認してみましょう。
…うーん、良くなったようななってないような…。
少しCSSをいじっていきましょう。
Contact Form 7の簡単CSSカスタマイズ
クラスの追加とCSSの修正をすることで、表示をかっこよくしていきたいと思います。
ちなみに、CSSの追加は子テーマに対して行うようにしましょうね。
子テーマはテーマ制作者が用意してくれている場合があります。詳しくは以下記事もご覧ください。
テーブルの余白を調整し偶数行に色を付ける
まずテーブル全体として以下修正することで、かっこよくしていきます。
- テーブルの各要素の余白を追加
- 一行ごとに色を変える
これらは、たった1つのクラスを追加することで実現できます。
コンタクトフォームの編集でtableタグに「table-ctf7」というクラスを追加します。
<table class="table-ctf7">
次にCSSですが以下を追加します。
.table-ctf7 tr th,td {
padding: 10px; /* 余白を10px持たせる */
border-top: 1px #DDD solid; /* 上側にグレーの実線を引く */
}
.table-ctf7 tr:nth-child(even) {
background-color: #F9F9F9; /* 偶数行をうっすらグレーに */
}
たったこれだけです。
それぞれの意味はコメントをご覧いただければわかると思いますが、偶数行にどうこうというCSSセレクタの使い方はクールですよね。
実際の問い合わせフォームの表示はこちら。
いいですね～。
ちなみに、Bootstrapを導入していればCSSをいじらずともtableタグを
<table class="table table-striped">
などとするだけで同じようにできます。
「※必須」の文字だけCSSを当てる
もう一点、「(必須)」をスマートにしていきましょう。
- 「(必須)」を「※必須」と表記を変更
- フォントサイズを小さく
- フォントの色を赤に
という修正をしていきます。
特定の文字だけCSSを当てていくにはspanタグが便利ですね。
コンタクトフォームの編集で「(必須)」は「※必須」に変更をしつつ「required」というクラスを追加して
<span class="requied">※必須</span>
に置換していきます。
CSSは以下を追加。
.table-ctf7 span.requied {
font-size: 10px; /* フォントサイズを10pxに */
color: red; /* フォントカラーを赤に */
font-weight: normal; /* フォントの太さを通常に */
}
これでOKです。
では、問い合わせフォームの表示を見てみましょう。
良い感じですね。
まとめ
WordPressのプラグインContact Form 7の問い合わせフォームについてテーブル化およびCSSの調整で簡単にかっこよくする方法についてお伝えしました。
お問い合わせフォームはサイト内の他のコンテンツとくっきり分離されているので、CSSでのカスタマイズもしやすいですね。
WordPressでのCSSカスタマイズの練習に向いていると思いますよ！
また簡単めなWordPressのCSSカスタマイズについて見つけたら紹介したいと思います。