お問合せフォームはCONTACT 7 より MW WP Formのほうが好きです。CONTACT 7のほうが手軽で人気のようですが入力確認欄がないのが不安だからです。
MW WP Formを入れてみた。
MW WP Formはショートコードを張り付けるだけでお問い合わせフォームを作成することができます。
今回はその作成方法ではなくちょっと困ったことが起こったのでその解決方法を記録しておきます。
入力欄のサイズがおかしい
使用したテーマはAFFINGERです。調子よく進んでいざ表示させたらこんなことになってしまいました。
電話番号の入力欄が広すぎる・・・・
でも、どこを見てもサイズを設定する欄がない。ということはクラス指定してCSSで変更するしかないようです。
クラス指定とCSS設定
では、クラス指定とCSS設定とは何なのでしょうか？本来ならスタイルシートのことなどなどもっと詳しい説明が必要なのですが、思い切ってほぼ割愛します（笑）
この電話番号の記入欄をCSSというものを使って見栄えよくします。どういう風にしたいか決めた後、見栄えをよくするその場所にCSSを指定します。どの要素に適用させるのかを明確に指定するためのものがclass指定です。（この場合は電話番号youre_telの部分）
ＣＳＳの設定
まずはCSSで味付けを決めていきます
「カスタマイズ」→「追加CSS」へ進みます。
CSSを指定するときは、どの要素に適用させるのかを明確にすることが大事です。
指定方法は頭に「.（ピリオド）」をつけて、class名を記述するだけです。
.youre_tel{
width:6em；
｝
今回クラス指定はyoure_telにしました。もちろんyoure_telでなく任意でつけても大丈夫です。クラスyoure telは幅６emにしてくださいという記述です。６emはお好みで変えてください。
クラス指定
先ほど決めたクラスyoure_telをMW Formの設定欄の該当する場所に指定します。
class=”youre_tel”
この（電話番号の）部分をyoure_telと指定しますよ。という意味です。
これで電話番号のクラス指定ができました。
.youre_tel{
width:6em !important；
｝
たぶんAFFINGERで強固な指定がかかっているようで効かなかったので !important を付けくわえました。
なんとか見栄えよくできました。ぜひ試してみてください。
