一、创建表单
下载并安装Contact Form 7 Plugin，新建表单“contact pop up”
在Form标签下，粘贴如下代码：
<div class="avia_ajax_form">
<p class="first_form form_element form_element_half">Your Name *<br />
[text* your-name class:text_input] </p>
<p class="form_element form_element_half">Your Email *<br />
[email* your-email class:text_input] </p>
<p class="first_form form_element form_fullwidth">Subject *<br />
[text* your-subject class:text_input] </p>
<p class="first_form form_element form_fullwidth">Your Message *<br />
[textarea* your-message class:text_area] </p>
</div>
<p>[submit "Send"]</p>
保存完成后，复制这个表单的shortcode，后面会用到。
说明：<div class="avia_ajax_form">是把CF7的表单用enfold主题自带的avia ajax form格式来展示，这样就可以用element half class控制表单输入项的长度，效果如下：
二、 修改Theme Functions文件
由于Enfold主题内嵌了lightbox 插件（magnific popup plugin），我们不需要另外下载其他popup contact form插件来实现弹出表单。只需要在主题文件中添加定义这个功能即可。方法如下：
主面板进入Appearance-Editor，编辑Theme Functions(functions.php)文件（为了防止主题升级导致修改失效，可以使用子主题的模式），添加如下代码：
//add function of pop-up of contact form using buil-in lightbox plugin *//
function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
jQuery('.open-popup-link').magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});
});
</script>
<?php }
add_action('wp_head', 'popup_inline');
三、创建表单Button
在页面的编辑后台，添加一个text block元素，并粘贴如下代码：
<a class="open-popup-link avia-button avia-icon_select-no avia-color-theme-color avia-size-x-large avia-position-left " href="#test-popup"><span>GET A FREE QUOTE</span></a>
<div id="test-popup" class="white-popup mfp-hide">
[contact-form-7 id="946" title="Contact Pop Up"]
</div>
其中[contact-form-7 id="946" title="Contact Pop Up"] 就是我们之前创建表单后复制下来的shortcode，我们这里把他放到了一个div层中，并用主题自带的magnific popup插件的mfp-hide类名定义这个层，功能是在用户未点击button之前隐藏这个表单。
保存后，如下图：
四、美化表单
之前我们也看到了弹出的表单是全屏的，接下来我们要用css来美化一下我们的表单，改变它的大小和颜色。
进入enfold theme option-General Styling， 在最下方的Quick CSS field内，添加如下代码：
/Styling CF7 Form/
.wpcf7-text, .wpcf7-textarea {
background:#DDDFE2!important;
border-radius:5px!important;
color:#000!important;
}
.wpcf7-submit {
border-radius:5px!important;
font-size:20px; background-color: #c3512f;
color:#ffffff;
border-color: #a1300d;
}
/Styling Pop-up CF7 Form*/
.white-popup {
position: relative;
background: #fff;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
}
经过美化之后，我们的表单变成了下面这个样子，是不是更有逼格了一些？觉得有用的话，请点赞！谢谢！
添加表情
分享至微信
