[英]Display a div after submit contact form 7 form
我想在成功提交表单后显示一个包含一些详细信息的 div。 我正在使用联系表格 7 插件.. 请帮我做到这一点。
嗨,您可以使用联系表格 7 DOM 事件,请参阅此链接https://contactform7.com/dom-events/
以下是在您提交表单后调用警报的示例
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
alert( "Fire!" );
}, false );
并且您还可以在提交后附加或放置一个 div,如下面的代码所示,在下面的代码中,您必须将#yourDivId替换为您想要的 div id。
var wpcf7Elm = document.querySelector( '.wpcf7' );
var div = '';
div += '<div class="custom_detail_div">';
div += ' .... your details here ..... ';
div += '</div">';
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
jQuery('#yourDivId').html(div);
}, false );
你也可以检查这个,
我希望这能帮到您。
谢谢
我找到了解决方案......
`<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '33' == event.detail.contactFormId ) { // if you want to identify the form
var hid = document.getElementsByClassName("exp");
// Emulates jQuery $(element).is(':hidden');
if(hid[0].offsetWidth > 0 && hid[0].offsetHeight > 0) {
hid[0].style.visibility = "visible";
}
}
}, true );
</script>`
这里 33 是我的表单 id 和 exp 是我的 div 的类
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.