WordPress表单插件Contact form 7使用方法

最近更新时间: August 24, 2024

Contact form 7是一款比较常用的Wordpress表单提交插件,不但形式灵活、操作简单而且应用广泛,可以满足我们对大部分网站表单的需求,比如客户留言提交等,虽然有免费版和付费版,但是一般免费版已经足够使用。

Contact form 7设置方法:

  1. 步骤一:登录网站后台,在左侧栏找到并依次点击“Plugins”-“Add Plugins”-搜索框输入“Contact form 7”然后进行安装并激活;
    Contact form 7插件
  2. 步骤二:网站后台左侧栏找到“Contact”-“Contact Forms”,可以添加或者选择点击“Edit”编辑默认的表单;
    编辑表单
  3. 步骤三:在表单编辑页面,我们可以根据自己的需要修改表单选项,比如添加电话、下拉选项、文件提交等;
    添加表单选项

    这里的每个选项都会以表单的形式呈现在用户面前,比较常用的有:姓名、邮箱、电话、地区、留言内容、文件上传等,填写格式按照和默认的一样(选择添加各项参数后会自动生成代码),同时我们也可以在这里直接添加css代码以优化表单样式,或者添加相应的id或者类,然后在单独的css文件中添加样式。

    表单选项属性
  4. 步骤四:设置转发目标邮箱(即表单留言会发送到哪个邮箱,一般也是我们网站的管理员邮箱),正常情况下,Contact form 7表单提交成功之后,会将表单内容直接转发到设定的邮箱里面,所以这一步非常重要,但也是最容易出问题的地方;
    邮箱转发内容设置
  5. 在“To”选项中,填写要发送的目标邮箱地址,其它选项可以默认,额外的表单选项,我们可以在“Message body”中添加上;

  6. 步骤五:表单提示信息设置(修改),比如提交成功后提示语,出错提示语等,设置完成之后,我们点击保存;
    表单提示语设置
  7. 步骤六:在网站中调用Contact form 7表单,主要有两种方法:

    1.返回到“Contact Forms”页面,找到表单对应的“简码”,然后在网站后台找到对应的页面,点击编辑,将其直接放到对应位置即可(不是html代码而是编辑框里面直接添加);

    表单简码

    2.使用如下调用代码,将其插入到对应的页面或者模板代码中,id对应表单简码中的id。

    <?php echo do_shortcode( '[contact-form-7 id="123456" title="form"]' ); ?>

  8. 步骤七:表单测试,找到对应的表单,填写测试数据,查看目标邮箱是否能正常收到表单邮件。

Contact form 7常见问题:

1.Contact form 7收不到邮件怎么办?

因为表单转发到邮箱需要借助相应邮箱服务器,有些网站服务器已经配置好(比如dreamhost等),这种正常情况下都可以收到邮件,但是大部分并没有相关配置(国内的居多),所以经常会出现收不到邮件的情况。这里有两种解决方法:

1)不使用邮箱接收表单内容,而是通过安装“Flamingo”插件直接查看表单内容信息,方法非常简单,直接安装“Flamingo”插件(和Contact form 7同一个开发者),不用额外设置,激活之后点击Flamingo就可以查看得到。

Flamingo插件

建议即使可以正常接收邮件的网站也可以安装这个插件,它是将表单内容存储在本地,不仅可以当做备份还可以在邮件发送不成功时仍然可以通过Flamingo查看,避免造成遗漏。

2)如果你对邮件转发有执念的话,可以通过安装WP Mail SMTP插件并设置Gmail邮箱转发(Gmail在外贸站用的比较多,也可以是其他邮件)来实现,并且这个设置对于使用网站自带的评论做的表单转发邮箱同样适用。

2.不会css代码如何美化表单样式?

可以通过安装“Conact form 7 skins”等表单美化插件,根据自己需要选择不同的表单样式。

3.用户在Conact form 7中提交成功之后,如何跳转到一个新的提交成功页面?

这个多用于谷歌竞价广告中记录转化次数使用,比如,将转换代码添加到表单提交成功页面,那么每出现一次这个页面,就可以当做是统计一次转化。对此我们可以通过在Conact form 7表单下方加入以下代码实现:

<script>
document.addEventListener( 'wpcf7mailsent', function( event )
{ location = '/successfully/'; },
false );
</script>

注意需要提前创建一个提交成功页面“/successfully/”。

以上即是关于Conact form 7表单使用方法的相关介绍。

版权声明©:希望对您会有所帮助;转载请注明出处。

欢迎留言评论!

Your email address will not be published. Required fields are marked *

大简笔记微信公众号

欢迎关注微信公众号随时了解最新知识分享

E-mail: hellojack202102@gmail.com

Privacy Policy Sitemap

Copyright 2024 Dajian Biji All Rights Reserved.