1. 首页
  2. 教程

WordPress联系我们页怎样集成Contact Form 7自动发邮件?

我们利用WordPress建立企业展示站或者仿站的时,经常要制作一个联系我们页,让用户反馈他们的需求,比如下面这样的页面:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
我们希望用户填写好信息后点击“提交”能够把他填写的信息发送到我们指定的邮箱。怎么做到呢?
要实现将用户填写的信息自动发送到我们的邮箱,要做下面这个步骤:
1、用户填写的表单集成表单插件。我这里选用的是Contact Form 7;
2、网站能够集成邮件发送功能。我是通过smtp的方式,利用阿里云邮件推送的服务,让网站把用户反馈的信息发送邮件到我指定的邮箱的。具体集成的方式我写了一篇教程《WordPress设置smtp邮件发送》,大家可以参考。
下面详细介绍怎样集成表单插件,并且能够自动发送用户填写的信息。
安装Contact Form 7
进入网站后台,点击左侧菜单的插件-安装插件
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
在接下来的页面上搜索“Contact Form 7”,找到相应的插件,点击“立即安装”,如下:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
点击“启用”,这样插件就安装好了。
配置表单和邮件内容
点击“已安装的插件”,可以看到插件列表上多了一个“Contact Form 7”,并且左侧的菜单上也多了一个“联系”的功能。我们点击插件的“设置”,进入插件设置页面:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
在联系表单列表上有一个默认的Contact form 1,中文的是“联系表单 1”
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
都一样,我们打开来看看:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
这边的表单的内容就是由自己去设计了。比如[text* your-name]表示这是一个文本框,用户输入的内容未来会保存在your-name这个变量中,之后可以通过配置“邮箱”把这个变量中的数据发送给我们指定的邮箱中。
我们来看看邮箱中是什么内容:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
可以看到,消息正文里面也有[your-name],这个就是变量。
我们现在看看怎样与具体的页面结合。假设我们已经做好了如下的联系我们页静态html页面:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
它的html代码如下:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
<form name="form" id="form" method="post" action="" onsubmit="cfm_msg();return false;">
    <li><input name="nickname" id="nickname" type="text" class="input1" placeholder="您的姓名:" value=""> <input
            name="contact" id="contact" type="text" class="input2" placeholder="您的电话:"> <input name="email" id="email"
                                                                                               type="text"
                                                                                               class="input3"
                                                                                               placeholder="您的邮箱:"></li>
    <li><textarea name="content" id="content" cols="" rows="" placeholder="您的意见或建议:" class="input4"></textarea></li>
    <li><input name="submit" type="submit" value="提交" class="tjbtn"><input name="action" id="action" type="hidden"
                                                                           value="add"> <input name="reset" type="reset"
                                                                                               class="czbtn" value="重置">
    </li>
</form>
将Contact Form 7的联系表单1修改为:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
邮箱配置如下:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
保存一下表单配置。然后修改联系我们页的代码为
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
也就是把表单主体的代码替换为有Contact Form 7提供的短代码:
注意上面的内容从哪里来的呢?细心的你可能注意到了,在联系表单1上有一个自动生成的短代码,就是那个:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
这样,我们就配置好了。
设置网站管理员邮箱
在左侧设置-常规中,检查管理员电子邮箱地址是不是正确的,将其改正为正确的能够收到邮件的邮箱。未来用户反馈的内容都会被自动发到这个邮箱:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
提交反馈信息,测试功能
回到网站的联系我们页,填写如下信息,并且“提交”
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
我们将收到一封邮件:
WordPress联系我们页怎样集成Contact Form 7自动发邮件?
WordPress联系我们页怎样集成Contact Form 7自动发邮件?

原创文章,作者:陈伟,如若转载,请注明出处:https://chenweidreaming.com/tutorial/how-wordpress-contact-form-email

发表评论

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

联系我们

13138835999

在线咨询:点击这里给我发消息

邮件:admin@kingborn.net

工作时间:周一至周五,9:30-18:30,节假日休息