WordPress表单插件Contact form 7

插件名称:

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/

0
分享到: