Question

大家好，我需要联系表格7的帮助，现在所有输入区域都垂直放在一列中，是否可以在右侧添加一个输入区域，我已将链接附加到屏幕截图了吗？我如何在Wordpress中做到这一点？

外观（右侧输入区域）：https://ibb.co/vJxJ7kk

WP代码

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Answer 1

是的！使用一些CSS魔术，您可以获得所需的任何布局。因此，即使使用某些代码也可以实现此布局。我用了一些flexbox代码来制作结构。

有关flexbox的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

演示

我将短代码替换为HTML，以使我的演示更加可见。请用您自己的CF7短代码替换输入。

.prefix-form-container {
 display: flex;
}

.prefix-column {
 display: flex;
 flex-direction: column;
 padding: 10px;
}

.prefix-label {
  display: block;
}

/* demo code */
input, textarea {
 width: 100%;
}

<div class="prefix-form-container">
  <div class="prefix-column">
    <label class="prefix-label"> Your Name (required)
      <input type="text"> </label>

    <label class="prefix-label"> Your Email (required)
      <input type="text"> </label>

    <label class="prefix-label"> Subject
      <input type="text"> </label>
  </div>
  <div class="prefix-column">
    <label class="prefix-label"> Your Message
      <textarea></textarea> </label>
  </div>
</div>
  <div>
    <button type="submit">Send form</button>
  </div>

联系表格7-更改样式

1 个答案: