我们在此篇文章中介绍了如何使用Elementor来制作基础的外贸询盘表单:在联系页面嵌入询盘表单。本文将介绍如何制作弹框式询盘表单。
制作询盘表单操作流程十分相似,添加Form小部件、设置表单字段、表单提交动作这三步都是共通的。唯一的不同之处就是我们在使用Elementor创建的模板不同。
接下来我们进入正题,使用Elementor制作弹框式询盘表单。(注意:本文需要用到Elementor Pro版本)。
我们将实现以下效果:
第一步:使用Elementor创建Popup模板
通过Templates > Popups,点击“Add New Popup”。
创建Popup,输入模板名称,我这边给它命名为“Popup Inquiry Form”。这个弹框表单的名称需要稍微记一下,后面在调用的时候需要输入这个名称来搜索。
点击“Create Template”,Elementor会将我们带到弹框的可视化编辑页面。
选择合适你的模板,点击“Insert”插入弹框模板;或者我们也可以跳过选择模板的选择,直接使用Elementor的小部件来制作弹框(建议直接插入模板,在模板的基础上来改。)
我这边选择了下面这个模板:
第二步:设置表单字段、动作和样式
接下来,我们直接参考这篇教程的第二步、第三步和第四步来设置表单字段、动作和样式。
我们在做询盘表单的时候会涉及到Elementor布局的知识,如果对布局不熟悉的话可以看这篇文章。
第三步:发布弹框式询盘表单
我们设置完这些关键信息后点击右上角的“Publish”按钮发布弹框式表单。
在展示条件中我们设置全站展示(Entire Site),其他展示条件不需要设置,然后点击“Save & Close”。
第四步:在产品详情页添加弹框询盘表单
我们在使用WooCommerce创建产品详情页(Single Product)后,可以直接在“联系我们”按钮的Link属性中添加Popup的动作。
点击Contact Us,调出按钮选项框,我们在Link中设置Popup这个动作。
我们再点击Popup这个选项,设置“Action”,设置为“Open Popup”。
然后在“Popup”中选择刚刚发布的弹框式询盘表单。
最后,点击右上角的“Publish”发布产品详情页即可。
这样我们点击产品详情页的“联系我们”按钮就会弹出一个询盘表单,当我们输入信息点击Send后就会跳转到“感谢”页面。







