更新日期: 2017-10-30
问题
想要做个效果,点击按钮弹出一个询盘表单,该如何实现?
解决方法
在Avada主题中,我们要实现这个效果,需要用到2个Element:
当然,弹出询盘表单的话,我们还需要先制作好Contact Form。
三个步骤搞定:
1. 准备好Contact Form
建好想要的form之后,复制其Shortcode。
![复制Form的shortcode 复制Form的shortcode](https://www.yizhiyong.com/wp-content/uploads/2017/10/copy-contact-forms-shortcodes.gif)
2. 添加并设置Modal
编辑Modal,设置Name、Heading和Contents,如下图:
- Name Of Modal,设置为:popupcontact
- Modal Heading,设置为:Contact Us Now
- Contents中填入已复制的Contact Form Shortcodes
![新增并编辑modal内容 新增并编辑modal内容](https://www.yizhiyong.com/wp-content/uploads/2017/10/add-edit-modal.gif)
3. 添加并设置Button
编辑Button的时候,至少需要设置2个地方,Button Text和Modal Window Anchor。
其中,Modal Window Anchor务必设置为上一步中设置的 Name of Modal。
![新增并编辑Button 新增并编辑Button](https://www.yizhiyong.com/wp-content/uploads/2017/10/add-edit-modal-button.gif)
效果示意
![如何制作弹出窗口效果示意](https://www.yizhiyong.com/wp-content/uploads/2017/10/modal-popup-demo.gif)
适用版本
Avada 5.0 +