Wordpress:コンタクトフォーム7でテキスト入力欄を横並びにしたい

Question

コンタクトフォーム7でテキストを横並びにしたい

現在wordpressでサイトを作成しており、応募フォームでコンタクトフォーム7を使用しております。
名前入力の欄で、「性」と「名」を横並びにしたいのですが、どうしても上下に並んでしまい、どうやっていいか分かりません。

現在作成しているコンタクトフォーム7は、カゲサイさんのコードを使用させていただいております。

該当のソースコード

<table class="inquiry">
<tr>
<th>
<span class="haveto">必須</span><span>お名前</span>
</th>
<td>
性[text* your-name class:textsp]名[text* your-name class:textsp] 
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>メールアドレス</span>
</th>
<td>[email* your-email class:mailsp placeholder"[e-mail]"]</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>電話番号</span>
</th>
<td>
[tel your-tel class:tel placeholder"090-1111-2222"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ドロップダウンメニュー</span>
</th>
<td>
[select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>チェックボックス横並び【１つを選択】</span>
</th>
<td>
[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 "サンプル4" "サンプル5" "サンプル6"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>チェックボックス横並び【複数を選択】</span>
</th>
<td>
[checkbox* checkbox-2 use_label_element default:1 class:check2 "サンプル7" "サンプル8" "サンプル9"]</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>チェックボックス縦並び【１つを選択】</span>
</th>
<td>
[checkbox checkbox-3 exclusive use_label_element default:1 class:verticallist class:check3 "サンプル10" "サンプル11" "サンプル12"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>チェックボックス縦並び【複数を選択】</span>
</th>
<td>
[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>ラジオボタン横並び</span>
</th>
<td>
[radio radio-1 use_label_element default:1 class:radio1 "サンプル16""サンプル17""サンプル18"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ラジオボタン縦並び</span>
</th>
<td>
[radio radio-2 use_label_element default:1 class:verticallist class:radio2 "サンプル19""サンプル20""サンプル21"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>数値のスピン形式</span>
</th>
<td>
[number number-1 min:10 max:100 placeholder class:number1 "数値の値は指定できる"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>日付</span>
</th>
<td>
[date* date-960 placeholder class:datesp ]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>中級者向け回答形式のタグ</span>
</th>
<td>
[quiz quiz-1 class:qyizsp "質問：2019年に発表された新元号は？|令和"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>郵便番号</span>
</th>
<td>
[text* your-postalcode class:p-postal-code placeholder"123-4567"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>都道府県</span>
</th>
<td>
[text* your-prefectures class:p-region placeholder"◯◯県"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ご住所</span>
</th>
<td>
[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>お問い合わせ内容</span>
</th>
<td>
[textarea* your-message class:content placeholder "１行以上のテキスト入力欄"]
</td>
</tr>
</table>
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit id:formbtn "上記の内容で送信する"]

/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
}

どうぞよろしくお願いいたします。

Comments

[hiok]

性[text* your-name class:textsp]名[text* your-name class:textsp]
この部分をブラウザで表示した際のコードを提示してください。
おそらくインラインにすれば横並びになると思いますよ。

[hotrod7020]

hiok様、ありがとうございます。
こちらでよろしいでしょうか。

<tr>
<th><span class="haveto">必須</span>お名前</th>
<td>性<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required textsp" aria-required="true" aria-invalid="false" /></span>名<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required textsp" aria-required="true" aria-invalid="false" /></span> </td>
</tr>

Answer 1

hiokさんがおっしゃっている通り、inputに対して横幅を小さめに設定すれば横並びになると思います。

例えば

.inquiry td .your-name input {
    width: 30%;
}

みたいな。

あと、「性」→「姓」だと思いますので、ここは直しておいた方が良いかと。。

Comments

[hotrod7020]

mai1210さん

御礼が遅くなり、申し訳ありません。

cssを追加してみたのですが、横幅が狭くなるだけで横並びになりません。その他調整する部分などあれば教えていただけたらと思います。

[mai1210]

contact form側で記述しているソースではなく、実際に表示されたページ側で、デベロッパーツールを使って以下確認してみてください。

・span や input に display: block; がかかっていないか。
　⇒ display: inline; にすれば横並びになります。

・span や input の後に、空のpタグやbrタグが挿入されていないか。
⇒ contact form で入力した改行が p や ｂｒ として吐き出されている可能性があります。以下のURLご確認ください。

https://web-guided.com/1087/
https://yuyauver98.me/contactform7-ptag-badguy/

wp-config.php の編集はバックアップ等をとったうえで自己責任で。

Answer 2

cssでinputの横幅を小さくすれば横並びになります。

Comments

[hotrod7020]

hiokさん

御礼が遅くなり、申し訳ありません。

inputの横幅を調整してみたのですが、横幅は狭くなるのですが横並びになりません。
他の調整などあれば教えていただけたらと思います。

[hiok]

inputの横幅を調整したcssコードをご提示下さい。

[hotrod7020]

こちらになります。私の知識が浅いので、足りない部分があれば申し訳ありません。

.inquiry td .your-name input {
width: 30%;
}

[hiok]

いえ、合ってるように見えます。（提示いただいてるhtml、cssを使うと、私の環境では横並びになります。）
提示されてない他の部分のcssなどが影響してる可能性もあります。
ブラウザのデベロッパーツールを使ってspan,inputのcss、幅がどのような値になってるか、確認してみてはいかがでしょうか？