html - Wordpress Contact form 7 html整合问题

Question

我之前已经问过这个问题，但这次使用不同的 html 标签“输入”

我改变了一切，但没有应用 CSS。

HTML 代码：

<form action="#" class="contact-one__form row">
                <div class="col-lg-6">
                    <input type="text" placeholder="First name" name="fname">
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <input type="text" placeholder="Last name" name="lname">
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <input type="text" placeholder="Email address" name="email">
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <input type="text" placeholder="Phone number" name="phone">
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-12">
                    <textarea name="message" placeholder="Write message"></textarea>
                    <div class="text-center">
                        <button type="submit" class="thm-btn contact-one__btn">Submit Now</button>
                    </div><!-- /.text-center -->
                </div><!-- /.col-lg-12 -->
            </form>

结果：

我的联系表格 7 集成：

<form action="#" class="contact-one__form row">
                <div class="col-lg-6">
                    [text* nomcontact placeholder "Nom"]
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    [text* prenomcontact placeholder "Prenom"]
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    [email* emailcontact placeholder "Adresse Email"]
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    [tel* telcontact placeholder "Numero de Telephone"]
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-12">
                    [textarea* textarea-contact placeholder "Votre Message"]
                    <div class="text-center">
                        [submit class:thm-btn class:contact-one__btn "Envoyer"]
                    </div><!-- /.text-center -->
                </div><!-- /.col-lg-12 -->
            </form>

集成 WordFence 7 时的结果：

在使用 Contact Form 7 的表单上应用 CSS 是否有任何解决方案？

标签： htmlcsswordpresscontact-form-7

Answer 1

您需要将列包装在一行中。特定行中列的总和不应大于 12。

<form action="#" class="contact-one__form row">
  <div class="row">
    <div class="col-lg-6">
        [text* nomcontact placeholder "Nom"]
      </div>
      <div class="col-lg-6">
        [text* prenomcontact placeholder "Prenom"]
      </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
        [email* emailcontact placeholder "Adresse Email"]
      </div>
      <div class="col-lg-6">
        [tel* telcontact placeholder "Numero de Telephone"]
      </div>
  </div>

  <div class="row">
    <div class="col-lg-12">
        [textarea* textarea-contact placeholder "Votre Message"]
        <div class="text-center">
          [submit class:thm-btn class:contact-one__btn "Envoyer"]
        </div>
      </div>
  </div>
</form>