web-dev-qa-db-ja.com

Contact Form 7-同じ行に複数のテキストフィールド

Contact Form 7を使用して、ホテルの予約フォームを設計しています。

http://istanabalian.com/book/

レイアウトをカスタマイズする方法がわかりません。一部のテキストフィールドを同じ行に表示したいのですが、この非常に単純な目標を達成するために使用する要素やCSSスタイルの正しい識別が見つかりません。

コードは次のとおりです。

<div id="responsive-form" class="clearfix">

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Arrival date
[date date-79 id:Arrivaldate date-format:mm/dd/yy] </label>

<label> Departure date
[date date-80 id:Departuredate date-format:mm/dd/yy] </label>

<label> How many guests?
    [text your-guests] </label>

<div class="form-row">
       <p>Number of adults [text your-adults]</p>
       <p>Number of children under 6 years old [text your-little-children]</p>
       <p>Number of children under 12 years old [text your-big-children]</p>
</div>

Select your preferred accomodation
    [checkbox your-accomodation use_label_element "Wayan (Two-story villa)" "Kadek (Two-story villa)" "Nyoman (Garden bungalow)" "Kehut (Garden bungalow)" "Pasca (Garden bungalow)"]

Do you need transportation to the hotel ? 
[radio your-pickup default:1 use_label_element exclusive "No transport needed" "Transport from Denpasar airport" "Transsport from Gilimanuk Ferry"]

<label> Do you want us to arrange motorbike rental for you ? 
    [text your-motorbikes] </label>

<label> Tell us more about what brings you to Balian
    [textarea your-message] </label>

[submit "Send"]

</div>

Form-row要素のp要素を1行で表示したい。私はこのCSS行を試しました：

.form_row p{
display: inline-block
}

しかし、それは何もしません。私は何かを逃していると感じています、誰でも助けることができますか？

事前に感謝します、

ベンジャミン

csswordpresscontact-form-7form-layout
5
Benjamin

おそらく、<p>要素を全幅にするCSSルールがあります。

<div>を使用して、テーマのクラスを使用しないのはなぜですか？

<div class="form-row">
   <div class="grid-33">Number of adults [text your-adults]</div>
   <div class="grid-33">Number of children under 6 years old [text your-little-children]</div >
   <div class="grid-33">Number of children under 12 years old [text your-big-children]</div>
</div>
3
Daniel

テーマグリッドを使用して、2列に並べることができます。以下のスニペットを参照

<div id="responsive-form" class="clearfix">
<div class="vc_row ">
  <div class="vc_col-sm-6">
    <label> Your Name (required)
        [text* your-name] </label>
  </div>
  
  <div class="vc_col-sm-6">
    <label> Your Email (required)
        [email* your-email] </label>
  </div>
</div>
<label> Arrival date
[date date-79 id:Arrivaldate date-format:mm/dd/yy] </label>

<label> Departure date
[date date-80 id:Departuredate date-format:mm/dd/yy] </label>

<label> How many guests?
    [text your-guests] </label>

<div class="form-row">
       <p>Number of adults [text your-adults]</p>
       <p>Number of children under 6 years old [text your-little-children]</p>
       <p>Number of children under 12 years old [text your-big-children]</p>
</div>

Select your preferred accomodation
    [checkbox your-accomodation use_label_element "Wayan (Two-story villa)" "Kadek (Two-story villa)" "Nyoman (Garden bungalow)" "Kehut (Garden bungalow)" "Pasca (Garden bungalow)"]

Do you need transportation to the hotel ? 
[radio your-pickup default:1 use_label_element exclusive "No transport needed" "Transport from Denpasar airport" "Transsport from Gilimanuk Ferry"]

<label> Do you want us to arrange motorbike rental for you ? 
    [text your-motorbikes] </label>

<label> Tell us more about what brings you to Balian
    [textarea your-message] </label>

[submit "Send"]

</div>
2
aje

あなたのコードはうまく機能しています。CSSに構文エラーがあります。 HTML内の要素の名前はform-rowですが、CSSではform_rowと記述しています。 CSSセレクターをform-rowに変更しただけで、すべてが期待どおりに機能します。

.form-row p {
  display: inline-block;
}
1
Kemal Umut

Contact Form 7の設計ソリューションの欠如に非常に不満を感じていました。1年前、cf7で複雑なレイアウト要件を持つ複数のフォームを作成する必要がありました。この問題を解決するために、レスポンシブなグリッドレイアウト設計を可能にするプラグインの作成と、フォームビルディングへのモジュラーアプローチ、つまり、既存のフォームをより大きなフォームコンストラクトに再利用できる機能を設定しました。 CF7のスマートグリッドレイアウト設計 をリリースしました。ダッシュボードにグリッドUIエディターがあり、1列に3列のレイアウトを作成できます。 CSSをいじる必要はありません。レイアウトはページにレンダリングされます。また、応答性も高く、携帯電話ではデフォルトで3行になります。

試してみて、あなたの考えを教えてください。

1
Aurovrata

次のようにHTMLテーブルを使用できます。

<table>
    <tr>
        <td>Number of adults [text your-adults]</td>
        <td>Number of children under 6 years old [text your-little-children]</td>
        <td>Number of children under 12 years old [text your-big-children]</td>
    </tr>
</table>
0
pinakion

HTMLテーブル構造を使用できます!!!

<table>
  <tr>
    <td colspan="2">[text* Name placeholder "Your Name"]</td>
  </tr>
  <tr>
    <td>[text* Class placeholder "Enter Class"]
    </td>
    <td>
      [text* Medium placeholder "Enter Medium"]
    </td>
  </tr>
</table>
[submit "Submit"]
0
sandeep autade

このビデオの説明がお役に立てば幸いです

連絡フォーム7のCSSコードを次に示します。

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
}
/* Clear floats after the columns */
.row:after {
    display: table;
    clear: both;
}

#knopka
{
    color: #fffff;
    background: #8F8CA0;
    width: 90%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
0
Juri Fab