ContactForm7の郵便番号欄がエラー時にずれて表示される

Question

Web初心者です。(htmlとCSSは少し、PHPはほぼ未知レベル)

Wordpressのお問い合わせフォームに使用しているContactForm7で、
郵便番号枠をハイフン前後で分けて記載するようにしています。
郵便番号欄は、未記入の時は横並びのレイアウトですが、
記入エラーがある場合にはこのレイアウトがずれてしまいます。（図）

最初は必須項目ではなかったのですが途中で変更してから
レイアウト崩れが起きるようになりました。

「コンタクトフォームの編集」のコードは次の通りです。

<span class="p-country-name" style="display:none;">Japan</span>
<p>郵便番号 <span class="required" >※</span>
    [text* your-zipcode class:p-postal-code minlength:3 size:3] - [text* your-zipcode class:p-postal-code minlength:4 size:4]</p>

また、CSSでは次のように記述してあります。色々なサイトを参考にさせていただきました。

/* お問い合せF_項目名を太字に */
form p 
{
	font-weight: 500;
}

/* お問い合せF_入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea 
{
	padding: 10px 15px;
	margin-right: 10px;
	margin-top: 5px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
}

/*お問い合せF_お問合せ記入枠の調整*/
textarea.wpcf7-form-control.wpcf7-textarea
{
	height: 200px;
	width: 80%
}

.wpcf7 input[name="your-subject"] {
	width: 80%
}

/* お問い合せF_送信ボタン*/
input.wpcf7-submit 
{
	width: 50%;
	height: 80px;
	background: #7c7c7c;
	color: #fff;
	font-size: 20px;
}

/*お問い合せF_エラーメッセージを見やすく*/
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors 
{color: red;
	font-weight: 600;
}

/* お問い合せF_必須項目の入力欄を黄色にする */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required 
{
	background: rgba(255, 255, 142, 0.46);
}

/*お問合せF、フォームの幅*/
input[type=text], input[type=email], input[type=password]
{
    width: 60%;
}
/*お問合せF、郵便番号枠だけの指定*/
.wpcf7 input[name="your-zipcode"] 
{
width: auto;
}

どなたかお分かりでしたら、ご教示いただけたら助かります。
よろしくお願いします。

Answer 1

cf7で表示されるエラーメッセージは.span.wpcf7-not-valid-tipというクラスが
適用されていて、それにはdisplay:blockがかかっているため、
それぞれのinput要素の間に挟まって改行されてしまいます。

ですので郵便番号を１つのボックスにまとめることをお薦めします。
watermarksを使って例）124-4567とプレースホルダーに記載しておけば間違える人も少ないはず。

それでも間にハイフンが入っていてほしいならjavascriptを使ってバリデートをかければ良いです。

Comments

[hatsutoray]

早速のご回答、ありがとうございます！
宜しければ、具体的にどう記述したらよいか教えていただけないでしょうか？？
（ひとまとめにした時は、minlength:7 size:7としたら良いのでしょうか。
ハイフンありだったら7ではなくて8になるのかな...？というレベルでして）

Answer 2

こんな感じでいかがでしょうか。

郵便番号を一つのフィールドに変更
[text* your-zipcode class:p-postal-code minlength:8 size:8]

jQueryでハイフンのバリデーション

$(function(){
	$('.p-postal-code').change(function() {
		$str = $(this).val();
		if (! preg_match('/^\d{3}[-]\d{4}$/', $str)) {
		    alert('郵便番号はハイフンを含めた７桁で入力してください');//ここは好みのやり方でどうぞ
		}
	});
});

Comments

[hatsutoray]

ありがとうございます！
「郵便番号を一つのフィールドに変更」の手段で対応いたしました。
すぐにご回答いただけて、助かりました！ありがとうございました。