将标题和字段放在其他联系表单旁边 7.

Question

我使用联系表格7。

表单中的 html 代码：

<div class="clearfix">
    <div id="left">
        First name [text first-name]<br/>
        Last name [text last-name]<br/>
        How Did You Find Us? [text text-find-us]
    </div>
    <div id="right">
    Email [email* your-email] <br/>
    Phone [text your-phone]
    </div>
</div>
Subject [text* your-subject] <br/>
Message [textarea* your-message]<br/>
[submit "Send"]

如何将"名字"与用户键入他/她的名字的框文本框放在同一行中？

Answer 1

不确定联系表单 7 如何使用括号内的标签呈现 html。 您可以使用 CSS/HTML 来定位项目。

.HTML：

<div class="clearfix">
    <div id="left">
    <span class="label">First name</span><span class="form-input">[text first-name]</span><br/>
    <span class="label">Last name</span><span class="form-input">[text last-name]</span><br/>
    <span class="label">How Did You Find Us?</span><span class="form-input">[text text-find-us]</span>
    </div>
    <div id="right">
    <span class="label">Email</span><span class="form-input">[email* your-email]</span><br/>
    <span class="label">Phone</span><span class="form-input">[text your-phone]</span>
    </div>
</div>

.CSS：

div#left {
  float: left;
  width: 400px;
}
div#right {
  float:left;
  width: 400px;
}
span.label {
  float: left;
  width: 180px;
}
span.form-input {
  float: left;
  width: 200px;
}

小提琴：https://jsfiddle.net/mediaguru/f1e68999/