質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.21%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 215

hotrod7020

score 11

コンタクトフォーム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"kagekage@gmail.com"]</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>チェックボックス横並び【1つを選択】</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>チェックボックス縦並び【1つを選択】</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 "1行以上のテキスト入力欄"]
</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;
}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hiok

    2021/02/09 09:36

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

    キャンセル

  • hotrod7020

    2021/02/09 14:06 編集

    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>

    キャンセル

回答 2

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/02/23 11:05

    hiokさん

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

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

    キャンセル

  • 2021/02/23 19:28 編集

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

    キャンセル

  • 2021/02/23 21:55

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

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

    キャンセル

  • 2021/02/23 23:11

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

    キャンセル

+1

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

例えば

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


みたいな。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/02/23 11:03

    mai1210さん

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

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

    キャンセル

  • 2021/02/24 12:12

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

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る