Wordpress Contact form 7 html 集成问题

Question

我之前已经问过这个问题，但这次使用不同的 html 标签 "input"

我更改了所有内容，但没有应用 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时的结果：

是否有任何解决方案可以应用 CSS 在 Contact 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>

Answer 2

contact form 7 插件添加了自己的 HTML 结构。您可以在浏览器中使用 inspector 进行查看。简单的方法是在生成的 html 结构上设置 css 样式，或者您可以通过将此简单代码添加到 [=22 来禁用插件自动生成 p 标签=] 文件.

add_filter('wpcf7_autop_or_not', '__return_false');

Wordpress Contact form 7 html 集成问题

Wordpress Contact form 7 html integration problem

html

css

wordpress

contact-form-7