Contact 7 表单布局

Question

传奇队。我需要你的帮助。我需要这样的表格

第 1 列第 1 行：姓名第 2 行：电子邮件第 3 行 Phone

第 2 列行跨度：消息

<div class="wpcf7-wrap">
<div class="col-sm-3">
  [text* your-name placeholder "Name:"]
</div>

<div class="col-sm-3">
   [email* your-email placeholder "Emai:"]
</div>

<div class="col-sm-3">
 [tel* tel-708 placeholder "Phone:"]
</div>

 <div class="col-xs-6">
    [textarea your-message placeholder "Message:"]
 </div>

<div class="col-xs-12 wpcf7-button-wrap">
  [submit "Contact Us"]
</div>

Answer 1

这样的事情的关键是使用 CSS Grid 或 Flexbox。对于这个特定的问题，Flexbox 可以工作，所以我将使用它。

Flexbox 可以平衡其 children 的高度，因此关键是使用两列，其中左侧也是一个 Flexbox 并包含三行。你没有提到你想要提交按钮的位置，所以我把它放在外面了：

<div class="wpcf7-wrap">

    <div class="left-column">

        <div class="col-sm-3">
            [text* your-name placeholder "Name:"]
        </div>

        <div class="col-sm-3">
            [email* your-email placeholder "Emai:"]
        </div>

        <div class="col-sm-3">
            [tel* tel-708 placeholder "Phone:"]
        </div>

    </div>

    <div class="right-column">

        <div class="col-xs-6">
            [textarea your-message placeholder "Message:"]
        </div>

    </div>

</div>

<div class="col-xs-12 wpcf7-button-wrap">
    [submit "Contact Us"]
</div>

从那里您可以使用 Flexbox 创建列：

.wpcf7-wrap {
    display: flex;
    align-items: stretch;
}

.left-column {
    display: flex;
    flex-flow: column;
}

.left-column > * {
    flex: 1 1 0;
}

希望这至少能让您入门！

Here's a fiddle.

Contact 7 表单布局

Contact 7 Form Layout

wordpress

contact-form-7