Contact Form 7 输入字段使用 flexbox 包装

Question

所以我正在尝试使用 WordPress Contact Form 7 插件创建这样的表单，我认为它应该可以工作并且是准确的，但显然不是：

相反，我只剩下这个：

这是HTML：

<div class:input-flex>
      [text* your-name class:text-color class:mont-regular placeholder "Vārds, Uzvārds*"]
      [email* your-email class:text-color class:mont-regular placeholder "E-pasts*"]  
      [tel* phone-number class:full-width class:mont-regular class:text-color placeholder "Telefons*"]
      [textarea* question  class:full-width class:mont-regular class:text-color placeholder "Jautājums, vai komentārs*"]
</div>

这是布局的 CSS：

.input-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  width: 100%;
  margin-bottom: 10%;
}


input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  box-sizing: border-box;
  border: 0;
  border-radius: 6px;
  padding: 2%;
  margin: 10px;
  flex-grow: 1;
  background: rgba(196, 196, 196, 0.4);
  resize: none;
  outline: none;
  letter-spacing: -0.015em;
}

.full-width{ 
    width: 100%;
    color: #2F4858;
}

提前致谢。

编辑：当我检查元素时显示：

<div class:input-flex>
      <span class="wpcf7-form-control-wrap your-name">
           <input type="text" name="your-name" value="Vārds, Uzvārds*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required text-color mont-regular" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap your-email">
           <input type="email" name="your-email" value="E-pasts*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email text-color mont-regular" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap phone-number">
          <input type="tel" name="phone-number" value="Telefons*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel full-width mont-regular text-color" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap question">
          <textarea name="question" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required full-width mont-regular text-color" aria-required="true" aria-invalid="false">Jautājums, vai komentārs*</textarea> 
      </span>
   </div>

这些span来自哪里？

Answer 1

删除 <div class:input-flex> 并改用 <div class="input-flex">

Answer 2

你可以试试这个:

<div class="form">
      <div class="input-flex">
        [text* your-name class:text-color class:mont-regular placeholder "Vārds, Uzvārds*"]
        [email* your-email class:text-color class:mont-regular placeholder "E-pasts*"]  
      </div>
     [tel* phone-number class:full-width class:mont-regular class:text-color placeholder "Telefons*"]
     [textarea* question  class:full-width class:mont-regular class:text-color placeholder "Jautājums, vai komentārs*"]

</div>

<style>
.input-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10%;
}
</style>

显然，它不会是完美的，这完全取决于您的使用情况。要记住的重要一点是，您必须专门包含要在一行中显示的元素，因为它们具有与其他元素不同的 'width'。

您还可以将其他元素包裹在 div 中以对其进行控制。

Answer 3

将 input[type="text"] 和 input[type="email"] 的宽度设置为父容器的 50%。您可以通过以下任何属性执行此操作：width、flex 或 flex-basis.

P.S。您可能还想使用 gap（在父容器上）而不是边距（在弹性项目上）来控制弹性项目之间的 space。

Answer 4

感谢大家的回复，我明白了。

我所做的只是：

摆脱了 <span> 和 <br> 标签，它们在我编译代码时随机生成并弄乱了我的代码。为此，将其放入 functions.php 文件：

remove_filter('the_content', 'wpautop');

add_filter('wpcf7_form_elements', function($content) {
  $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/>/i', '', $content);

  $content = str_replace('<br />', '', $content);
      
  return $content;
});

设置我要在同一行显示的字段的宽度（在CSS文件中）：

input[type="text"],
input[type="email"]{
  width: 40%;
}

Contact Form 7 输入字段使用 flexbox 包装

Contact Form 7 input field wrapping using flexbox

html

css

contact-form-7

flexbox