如何将Contact Form 7字段添加到我的自定义HTML代码中? [英] How to add Contact Form 7 fields to my custom HTML code?
问题描述
如何将Contact Form 7的简码字段添加到具有CSS类名的自定义HTML?
How can I add Contact Form 7 shortcode fields to custom HTML with class name of CSS?
我的HTML表单代码:
My HTML form code:
<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表格的示例:
Example of Contact form 7 form :
<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"]
推荐答案
您可以像这样添加类,这是将html转换为联系表格7字段的示例,请参见区别
You can do add class like this way this is example of converting html to contact form 7 field please see difference
例如1)html
<input type="email" class="form-control class:icon icon-email" id="email" placeholder="Enter email address" name="myemailaddress">
2)联系表格7编辑器
2) Contact Form 7 editor
[email* myemailaddress class:form-control class:icon class:icon-email id:email placeholder "Enter email address"]
联系表7中有许多输入类型,请参见此处( http://prnt.sc/pkdymc )您必须从中使用,因此基本上我们必须处理联系表7语法的输入类型,并且可以添加class,id和占位符,所有希望通过此方法清除的内容
In contact Form 7 there are many Input types see here (http://prnt.sc/pkdymc) You have to use from that so basically we have to take care of contact form 7 syntax for input types and you can add class,id and placeholder everything hope you are clearing with this
有关更多信息,我已在联系表单7编辑器中将自定义HTML"更改为联系表单字段"
For More I have changed Your Custom Html to Contact Form Fields in contact form 7 editor
请在Contact Form 7编辑器中的以下代码中输入您想要的
Please Put Below Code in Contact Form 7 editor You will get Exactly you want
<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"]
希望您会清除!
这篇关于如何将Contact Form 7字段添加到我的自定义HTML代码中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!