如何将 Contact Form 7 字段添加到我的自定义 HTML 代码？

Posted 2023-03-05

【中文标题】如何将 Contact Form 7 字段添加到我的自定义 HTML 代码？

【英文标题】：How to add Contact Form 7 fields to my custom HTML code?

【发布时间】：2020-02-13 18:36:04

【问题描述】：

如何将 Contact Form 7 短代码字段添加到具有 CSS 类名的自定义 html？

我的 HTML 表单代码：

<div class="form-section">
  <strong class="form-heading"> Your Details </strong>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Your Name <span class="required">(required)</span></label>
        <input name="yourname" type="text" class="form-control icon icon-person" placeholder="First name, Surname" />
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Phone Number <span class="required">(required)</span></label>
        <input name="phonenumber" type="text" class="form-control" placeholder="">
      </div>
    </div>
    <div class="col-sm-6 col-xs-12 col-lg-12">
      <div class="form-group">
        <label> Email Address <span class="required">(required)</span> </label>
        <input name="email" type="text" class="form-control icon icon-email" placeholder="Enter email address" />
      </div>
    </div>
  </div>

联系表格 7 表格示例：

<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"]

【参考方案1】：

您可以像这样添加类，这是将 html 转换为联系表单 7 字段的示例，请查看差异

例如 1) html

 <input type="email" class="form-control class:icon icon-email" id="email" placeholder="Enter email address" name="myemailaddress">

2) 联系表格 7 编辑器

[email* myemailaddress class:form-control class:icon class:icon-email id:email placeholder "Enter email address"]

在联系表格 7 中有许多输入类型，请参见此处 (http://prnt.sc/pkdymc) 您必须从中使用，所以基本上我们必须处理输入类型的联系表格 7 语法，您可以添加类、ID 和占位符所有内容希望您对此有所了解

更多我已将您的自定义 Html 更改为联系表单 7 编辑器中的联系表单字段

请在 Contact Form 7 编辑器中输入以下代码，您将得到您想要的

<div class="form-section">
  <strong class="form-heading"> Your Details </strong>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Your Name <span class="required">(required)</span></label>
       [text* yourname class:form-control class:icon class:icon-person placeholder "First name, Surname"]
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Phone Number <span class="required">(required)</span></label>
         [tel* phonenumber class:form-control placeholder "Phone Number" ]
      </div>
    </div>
    <div class="col-sm-6 col-xs-12 col-lg-12">
      <div class="form-group">
        <label> Email Address <span class="required">(required)</span> </label>
         [email* email class:form-control class:icon class:icon-email placeholder "Enter email address"]
      </div>
    </div>
  </div>
[submit class:btn-default class:btn "submit"]

希望你能清除！

【讨论】：

是的，我已经在 wordpress 中制作了模板，并在该模板中获取了此表单，并且显示效果很好。请看一下 (prnt.sc/pkeg46)

【参考方案2】：

这段来自我最近建立的活动 Wordpress 网站的代码将指导您 _ 尽管您需要进行一些更改以适合您自己的表单并添加您在 CSS 中创建的任何类

最重要的是要记住每个类必须单独添加

我已经为您可能拥有的任何其他 CSS 类保留了必要的 Bootstrap 类 +“在此处添加 CSS 类”

希望对你有帮助

<div class="form-group">
    <label for="yourname">Your Name (required)</label>
    [text* your-name id:yourname class:form-control class:ADD CSS CLASS HERE ]
</div>

<div class="form-group">
    <label for="youremail">Your Email (required)</label>
    [email* your-email id:youremail class:form-control class:ADD CSS CLASS HERE]
</div>

<div class="form-group">
    <label for="yourmessage">Your Message (required)</label>
    [textarea* your-message id:yourmessage class:form-control class:ADD CSS CLASS HERE]
</div>

[submit class:btn class:ADD BUTTON CLASS HERE "Send"]

【讨论】：

我还应该说，为了让您的帖子在未来对其他人更有用，并且因为它主要涉及样式，您应该删除php标签并将twitter-bootstrap标签添加到您的问题中； )

@KrishnaSavani 非常感谢你的完美工作