Wordpress Contact form 7 html整合问题

Posted 2023-03-05

【中文标题】Wordpress Contact form 7 html整合问题

【英文标题】：Wordpress Contact form 7 html integration problem

【发布时间】：2020-04-09 22:38:45

【问题描述】：

我之前已经问过这个问题，但这次使用不同的 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 有什么解决方案吗？

【参考方案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>

【参考方案2】：

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

add_filter('wpcf7_autop_or_not', '__return_false');