当前位置: 首页 > 后端技术 > PHP

如何在WordPress中创建联系表单(3种方法)

时间:2023-03-29 16:32:10 PHP

本教程提供了3种在WordPress中创建联系表单和记录查询的方法:插件ContactForm7+Flamingo,均为免费插件ElementorPro+ElementorContactFormDB,前者付费,是网页可视化编辑器,后者免费。插件NinjaForms是免费的。这是一个新发现和推荐的方法。相关教程请查看:NinjaForms:一款免费的联系表单插件,但它提供了付费表单才有的功能。【视频+图文】本文原文发表于:https://loyseo.com/how-to-cre...制作联系表教程概览方法一、使用ContactForm7插件制作联系表格,使用Flamingo插件记录收到的查询所有wordpress网站都可以使用,不限主题,不限页面编辑器优势:可以提供自定义问题验证功能,可以实现简单的数学题验证如2+2=?,这个功能可以屏蔽大部分的广告邮件,很多广告邮件来自一个工具:GSAWebsiteContact,GSA可以根据产品词搜索目标企业网站,根据既定规则找到联系页面,并根据定制的广告内容自动提交表单。这也是常用的拉客方式(有兴趣的也可以试试~),GSA也可以破解谷歌验证码,我不推荐使用谷歌验证码,因为会大大拖慢网站速度,不要用复数计算题,会降低客户提交查询的意愿缺点:相对于Elementor,Contactform7不能可视化编辑,操作起来有点不方便。见下图。Contactform7制作一个联系表格。ElementorDB插件记录收到的查询。它适用于使用ElementorPro编辑器的wordpress网站。优点:可视化编辑表格,操作方便。缺点:不提供自定义数算题验证功能。Elementor可视化制作联系表单的操作界面,可以看到就是elementor制作的联系表单创建表单后,需要配置SMTP,以便在收到询盘后可以将通知发送到您的邮箱。了解了两种联系方式制作方式的优缺点后,我们将一一讲解制作方式的详细教程。ContactForm7+Flamingo制作联系表单教程安装并启用插件ContactForm7,Flamingo,相关教程:如何安装wordpress插件(3种方法)如果要制作英文查询表单,需要确保用户的语言也是英文(修改方法如下图所示),因为contactform7会根据你的背景语言为你创建表单文案和提示信息。修改用户语言,使其与询价单的语言一致,如下图所示。我们开始制作表格,输入contact》addnew,会看到默认表格的内容,输入表格的标题。详细介绍在邮件页面制作询价通知邮件的模板。下面还将详细介绍表单页面默认表单中的主题字段,只保留Yourname、Youremail、Yourmessage这三个字段,因为简单的表单便于客户提交。不要做复杂的表格,让客户填写困难。接下来,我们将添加一个简单的数字计算验证问题来屏蔽一些广告邮件;会增加客户提交询盘的难度。操作步骤如下。在表单页面,点击下图中的问答按钮,填写问题和答案。问题和答案之间用|隔开符号,如2+2=?|4,然后点击插入标签,将问题插入到表单中,如下图,问题插入到提交按钮【提交“发送”】上方。如下图,在字段下方加一个空行可以给字段底部增加一点空间,回车加1个空行即可,多个空行不会堆积。(其实这个操作就是把label改成了p,而p一般在行下面有一个间距,从而增加字段之间的间距)。此时,您可以保存表格,您会在表格标题下看到下图中的蓝色区域,复制简码,粘贴到联系我们页面,预览表格效果。接下来,请创建一个联系我们页面。即使不使用页面编辑器,也可以在wordpress默认的编辑模式下使用联系表单的短代码。只需将上面复制的代码粘贴到页面中并保存即可。.如果你使用Elementor编辑器,在创建页面的时候,在左边的元素栏中找到名为shortcode的元素,将它拖到右边的页面中,然后在左边的内容框中输入表单代码,你会看到contactform7的form直接显示在右边,呃...不太好看,不知道css代码很难调整它的外观。当然你也可以使用其他插件为表格定义样式,或者就使用这个简单的版本,我们来做一些简单的样式调整,比如把表格的宽度改为全宽(我知道的css只是入门级的?,无法提供复杂模式的代码如下。”修改,将字段宽度改为100%全宽。(如果你想使用它,使用它YourName*\[text*your-name\]YourEmail*\[email*your-email\]你的消息*\[textarea*your-message\]\[quizquiz-57"2+2=?|4"\]\[submit"Send"\]对应的表单效果如下图,我来解释一下字段组成的要点,比如[text*your-name]text是字段Type的输入,比如这里表示文本输入类型,email表示输入邮箱类型,如果不是邮箱地址,则无法提交表单。*表示该字段为必填项your-name是字段名,如果改了这个名字,邮件模板也要相应修改,我改完字段名后,忘记在邮件里修改了,结果收到的邮件通知缺少内容。接下来我们进入邮件页面配置邮件通知模板,如图下图,每个序号对应的内容就是表单中包含的字段。可以在后面的4、5、6中调用它们来获取字段的值。如果该字段不包含在表单中,即使引用了也没用:在这里填写邮件通知收件人邮箱,一般默认为后台账户邮箱地址来自:填写发送通知的邮件地址emails,这里填写你在smtp配置的发件邮箱,如果你使用的发件邮箱域名不等于本站域名,那么即使出现感叹号警告填写完后的页面,不用担心主题:这里填写邮件通知的标题,根据自己的喜好填写。你也可以在这里添加字段调用,例如:from[your-name]'sinquiryadditionalheaders:默认是reply-to:[your-email],也就是说如果你回复邮件通知,收件人回复邮件默认为向您发送询盘的邮箱,相当于直接回复通知邮件直接回复客户邮件正文:此处填写邮件正文内容。如果你有添加或删除字段,记得在这里调整相应的字段。例如,在上一篇文章中,我输入了[your-subject]如果删除了该部分,您还需要删除此处的所有相关内容。填好表单后记得测试是否能收到邮件通知,内容是否准确,flamingo插件中是否有查询记录(见下图),Flamingo默认有subject字段。如果删除这个字段,你会看到主题栏的内容是[your-subject]。该方法在我的模板网站上使用,查询表全球通用。例如,点击按钮弹出查询表单,联系我们页面的表单都共享同一个配置的发送电子邮件帐户。在wordpress后台安装SMTP插件并设置发送功能安装插件Elementor、Elementorpro、ElementorContactFormDB并启用Elementor添加新模板,模板类型为popup(弹窗),我们将联系表单放在弹窗中,而不是弹窗模板库中选择模板导入,点击右上角关闭,在页面中添加标题和表单元素,如下图6.设置用户必须填写的字段,并显示*标记;也可以在左侧添加新字段,默认有name、email、message三个字段。建议字段不要太多,减少用户填写的难度。7.右击调整后的表单元素,将其存储为全局元素,方便在其他地方复用。8.发布表单并设置条件对于整个站点,只需保存即可,无需设置其他(触发器或高级规则)9.如果您需要在产品页面点击询价按钮时弹出询价,请在elementor中编辑相应的页面,点击相应的按钮,然后点击左侧的按钮在侧边按钮设置中,点击链接右侧的动态按钮(图中2),在下拉中选择popup-down选项,然后继续点击popup,在setting中搜索选择刚刚添加的popup设置按钮的链接值。添加弹窗名称,选择10,此时点击询价按钮,会看到询价弹窗11,我们在任意商品页面提交询价,测试是否可以收到询价邮件通知及是否记录后台记录,询价邮件将发送至您的wordpress账号邮箱。如需添加收件邮箱地址,请在询价单中配置。用英文逗号分隔多个电子邮件地址。同时,您还可以在这里设置通知邮件的标题和正文。发送测试询价后,我们查看邮箱是否收到邮件(注意查看垃圾邮箱),同时查看后台ElementorDB中的询价记录,如下图,你'重做。本文原文由LOYSEO发布。LOYSEO专注于WordPress、Elementor、外贸建站教程。推荐阅读2020年搭建B2B外贸网站终极教程,2020年搭建外贸网站需要注意什么?(4300字经验谈)