魏艾斯笔记之前魏艾斯笔记介绍了 Elementor设计popup弹窗功能，这次老魏分享如何用 Elementor制作弹出式产品询盘菜单，这里面就使用了popup弹窗功能，也是一次实操过程记录。
Elementor页面编辑器 点我直达 Elementor pro插件官网，快速建站，容易上手。入门点击购买Elementor Pro插件和下载安装激活_WordPress页面编辑器。 更多Elementor插件内容请看Elementor专题学习、小网站选择 1核2g配置的服务器起步，国外主题建站选择 2核4g配置，适当搭配运行流畅。
国内服务器：阿里云、腾讯云（都有代金券，付款时抵用省钱） 不知道如何选择地域、配置请在页面右侧+老魏的联系研究。
外贸、B2C/C2C等网站在国外注册域名。打开namesilo官网，在搜索框里输入并选择好后注册，记得使用优惠码省钱。优惠码点击国外域名商Namesilo域名注册教程获取。
外贸网站建议选择Hostinger虚拟主机，价格便宜，性价比极高！Hostinger专题
SiteGround虚拟主机价格适中服务好！SiteGround专题
我们先用 Elementor Pro添加产品详情页，然后在产品详情页的模板上使用询盘按钮，点击按钮调用 popup弹出询盘对话窗口。而且 Elementor Pro还有 submissions记录询盘信息，也不需要安装 Elementor contact form DB这类插件了。插件越少，WordPress性能越高，网站速度越快。
同时也不需要 Ninjaform、Wpforms、contact form7等第三方表单插件了，而且这类插件内容放到 popup中会显示无法提交表单等错误提示。
1、准备条件
Elementor、Elementor Pro这两个插件是必备的。
还要部署一个 smtp功能，建议部署Post SMTP插件开通WordPress发邮件SMTP功能。
2、Elementor Pro制作弹出产品询盘表单
WordPress后台左侧的栏目列表，模板>popup，点击“添加popup”添加新弹窗。
这时老魏点击“添加”按钮后，屏幕变白且一直在刷新没有结果。按照 Elementor编辑器安全模式解决办法搞定了这个问题。
弹出表单可以直接使用官方模板库中的现成模板，简单更改文字、替换图片后就差不多了。
如果想自己设计，关闭模板库后，分别拖拽“标题”元素和“Form”元素到弹窗中。
- 标题改成 contact us
- Form元素默认添加 name、email、message三个字段，额外添加 honeypot字段用于屏蔽垃圾机器人。
在Form元素上点右键选择存储为全局元素，可以在汪涵任何地方多次使用。
点击屏幕下面的“发布”按钮，在弹出的 publish settings，设置为 Entire site（全站）有效。
另外两个 triggers 和 advanced rules可以设置弹出窗口和退出弹窗后的条件。
比如我们在产品详情页点击询盘按钮后弹窗，只需要把按钮和 Form表单关联起来即可。
在按钮的内容选项卡中，点击链接>动态标签>Actions>popup。
再次点击 popup，点击 All并在搜索框中搜索上面添加的弹窗名，添加进去。
此时点击按钮看到弹窗询盘。
在所有产品页面和认为有必要放按钮的页面添加这个全局按钮，并测试是否能收到询盘邮件（留意垃圾箱），以及到 WordPress后台>Elementor>Submissions 页面查看询盘记录。
询盘邮件会发到你的 WordPress网站管理员邮箱中，也可以在 email 的 to 中手动添加收件邮箱，以英文逗号间隔。设置通知邮件标题、正文内容等。还能抄送、密件抄送等等。
