8

我正在使用联系表 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>

我想在一行上显示表单行元素的 p 元素。我试过这个 CSS 行：

.form_row p{
display: inline-block
}

但它什么也没做。我觉得我错过了什么，有人可以帮忙吗？

提前谢谢了，

本杰明

4

7 回答 7

9

您可能有一个 CSS 规则使<p>元素全宽。

为什么不使用<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>
于 2017-03-18T08:23:55.450 回答
5

您可以简单地使用 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"]
于 2018-08-18T08:23:44.487 回答
3

您可以使用主题网格将其分为两列。见下面的片段

<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>

于 2017-03-18T08:26:47.967 回答
2

您可以按如下方式使用 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>
于 2017-07-19T18:47:49.343 回答
1

我对 Contact Form 7 缺乏设计解决方案感到非常沮丧。一年前，我的任务是在 cf7 中创建多个具有复杂布局要求的表单。为了解决这个问题，我着手创建一个插件，允许响应式网格布局设计以及具有模块化方法来构建表单的能力，即能够将现有表单重用到更大的表单结构中。我刚刚发布了CF7 的智能网格布局设计，它在仪表板中提供了一个网格 UI 编辑器，允许您在单行中构建 3 列布局。你不需要乱用css，布局会在你的页面上呈现。它也是响应式的，在手机上默认为 3 行。

试一试，让我知道你的想法。

于 2017-11-06T15:22:35.443 回答
1

您的代码对我来说运行良好，只是您的 CSS 中有语法错误。HTML 中元素的名称是您form-row编写的 CSS中的名称form_row。我刚刚将 CSS 选择器更改为form-row，一切都按预期工作。

.form-row p {
  display: inline-block;
}
于 2018-04-27T13:21:28.910 回答
0

希望这个视频教程能帮到你

这是我的联系表格 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;
}
于 2017-12-26T21:49:59.133 回答