デフォルトのフォームの簡単な改変で公式カスタマイズの雰囲気を出せました。

テーマは「Diver」、お問い合わせフォームに「Contact Form 7」、スパム対策に「reCAPTCHA」を使ってて、「reCAPTCHAを導入したら問い合わせフォームのレイアウトが崩れたけど、カスタマイズに時間をかけたくはないぜ!」という人には特に役に立つ記事になっていると思います。

【2018年12月12日】使っていたキーのバージョンが古いものだったらしく、reCAPTCHAを使うためにサイトを登録し直さなくてはならなくなりました。いい機会なのでスパム対策として問い合わせフォームに確認のチェックボックスを追加する方法を試してみることにしました。

【2018年12月29日】問い合わせフォームの確認チェックボックスではスパムメールを防げてないようなので、reCAPTCHAを新しいバージョンで再度導入しました。標準の状態では全てのページの右下にreCAPTCHAのロゴが表示されるのが鬱陶しいですね。

カスタマイズでお問い合わせフォームがどう変わったか

Contact Form 7にDiverのデモサイトにあるカスタマイズの例を適用すると、このようになりました。

 

一応スパム対策をしておこうとreCAPTCHAを導入したら、このようになりました。

 

なんだかバランスが悪いので、デフォルトのお問い合わせフォームを改変してDiverの雰囲気を出したのがこれです。

 

デフォルトのお問い合わせフォーム

まず、デフォルトのお問い合わせフォームのコードはこうなっています。

<label> お名前 (必須)
[text* your-name] </label>

<label> メールアドレス (必須)
[email* your-email] </label>

<label> 題名
[text your-subject] </label>

<label> メッセージ本文
[textarea your-message] </label>

[submit "送信"]
ここにreCAPTCHAを何の工夫もなく入れるとこうなります。

<label> お名前 (必須)
[text* your-name] </label>

<label> メールアドレス (必須)
[email* your-email] </label>

<label> 題名
[text your-subject] </label>

<label> メッセージ本文
[textarea your-message] </label>

[recaptcha]

[submit "送信"]
このお問い合わせフォームはどうなっているかというと、こうなっています。

正直悪くありません。が、もう少し公式カスタマイズの雰囲気に近づけたいと考えました。調べるとどうも子テーマのスタイルシートをいじるよりも簡単な方法があるようです。

カスタムCSSでカスタマイズ

上の画像の(必須)を必須にするためには、CSSをいじるかContact Form 7の設定に直接書き込む必要があるようです。問い合わせだけだしめんどくせーから直接書き込んでやるかと思いましたが、どうやらHTML5ではHTMLに直接書き込んで修飾することは推奨されてないようです。Contact Form 7の設定を直接修飾するのもこれと同じような雰囲気を感じたので念のためCSSで修飾することにしました。

さて、いやいや子テーマに書き込もうかと思っていたところ、DiverにはカスタムCSSという機能があるということを知りました。

お問い合わせフォームを作る場合は一般的な方法だと思いますが、僕は固定ページにContact Form 7のショートカットキーをコピペして作っています。Diverではこの固定ページの下の方に「カスタムCSS」というCSSを入力するボックスがあります。カスタムCSSを使うと、そのページにだけCSSを適用することができるみたいです。子テーマでCSSのカスタマイズをするより全然楽です。これはこの時の僕にとって、まさに渡りに船でした。

いざカスタマイズ!

カスタマイズといってもやることは2つだけです。

  1. Contact Form 7のコンタクトフォームのclassを指定する
  2. カスタムCSSに8行ほど書き込む

1. Contact Form 7のコンタクトフォームのclassを指定する

前述の通り、Contact Form 7のデフォルトのフォームにreCAPTCHAを追加したものはこうなっています。

<label> お名前 (必須)
[text* your-name] </label>

<label> メールアドレス (必須)
[email* your-email] </label>

<label> 題名
[text your-subject] </label>

<label> メッセージ本文
[textarea your-message] </label>

[recaptcha] [submit "送信"]
(必須)を必須にしたいので、この部分のクラスを指定します。()を消してクラスを指定したものがこちらです。

<label> お名前 <span class="任意のクラス名">必須</span>
[text* your-name] </label>

<label> メールアドレス <span class="任意のクラス名">必須</span>
[email* your-email] </label>

<label> 題名
[text your-subject] </label>

<label> メッセージ本文
[textarea your-message] </label>

[recaptcha] [submit "送信"]

これで修飾する部分のクラスの指定は完了です。

2. カスタムCSSに8行ほど書き込む

それでは最後の工程、カスタムCSSへの書き込みを行います。書き込むのは次の8行です。

.任意のクラス名 {
font-size: 15px;
color: #ffffff;
background-color: #f9453d;
margin: 5px;
padding: 2px;
border-radius: 3px;
}

これで固定ページを保存すれば、無事に(必須)が必須になっているはずです。

一応各行についての説明を置いておきます。

.任意のクラス名 { 好きな名前をつけてください。ただし先頭を数字にすることはできないみたいです。あとクラス名の前に.をつけるのを忘れてないように。
font-size: 15px; フォントのサイズです。このブログはPCでの見るときのフォントは17pxなので、四角で囲まれる分少し小さくしました。
color: #ffffff; フォントの色です。#ffffffは白です。
background-color: #f9453d; 文字の背景、つまり四角で囲われた中の色です。
margin: 5px; 前の文字との間隔です。
padding: 2px; 文字を囲う四角の大きさに当たります。
border-radius: 3px; 四角の角をどれくらい丸めるかを指定します。
} かっこを閉じます。

以上、デフォルトのフォームを公式の雰囲気に近づける簡単なカスタマイズでした。

おすすめのレンタルサーバー
おすすめの記事