插件名称:
Contact Form 7
插件地址:
https://wordpress.org/plugins/contact-form-7/
1 Form栏位设置:
标题
可以设置不同用途(一般直接联系是最多)
代码
默认区域
代码1(经典代码)
<label> Your Name (*)[text* your-name]
</label><label> Your Company[text text-876]</label>
<label> Your Email (*)[email* your-email] </label>
<label> Subject (*)[text your-subject] </label>
<label> Your Message[textarea your-message] </label>
[submit “Send”]
代码2(附带多选框功能表单)
<p>Your Name (*)<br />
[text* your-name] </p>
<p>Your Email (*)<br />
[email* your-email] </p>
<p>Company Name <br />
[text* company-name] </p>
<p>Your Phone number <br />
[text* your-phone no.] </p>
<p>What did you use to make your products? (*)<br />
[checkbox* checkbox-778 exclusive “Handmade” “Machine” “New Products” “Others”] </p>
<p> Your Message <br />
[textarea* inquiry-item placeholder “Please write down your specific requirements here”] </p>
<p>[submit “Submit”]</p>
代码3(多选并排式表单)
<div id=”two-column”>
<div id=”left”>
<p>[text* placeholder “Your Name*”]</p>
<p>[text* placeholder “Departure*”]</p>
<p>[text* placeholder “Cargo Description*”]</p>
</div>
<div id=”right”>
<p> [email your-email placeholder “Your email*”] </p>
<p>[text* placeholder “Arrival*”] </p>
<p>[text* placeholder “Transportation Method*”] </p>
</div>
<p> [textarea your-message placeholder “Your Message”] </p
<p>[submit “Send”]</p
</div>
此段代码需配合CSS使用。讲下面这段CSS复制到Appearance–>Customize–>Additional CSS
#two-column{
width: 100%;
}
#two-column #left{
width: 45%;
float: left;
}
#two-column #right{
width: 45%;
float: right;
}
代码4 (文字内嵌进表单框)
<p>[text* your-name placeholder “Your Name”]</p>
<p>[email* your-email placeholder “Your Email”] </p>
<p> [text your-subject placeholder “Your Subject”] </p>
<p> [textarea your-message placeholder “Your Message”]</p>
[submit “Send”]
代码5 控制表格长度
<div style=”margin-bottom: 25px;margin-right:550px; [text* your-name placeholder “Name”]</div>
<div style=”margin-bottom: 25px;margin-right:550px;[email* your-email placeholder “Your Email”]</div>
<div style=”margin-bottom: 25px;margin-right:550px; [text your-subject placeholder “Subject”]</div>
<div style=”margin-bottom: 25px;margin-right:550px;[textarea your-message]</label></div>
<div style=”margin-bottom: 25px;margin-right:550px; [quiz quiz-372 “Please answer 12-2=?|10″]</div>
<p class=”fusion-button” style=”text-align:center;”>[submit “Send”]</p>
代码6(邮件列表表单)
<div class=”fusion-two-third fusion-layout-column fusion-spacing-yes”><label aria-label=”Email”>[email your-email placeholder “Insert your email”]</label></div>
<div class=”fusion-one-third fusion-layout-column fusion-column-last fusion-spacing-yes”>[submit “Send”]</div>
2 Mail区域设置:
To:想要收到的邮箱 (设置多个邮箱中间加英文逗号,)
From:XXX@youdomain.com(建议使用企业邮箱)
Subject:注意对应代码区域的内容
Additional headers: 这里的功能是直接可以回复客户表单留的邮箱地址
Messge:注意对应代码区域的内容
3 Message & Additional Setting
Messgae是提示语,当客户成功提交表单之后,系统提示你的邮件已经发送成功。当客户提交表单出现故障时,也会有相应的提示。这个提示内容用系统自带的就可以。
Additional Setting是放代码的地方,如果对表单css这些改动的话,把代码放这里。再就是可以设置GA事件。
设置好Form和Mail之后,就可以点击保存了,保存成功之后,系统会给你一个表单的代码,你copy这个代码到你想要放表单的位置,就可以成功显示出你要的表单了。
4 减少垃圾邮件
使用谷歌验证(免费)获取上面需要的内容
https://www.google.com/recaptcha
表单出现谷歌验证(验证成功才能发联系表单)
额外:
要想成功收到表单邮件还需要实现网站可发邮件功能(大部分的服务器不具备)
SMTP发件插件
https://wordpress.org/plugins/wp-mail-smtp/
搭配功能:
记录后台询盘记录插件
Database for Contact Form 7, WPforms, Elementor forms
https://wordpress.org/plugins/contact-form-entries/
增加国家和手机号前缀插件
Country & Phone Field Contact Form 7
https://wordpress.org/plugins/country-phone-field-contact-form-7/