Contact form 7插件使用介绍和常见问题解答

Contact form 7 是一款非常流行的免费表单插件,功能很强大,操作也不复杂,比曾经用过的emailmeform要更好,下面介绍使用方法。Conact form 7也简称CF7

1. 安装并激活Contact form 7插件

搜索 contact form 7 即可找到,作者是日本人,所以图标是富士山,选择install并activate it

contact form 7使用介绍

2. 新建并设置Contact form 7表单

安装完成后,WP后台的左侧会出现一个contact 的菜单,这就是contact form 7的快捷菜单

contact form 7

在contact菜单下面Add new即可新建表单,填好名字如Inquiry,保存即可。

contact form 7

Form的设置

Form里面是表格的元素的设置,默认生成的有your name, your email, subject, your message,你也可以根据需要点击FORM顶部的相关菜单,添加相应的功能,如URL等,方法:把光标放置到一个空行,点击URL,会弹出一个窗口设置:

contact form 7

contact form 7

required field 视需要打勾或不打勾

Name 保持默认即可
Default value 填上your website
use this text as the placehold of the field, 打上勾
this requires the author's URL 不打勾
其他的暂时不填, 然后点insert tag,即可插入到表格中了,然后点击SAVE。

你可以根据需要添加其他的一些表单模块。

MAIL设置

这里是设置相关的发信息资料,如收到邮件的格式,发送人和收件人邮箱,邮件的标题等

contact form 7

Message设置

这里面是一些提示信息文字的设置,一般保持默认即可

contact form 7

Additional settings

这里面可以增加一些扩展的代码,下文会讲述到常用的一些应用。

contact form 7-12

3. 如何在网站中使用Contact form 7表单

当以上设置好以后,把标题下面的一段代码(shortcode)复制,并粘贴到post 或page或portfolio的编辑框里面,然后点update即可完成添加。

contact form 7使用

contact form 7

ccontact form 7

完成以后,一定要发一个测试询盘,看是否能发送成功,看是否能收到测试的所有信息,切记! 以免错过客户的百万大单!

4. 10种好看的Contact form 7 表单代码

以下是Hunk用css实现的10种还不错的contact form 7表单,如果有需要可以拿去使用

这10种contact form 7样式的示范链接是http://www.hunktest.com/contact-form-7/

使用方法如下

  • 首先新建一个contact form 7,然后把下列对应表单代码放在Contact form 7的FORM当中,然后保存或更新
  • 其次,把对应的CSS代码放到你网站的CSS文件当中,如果你使用的是AVADA主题,那就是放在theme options - custom css中,然后更新
  • 再次,把[your-phone]放在contact form 7的Mail菜单中的message body中(如果这一个表单有这一项的情况下),然后保存
  • 最后,把这新建的这个表单放到需要显示的页面, 保存,刷新即可看到效果。

另外,所有绿色的button都是没有自定义的,跟你的网站设置的button会一致,你把这个表单放在你网站后,它自动变会成设置的颜色。

cf71

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf71"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p>[text* your-name placeholder "Your name*"]</p>
<p>[email* your-email placeholder "Email Address*"]</p>
<p>[text your-subject placeholder "Your website*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.nodisplay{display:none!important;}

cf72

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf72"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><div class="outer"><div class="cf7part onethird"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onethird"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div>
<div class="outer"><div class="cf7part onethird"><div class="inner">[text your-subject placeholder "Your website*"]</div></div></div></p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.onethird{width:33.33333333333%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onethird{width:100%!important;}}

cf73

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf73"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div></p>
<p>[text your-subject placeholder "Your website*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.onethird{width:33.33333333333%;float:left!important;}
.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onethird,.onehalf{width:100%!important;}}

cf74

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf74"><p class="cf7-title" style="font-size:27px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div></p>
<p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text your-phone placeholder "Your Phone*"]</div></div> </div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[text your-subject placeholder "Your website*"]</div></div></div></p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p class="submit">[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onehalf{width:100%!important;}}

.hunkcf74 .wpcf7-text{border:2px solid #e0e0e0!important;height:50px!important;font-size:16px!important;border-radius:5px;}
.hunkcf74 textarea{border:2px solid #e0e0e0!important;font-size:16px!important;border-radius:5px;}
.hunkcf74 .submit{text-align:center;font-size:16px!important;}
.hunkcf74 .submit .wpcf7-submit{padding:15px 60px!important;background:#fff!important;color:#3B5998!important;border:2px solid #3B5998!important;border-radius:5px;font-weight:700!important;}
.hunkcf74 .submit .wpcf7-submit:hover{background:#3B5998!important;color:#fff!important;}

由于本表单比默认表单多了一个表格,所以需要还需要在Contact form 7设置菜单- Mail里面的message body里面任何位置加上[your-phone],然后更新即可。如果不加这一段代码,那收到 询盘中就没有客户填的电话信息

cf75

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf75"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><span class="spanleft">Your Name *</span>[text* your-name]</p>
<p><span class="spanleft">Your Email *</span>[email* your-email]</p>
<p><span class="spanleft">Your Website *</span>[text your-subject]</p>
<p><span class="spanleft">Your Discription *</span>[textarea* your-message]</p>
<p class="submit">[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.hunkcf75 .wpcf7-form-control-wrap{display:inline-block;width:250px!important;}
.hunkcf75 .wpcf7-form-control{text-align:right!important;}
.spanleft{width:120px!important;display:inline-block;}

.hunkcf75 .submit{text-align:center;}

.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.spanleft,.hunkcf75 .wpcf7-form-control-wrap{display:block!important;}}

cf76

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf76"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-smile-o"></i> We will answer your email shortly!</p><p><span class="span6">Your Name *</span>[text* your-name]</p>
<p><span class="span6">Your Email *</span>[email* your-email]</p>
<p><span class="span6">Your Website *</span>[text your-subject]</p>
<p><span class="span6">Your Discription *</span>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p class="submit">[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.hunkcf76 .wpcf7-text{border}

.nodisplay{display:none!important;}

.hunkcf76 input,.hunkcf76 textarea{border-width:0 0 1px!important;padding-left:0!important;}
.hunkcf76 .submit{text-align:center!important;}
.hunkcf76 .wpcf7-submit{padding:13px 40px!important;background:#303030!important;border:1px solid #303030!important;}
.hunkcf76 .wpcf7-submit:hover{background:#fff!important;color:#303030!important;}

cf77

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf77"><p class="cf7-title" style="font-size:27px;text-align:center;"><i class="fa fa-envelope-o"></i> Contact us today</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div></p>
<p>[text* your-company placeholder "Your company name*"]</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text your-subject placeholder "Your website*"]</div></div> </div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[text your-phone placeholder "Your phone *"]</div></div></div></p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p class="submit">[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onehalf{width:100%!important;}}

.hunkcf77 input{height:55px!important;background:#eee!important;border:none!important;border-radius:30px!important;font-size:17px!important;padding:15px 30px 15px 30px!important}

.hunkcf77 textarea{height:200px!important;background:#eee!important;border:none!important;border-radius:30px!important;font-size:17px!important;padding:15px 30px 15px 30px!important}
.hunkcf77 .submit{text-align:center!important;}
.hunkcf77 .submit .wpcf7-submit{padding:15px 40px!important;background:#fff!important;border-radius:30px!important;border:1px solid #333!important;color:#333!important;}
.hunkcf77 .wpcf7-submit:hover{background:#333!important;color:#fff!important;}

由于本表单比默认表单多了一个表格,所以需要还需要在Contact form 7设置菜单- Mail里面的message body里面任何位置加上[your-phone],然后更新即可。如果不加这一段代码,那收到询盘中就没有客户填的电话信息

cf78

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf78"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> Get in touch</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div></p>
<p>[text your-subject placeholder "Your phone*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onehalf{width:100%!important;}}

.hunkcf78 input{height:55px!important;font-size:17px!important;padding:15px 40px!important;}
.hunkcf78 textarea{height:200px!important;font-size:17px!important;padding:15px 40px!important;}
.hunkcf78 .your-name input{background:url(http://www.hunktest.com/wp-content/uploads/2018/06/user.png);background-repeat:no-repeat;background-position:10px center;}
.hunkcf78 .your-email input{background:url(http://www.hunktest.com/wp-content/uploads/2018/06/email.png);background-repeat:no-repeat;background-position:10px center;}
.hunkcf78 .your-subject input{background:url(http://www.hunktest.com/wp-content/uploads/2018/06/phone.png);background-repeat:no-repeat;background-position:10px center;}
.hunkcf78 .your-message textarea{background:url(http://www.hunktest.com/wp-content/uploads/2018/06/comment.png);background-repeat:no-repeat;background-position:10px 13px;}

 

cf79

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf79"><p class="cf7-title" style="font-size:25px;color:#fff;"><i class="fa fa-envelope-o"></i> GETTING IN TOUCH!</p>

<p>[text* your-name placeholder "Your name*"]</p>
<p>[email* your-email placeholder "Email Address*"]</p>
<p>[text your-subject placeholder "Your phone*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p class="submit">[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.hunkcf79 input, .hunkcf79 textarea{border:none!important;border-radius:3px!important;}

.nodisplay{display:none!important;}
.hunkcf79 .your-name input{padding:13px 40px!important;background:url(http://www.hunktest.com/wp-content/uploads/2018/06/person.png);background-repeat:no-repeat;background-position:10px center;background-color:#fff;}
.hunkcf79 .your-email input{padding:13px 40px!important;background:url(http://www.hunktest.com/wp-content/uploads/2018/06/email-one.png);background-repeat:no-repeat;background-position:10px center;background-color:#fff;}
.hunkcf79 .your-subject input{padding:13px 40px!important;background:url(http://www.hunktest.com/wp-content/uploads/2018/06/call.png);background-repeat:no-repeat;background-position:10px center;background-color:#fff;}
.hunkcf79 .your-message textarea{padding:13px 40px!important;background:url(http://www.hunktest.com/wp-content/uploads/2018/06/pen.png);background-repeat:no-repeat;background-position:10px 10px;background-color:#fff;}

.hunkcf79 .wpcf7-submit{width:100px!important;height:100px!important;background:red!important;border:3px solid #fff!important;border-radius:50px!important;font-size:16px!important;font-weight:700!important;}
.hunkcf79 .wpcf7-submit:hover{transform:rotate(45deg);}
.hunkcf79 .submit{text-align:center!important;margin-top:-70px!important;}

cf710

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf710"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> Contact us</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div></p>
<p>[text your-subject placeholder "Your website*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">hunk外贸建站</a></div>
</div>

相关CSS代码

.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onehalf{width:100%!important;}}

.hunkcf710{border:none; box-shadow: darkgrey 10px 10px 30px 5px;padding:20px;}
.hunkcf710 .your-name input, .hunkcf710 .your-email input, .hunkcf710 .your-subject input{height:35px!important;}
.hunkcf710 input,.hunkcf710 textarea{border:none!important;background:#eee!important;font-size:15px!important;}
.hunkcf710 .wpcf7-submit{border:1px solid #333!important;background:#333!important;}
.hunkcf710 .wpcf7-submit:hover{background:#fff!important;color:#333!important;}

5. Contact form 7相关问题解答

有朋友问Contact form 7的大小或者宽度怎么控制?

contact form 7默认的宽度是跟页面的宽度一致的,如果想要控制宽度的话,可以放在1/2, 1/3等columns中,这样的话contact form 7的宽度就会变成页面的1/2,1/3了,非常简单。

如果你使用的主题没有1/2或1/3这种列,那可以通过css来控制contact form 7的宽度,代码如下

.wpcf7{width:500px!important;}   修改数字即可修改表格的宽度。

有朋友问Contact form 7的高度怎么控制?

Contact form 7表单的高度由以下几个部分控制

每一个输入框的高度

每一个输入框的下外边框

信息框的高度

所以控制上面的高度只要控制上面三个部分即可,下面是对应的CSS代码

.wpcf7-form-control-wrap input{height:30px!important;}

.wpcf7-form-control-wrap textarea{height:100px!important;}

.wpcf7 p{margin-bottom:10px!important;}

将以上CSS代码放到对应的地方,保存,刷新即可生效。修改CSS代码中对应的值,即可修改成不同的高度。

具体CSS修改的方法可以参考简单的CSS知识

还有人会问contact form 7表单的下面那个提交的button怎么修改样式?

这个button的样式跟你网站默认设置的button样式是一样的,所以只需要调好你网站默认的button样式即可。

如果你网站上面的Button没有随着网站默认的样式改变,那可以使用以下CSS代码来控制

.wpcf7-submit{background:#00afee!important;color:#fff!important;}

.wpcf7-submit:hover{border:1px solid #00afee!important;color:#00afee!important;background:#fff!important;}

修改上面CSS中的颜色值就可以修改不同的颜色。

6. Bluehost空间上的网站使用Contact form 7的常见问题及解决方法

询盘无法发送成功或无法收到,如下图所示

contact form 7发送错误

SOLUTIONS:

注:BLUEHOST上的网站不支持第三方邮箱发送系统邮件,所以如果装了SMTP插件则必须删掉才可以正常使用

Step1

假如你的工作企业邮箱为sales@xxx.com, 那么在CF7表单中将收件人邮箱设置为inquiry@xxx.com,发件人邮箱设置为wordpress@xxx.com,

bluehost email 6

Step2

到BH后台-hosting-email下面去添加3个网站域名后缀的email账号,分别是sales@xxx.com,inquiry@xxx.com, wordpress@xxx.com (无论你的企业邮箱在哪里,这里都必须要添加(不影响本身邮箱的使用),如果你的企业邮箱本身挂在BH上面了,那应该不会出现此问题),如下图

contact form 7 Bluehost add email

contact form 7 Bluehost add email 1

Step3

到bluehost后台 DOMAINS-ZONE EDITOR页面,找到MX(mail exchanger), 点击下面的more,勾选local mail exchanger,并点击change

bluehost email 1

bluehost email 2

bluehost email 3

Step 4

到BLUEHOST后台-hosting -email中选择forwarding 并点击add email forwarder,在address to forward中填上inquiry,在forward to this address中填上你的实际工作企业邮箱,如sales@xxx.com或 XXX@GMAIL.COM都可以,并点击SUBMIT。

bluehost forwarding

bluehost email 5

只要按以上步骤设置,即可成功发送询盘并收到询盘,亲测有效。

contact form 7 succeed

发件问题是解决了,但是有时候收件的邮箱不能接受表单发来的邮件,是怎么回事?

此方法有些朋友试是成功的,而有些朋友试又是不成功的,根本原因在于bluehost空间没有解决好这个发件服务器的问题。

Hunk尝试过所有可能的方法,也没有完全解决。所以如果你实在受不了bluehost受不到询盘的问题话,那可以考虑换到siteground空间,这个空间速度比bluehost要快,而且是能收到客户的询盘邮件的,不会有啥问题。另外,siteground还提交免费网站搬家的服务,所以各方面都比bluehost要好。如果要买siteground空间可以参考这个博客 Siteground购买及使用教程(安装wp和ssl等)

7. 如何获取发件人的IP地址和询盘页面的标题,URL

可以在mail菜单下面的message body后面加上以下代码可以实现:

[_remote_ip]:发送者当前的IP, 然后百度这个IP地址就可以查到这个IP是哪个国家或地区的
[_url]:此询盘的所在的页面的url

[_post_title]:询盘表单所在页面的名称

cf7 tag

当你收到询盘邮件后,就可以在邮件中看到相关的信息。

全部的代码可以查看这里 http://contactform7.com/special-mail-tags/

8. Contact form 7 表单提交成功后如何跳转到其他页面

 

2017-8-29日更新,以下旧方法将在2017年底失效

在Additional settings里面加上以下代码(全部复制,如果不成功,则有可能是里面标点不对,一定要保证代码里面的所有标点符号为英文状态下的标点

on_sent_ok: "location = 'http://example.com/';"

把example.com换成你跳转后的页面URL,保存,即可实现发送询盘后跳转。这样便于进行GA的转化设置。

contact form 7

新的跳转方法如下:

简单方法

使用contact form 7 redirection插件来实现表单完成的跳转,非常简单

1)先搜索contact form 7 redirection 并安装,激活

contact form 7 跳转插件 1

2)进入后台contact菜单,点击进入你想要实现跳转的表单,切换到redirect settings子菜单,然后选择你想要跳转到的page页面(如thank you页面),再保存。

contact form 7 跳转插件 2 contact form 7 跳转插件 3

3)然后刷新页面,并发送测试询盘,看是否成功实现跳转。

复杂方法

1)先获取你想要跳转的CF7表单的ID

直接在你需要跳转的表单上面右键-查看,在源代码码找到id的值 ,并复制,如下图所示,图中的id的值就是双引号里面的值 ,就是wpcf7-f48-o2

cf7 id

2)复制以下的代码,并进入到AVADA网站后台- AVADA- theme options 上面的搜索框,输入before,粘贴到before </body> 这个框中(一个符号都不能少)

<script>
var abc = document.querySelector( '#wpcf7-f40-p2-o2' );
abc.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://www.baidu.com';
}, false );
</script>

并修改代码中标红的部分

abc 这一个为自定义,如果你只有一个表单需要跳转,那就不改它,如果你做多个表单的跳转,那就依次改成其他的字母即可,这个随便定义,只要是英文字母即可,不要带数字

wpcf7-f40-p2-o2  改成第一步复制的那一个id的值

http://www.baidu.com  改成你需要跳转的目的链接即可

全部修改完成,再保存设置

3)做测试,把以上两步做完之后,发布测试询盘,看是否成功跳转。如果没有成功,再仔细根据这几步来找原因!

9. Contact form 7的配套插件 Contact forn DB

这个插件的作用是,当用户通过你的CF7等发询盘的时候,无论是是否发送成功,这个询盘的内容都可以被记录下来,非常好用,可以防止无法发送询盘或无法收到邮件导致的询盘丢失的情况,相当于二保险。

个人觉得比Contact form 7作者出的插件Flamingo还要好用。

在contact form DB的options进行相应的设置即可在查看询盘备份的时候获取询盘的发送者IP及产品的URL还有发送的时间等,非常方便,设置如下图

contact form db设置

2017-3-7号更新:contact form DB插件已经下架,无法在插件库里面搜索到,可以到我的免费资源页面里面下载

10. Contact form 7 插件如何防垃圾询盘

垃圾询盘、垃圾邮件和评论像病毒一样无孔不入,因此要做一些设置来阻止垃圾询盘通过cf7表单来发送,具体方法参考Contact form 7增加防垃圾询盘功能

11. Contact form 7 表单如何实现弹窗效果

参考AVADA主题做出弹窗效果

Summary
Contact form 7插件使用介绍和常见问题解答
Article Name
Contact form 7插件使用介绍和常见问题解答
Description
contact form 7是一款功能非常强大的询单插件,除了简洁的表格风格,它还有多种附加功能,像提交表单跳转,获取客户IP,获取发送询盘的产品URL等。本文主要讲解了Contact form 7的设置方法及contact form db的搭配使用
Author
Publisher Name
Hunk外贸建站营销博客
Publisher Logo

29 条评论在 “Contact form 7插件使用介绍和常见问题解答”

  1. Hunk
    你好,我在使用form7 表单的时候,根据你的教程,添加这些 TAG [_remote_ip]
    却发现发送的邮件,无法接收到,而把这些代码删除了,又可以收到邮件。

    在DB的后台,是可以看到提交的表单的,另外使用你的这个表格代码,contact form提示出错。是怎么回事呢?

  2. Hunk

    我的个人WP网站,contact us , 域名邮箱是用的腾讯的企业邮箱,contact us 页面就是出现了,通过smtp 插件配置好了,但是,发询盘后显示发送成功,邮箱里面收不到询盘,这个问题能解决吗?

    1. bluehost不支持第三方邮件,bluehost网站询盘收不到也是正常的,要想彻底解决这个问题只有换空间

  3. 到BH后台-hosting-email下面去添加3个网站域名后缀的email账号,分别是sales@xxx.com,inquiry@xxx.com, wordpress@xxx.com (无论你的企业邮箱在哪里,这里都必须要添加(不影响本身邮箱的使用)

    关于这个那只要新建两个邮箱就可以了吧,inquiry@xxx.com, wordpress@xxx.com
    这个sales@xxx.com可以是原来企业邮箱设置的业务邮箱,用inquiry@xxx.com这个邮箱接收询盘并转发到sales@xxx.com,可以这样理解吗?

    1. 是到bluehost后台的mail里边去看,不是自己的邮箱里边,bluehost后台不是添加了邮件地址吗?里边有个inbox里边有的。

  4. Current email forwarders

    ERROR: Unable to add new forwarder, check for formatting errors

    Hunk 你好,有自己的qq企业邮箱 sale@xxx.com,按照教程,另外申请了 inquiry@xxx.comwordpress@xxx.com,最后一步设置邮箱转发的时候 提示以上错误,反复操作多遍,确认没有上面提示的格式错误,实在进行不下去了?求助!

    1. Hunk,这个问题我应该去找bluehost客户。 已经解决,他也不知道怎么回事,不过最后他帮我设置好了。还是谢谢你,提供这么详细的操作教程。

  5. Hunk你好,contact form 7默认的宽度是跟页面的宽度一致的,如果想要控制宽度的话,可以放在1/2, 1/3等columns中,这样的话contact form 7的宽度就会变成页面的1/2,1/3了,非常简单。
    请问行高怎么调整?因为放在footer里,明显比其他几块要高,调整下对齐。谢谢!

  6. Hunk你好,按照帖子的办法全设置了,可以发送成功,但是还是收不到邮件,查看了,收到的邮件都在bluehost的自带邮箱里inbox里面,用的阿里云的企业邮箱,不知道咋回事,求助,非常感谢!

        1. 如果不想换的话,只能先忍者了。用contat form 7 db插件查看询盘。如果没有专门做推广,询盘也不多。一天看一次即可。

  7. 注意点:
    1) 记得后台保存后前台提交表单要刷新
    2) 不能有多余的空格,我就是在表格的# wpcf7-XXXX-XXX 有一个空格,导致不能跳转。

  8. hi hunk,

    我遇到一个问题, 需要用到代码, 请教你。

    我用了copy你的的 cf7 表单代码, 如下:

    We will answer your email shortly!
    [text* your-name placeholder “Your name*”]
    [email* your-email placeholder “Email Address*”]
    [text your-subject placeholder “Your website*”]
    [textarea your-message placeholder “Give us your need as specific as possible*”]
    [submit “Send”]

    这个代码中 [submit “Send”] 的button 颜色, 我想替换替换成 color Hex: #ef6f2e, 有办法实现么, 谢谢!

    盼复。

发表评论

电子邮件地址不会被公开。 必填项已用*标注