搭建基于wordpress的B2C网站-网站功能2

Pop-up弹窗

这一部分，我们需要使用到两款插件，Contact Form 7和Popup Maker。Contact Form 7负责弹窗的表单内容，Popup Maker负责弹窗的外观样式、触发位置、触发条件等。

1. Contact Form的设置(这里默认小伙伴们已经安装好了Contact Form 7插件)

①新建一个表单并命名为Contact form 1，复制以下内容到表单编辑框中(select下拉选项设置——附录1)

下面代码有点小问题，app的编辑器会把内容吃掉，我添加一张图片，请小伙伴自行添加被吃掉的部分

We’d love to hear from you! We aim to reply in less than 48 hours during weekdays and working hours.

[email Your-email "Email address (required)"]

[select Your-topic "Select a topic" "I need help with my order" "I have a general question" "I want to collaborate with you" "I want to do business with you"]

[text Your-message "How can we help you?"]

[file Your-file] [submit "OK,Send"]

②Mail的设置，注意，From后面的邮箱一定要与SMTP mailer中填写的发件邮箱一致，否则邮件不能正常发送。（设置完这一步插件会报错，可忽略）其它设置根据自己需要填写修改

③复制Short Code保存备用

2. Pop-up Maker设置

①把上一步设置好的表单Short Code复制到内容编辑框中，并把这个Popup命名保存为Contact us

②Triggers，顾名思义，在这里选择触发弹窗的方式。一是点击触发，即点击到某个按钮（或者超链接）弹窗就会出现，二是自动延迟触发，即设置一个延迟时间，弹窗会在你选定的页面自动延迟出现，这里我们先不选择，在这一部分的最后会解释原因

③Targeting，如果上一步中我们选择了Time Delay，那么就在这里选择想要触发弹窗的目标页面，比如主页、产品页面或其他任意页面

④Display，按下图配置

⑤Close，按下图配置

⑥Advanced不用设置

现在，两个插件都设置好了，我们来看如何最终实现一个Click Open的弹窗（Time Delay的弹窗比较简单，上面已经有提到，就不做展开了）。

进入后台我们点击Appearance→Menu，然后选择页脚Footer，添加一个Custom Links，URL随便写一个，Link Text写Contact us。添加成功后，点击Contact us旁边的小三角，找到Trigger a Popup，在下拉菜单选择之前命名为Contact us的popup，然后保存。

进入主页，点击测试是否设置成功。当你点击Contact us的时候，只会触发弹窗，所以前面在设置URL时可以填任意一个页面。

PS:

附录1：

怎么在Contact Form表格选项设置一个下拉选菜单呢？

先说一下命令，以lable开头和结尾，select是触发命令关键字，Your-topic可以换成任意内容，它相当于一个锚，你在设置邮件格式的时候只要用到这个锚，系统就会把客户选择的内容加载到锚所在的位置。双引号里面的内容就是下拉菜单中显示的内容，内容之间用空格隔开即可。

[select Your-topic "Select a topic" "I need help with my order" "I have a general question" "I want to collaborate with you" "I want to do business with you"]