什么是页面传参?
从字面意思将就是在网站的不同页面之间传递参数。从而满足更个性化和营销的目的。
页面传参的基本原理是将页面参数先传递到跳转页面的url中,然后在跳转页中将url中传递的参数取出,并显示在页面内容中。
通过本篇文章,我们可以帮你在20分钟之内实现wordpress网站页面传参的目标。从而让你网站的个性化和营销功能更上一个层次。(营销往往在细微差异中取得成功)
页面传参的一个比较典型的应用就是外贸网站中的感谢页。埃克森数字营销之前针对感谢页也发布过一篇专题文章。
例如,下面是一个将联系表单中的名字参数传递到感谢页的视频案例。
本指南我们也将以感谢页为例子来教大家如何实现页面传参。
实现页面传参的两个途径
就感谢页来讲,实现最终的页面跳转和参数传递的一个前提就是表单。
我们将以大家最常用的两个表单形式来讲解怎样实现感谢页的跳转和参数传递,即Contact Form7表单和elementor表单。
1. 用contact form7表单如何实现页面传参
#第一步:安装一个插件
插件名字:Redirection for Contact Form 7。
#第二步:进入contact form7表单的Action选项栏。
#第三步:选项框中选择“Redirect”, 然后点击按钮“Add Action”。
然后在Submission Actions列表中会产生一个New Action。
#第四步:编辑New Action。
首先点击“Edit”,打开编辑。然后选择跳转到的页面。
其次,点开“Pass specific fields from the form as URL query parameters”。
然后,输入你要传递的参数,比如我们这里要传递的是contact form7表单中的名字:your-name。
注,这个参数的获取可以打开contact form7中的邮箱选项。在消息正文中可以考到From后面有两个参数即:your-name 和your-email。复制你要传递的参数即可。
最后打开“enable redirect”, 并点击保存按钮。
#第五步,打开contact form7表单要跳转的感谢页的elementor编辑。
#第六步,从elementor选项卡中拖入一个标题(heading), 点击标题的动态标签,然后选择“request for parameter”。
#第七步:设置标题:点击Request Parameter左侧的小扳手,在type中选择“Get”, 并输入传递参数的名称。即我们上面提到的“your-name”。
#第八步:点开“高级设置”,在“之前”中输入“Thank You, ”(逗号后面可以加个空格)。“之后”中输入“!”。“回滚”中输入“Thank You!”
最后,点击“更新”按钮。
至此,Contact Form7表单的跳转参数传递设置完成。我们一起来看一下效果。
2. 用elementor自带表单如何实现页面传参
#第一步,打开包含有elementor表单的编辑页。或者从elementor选项卡中拖入一个“form”.
#第二步,点开编辑Form中的“Action After Submit”。点“+”符号,然后选择“Rediret”。
#第三步,点开“redirect选项。”
然后点击“动态标签”, 并选择“Shortcode”。
#第四步,点击“shortccode左侧的小扳手”。并输入要传递的参数代码。
注:要获取要传递的参数代码,首先点开“Form Fields”,因为我们要传递的参数是表单中的name, 所以点开“Name”, 并点击“Advanced”选项。直接复制“Shortcode“”后面的内容即可。
#第五步,打开“Redirect”中“Shortcode”的高级设置。在“之前”后面输入:https://www.xnbeast.com/thank-you/?yname=
“之后”:留空即可。
“回滚”后面输入:https://www.xnbeast.com/thank-you/
回滚后面输入的网站页面即为elementor表单要跳转的感谢页URL。
注:请自行将网址替换为你自己的网址。
#第六步,打开感谢页的elementor编辑。
#第七步,从elementor选项卡中拖入一个标题(heading), 点击标题的动态标签,然后选择“request for parameter”。
#第八步:设置标题:点击Request Parameter左侧的小扳手,在type中选择“Get”, 并输入传递参数的名称。即我们上面提到的“yname”。
注:参数名称的内容:yname可以从elementor表单:Form Fields–>Name–>Advanced–>ID位置获取。
#第九步:点开“高级设置”,在“之前”中输入“Thank You, ”(逗号后面可以加个空格)。“之后”中输入“!”。“回滚”中输入“Thank You!”
最后,点击“更新”按钮。
至此,elementor表单的跳转参数传递设置完成。我们一起来看一下效果。
以上为wordpress页面传参的两个策略。如有疑问和建议,欢迎在评论区留言。