对于做B2B的外贸网站,有一个询盘的需求,比如产品图片下面放一个按钮,点击按钮,弹出一个窗口,可以让客户输入联系信息。如何实现呢?

这个需要使用到Elementor的Popup功能。

安装方法分为两个方式,一个是使用WPForm插件的方式,另一个不适用WPForm的方式。如果不使用WPFrom,请跳过第一个步骤。

步骤#01:安装WPForms插件

(如果不想使用WPFrom,请进入下一个步骤)

WPForms是一个很出名的报表提交软件,如果您正好使用了这款软件,那正好可以套用这个模板,就不需要自己创建模板了。

WordPress后台安装插件WPForms

直接搜索WPForms就看到了。

创建一个WPForms模板

菜单:WordPress后台——>WPForms——>Add New

选择一个模板,我这里选择simple contact form,在Name your form这个地方填好名字,或者选择了form以后再改名字也可以,这里我填写的是”contact form 2b2″

创建好报表以后,点击Save。

步骤#02:Elementor创建模板

菜单:WordPress后台——>点击Templates——>点击Popups

点击Add New,然后选择popup,并且给模板设置一个名字,然后点击“create template”

我们会看到弹出来的是一个选择模板的页面,但是只有Pro才能用,所以我们关闭这个窗口

关闭以后,就是一个普通的页面设计网页了

然后点击Drage widget,点击最大的这个框

使用WPFrom创建模板:

(如果在第一个步骤没有安装WPForm插件,请忽略本步骤,进入”使用Elementor内嵌的Form创建模板“的步骤)

然后点击左侧的Elemetor菜单,搜到wpforms,将WPforms拖动到主页面中。

在我们拖动WPForms到page中时,elementor左侧菜单会显示WPForms的配置。在Form这个地方选择之前自己创建的Form。可以勾选Display form name,如果勾选了,就会在Page中显示。

还有一个Title,这个地方填写的也会显示在Page上。

最后点击Publish,Publish Setting中,默认都是灰色,都未勾选,直接Next、Next结束就可以了。

使用Elementor内嵌的Form创建模板

首先在左侧输入Form,会看到一个内嵌的Form。然后可以将其拖动到正文中

我在拖动Form之前,添加了一个header,命名为Contact Form,不添加这个Header也可以。直接拖动过来,和下图效果类似,只是没有Contact Form这两个单词而已。

然后保存,发布模板就可以了。

步骤#03:添加按钮

打开自己想要添加按钮弹窗的页面,选择Elementor编辑。然后拖动一个Button到自己期望的位置,然后在左侧菜单这个地方,点击Link最后面这个图标,会显示”Dynamic Tags“,点击这个Tags.

在这里选择popup

然后点击Popup,选择之前创建好的template

然后发布Page

步骤#04:查看效果

发布Page以后,点击按钮,就会弹窗,这个弹窗就是我们在Tempate中设计的样子,实际上就是WPForms里创建报表的样子。

如果想更加美观一些,可以在Template创建的时候,不要使用WPFroms,直接使用Elementor的Form创建。

或者将WPForms创建的美观一些。

点击Submit

提交以后,会在邮箱中收到邮件提醒。

邮件提醒,是需要WordPress配置好SMTP服务的。