[英]How to add Contact Form 7 fields to my custom HTML code like the screenshot below?
[英]How to add Contact Form 7 fields to my custom HTML code?
如何使用 CSS 的 class 名称将联系表 7 短代码字段添加到自定义 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"]
这段来自我最近建立的活动 Wordpress 网站的代码将指导您 _ 尽管您需要进行一些更改以适合您自己的形式并添加您在 CSS 中创建的任何类
最重要的是要记住每个 class 必须单独添加
我已经为任何其他 CSSZ612F2AZFBEDZ CLASS HERE 保留了必要的引导类
我希望它有帮助
<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"]
您可以像这样添加 class 这是将 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 语法,您可以添加 class,id和占位符一切希望你用这个清除
有关更多信息,我已将您的自定义 Html 更改为联系表单 7 编辑器中的联系表单字段
请把下面的代码放在联系表格 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"]
希望你会清除!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.