コンタクトフォーム７で姓と名を別入力にして、それらの入力項目を横並びにしたい。

Question

コンタクトフォーム７で姓と名を別入力にして、それらの入力項目を横並びにしたい。

現在コンタクトフォーム７の方には、

[text* sei]
[text* mei]

を記述しています。

これにCSSで

.sei{
width:200px;
float:left;
}
.mei{
width:200px;
float:left;
}

と記述してみてるのですが、widthは反映されるものの、縦並びのまま変化がありません。

おそらくfloatの使い方に問題があると思うのですが、よくわからないためこちらで質問させていただきます。

よろしくお願いします。

Comments

[Lhankor_Mhy]

出力されているHTMLをご提示いただけますか？
Contact Form 7 の問い合わせページ( https://contactform7.com/ja/contact/ )を見ましたが、CSSでは対応できない構造のように見えます。

[yamanon]

<form action="/deta-elis/contact/#wpcf7-f454-p457-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="454" />
<input type="hidden" name="_wpcf7_version" value="5.1.6" />
<input type="hidden" name="_wpcf7_locale" value="ja" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f454-p457-o1" />
<input type="hidden" name="_wpcf7_container_post" value="457" />
</div>
<p>お名前 　【必須】<br />
<span class="wpcf7-form-control-wrap sei"><input type="text" name="sei" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span><span class="wpcf7-form-control-wrap mei"><input type="text" name="mei" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>

[yamanon]

すみません、よくわかっていないのですが、これでよろしいでしょうか？

[Lhankor_Mhy]

ご提示のHTMLとCSSを試してみましたが、問題なく横並びになりましたので、ご提示いただいていない部分（テーマのCSSなど）が原因かもしれませんね。

<span class="wpcf7-form-control-wrap sei">
↑これに効いているスタイルをご提示いただくことは可能ですか？
効いているスタイルの取得方法がわからない場合は、その旨お知らせください。

[yamanon]

ありがとうございます。

おそらくですが・・・

form input[type="text"], form input[type="email"], form input[type="password"], form input[type="date"], form select, form textarea {
border: 2px solid
#cecece;
}
form input[type="text"], form input[type="email"], form input[type="password"], form input[type="date"], form select, form textarea {
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 10px 5px;
outline: 0;
margin: 5px 5px 5px 0;
-webkit-appearance: none;
font-size: 100%;
}
.elementor *, .elementor ::after, .elementor ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
width: 100%;
padding: 0px;
max-width: 300px;
}

このあたりではないかと思います。
よろしくお願い致します。

[Lhankor_Mhy]

ご提示のCSSを試してみましたが、やはり横並びになるようでした。

[Lhankor_Mhy]

https://jsfiddle.net/Lhankor_Mhy/3erxw6oy/2/

Answer 1

ググったら同じ質問がありましたが。

Wordpress：コンタクトフォーム7のテキスト項目を横並びにしたい
https://teratail.com/questions/59120