如何隐藏联系表格并显示"已发送!" 成功发送后

Question

我在WordPress模板中使用Contact Form 7插件.我创建了表单和相关的CSS,所以一切正常.我需要执行以下操作,当我单击"发送"按钮并且我已成功发送电子邮件时.表格应该消失并显示"已发送!" 而不是那个.我需要知道我需要更改的代码.请参阅显示我喜欢做的照片

Answer 1

如果您想隐藏表单并显示感谢消息，可以使用下面的 CSS。

.wpcf7-form.sent p
{
    display:none;
}

Answer 2

“on_sent_ok:”和“on_submit”已从联系表 7 5.0 中删除，因此需要使用 2 个可用选项之一。

1. wpcf7提交
2. wpcf7mailsent

要隐藏表单，需要在 js 文件中添加事件侦听器，或者可以使用提到的脚本在页脚中添加为操作：

add_action( 'wp_footer', 'contact_form_sent' );

function contact_form_sent() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( 'FORM_ID' == event.detail.contactFormId ) { //Use this only when targeting specific form.
         document.getElementById('DIV_ID_OF_FORM').style.display = 'none';
    } //Use this only when targeting specific form.
}, false );
</script>
<?php
}

Answer 3

为了隐藏联系表单 7，您必须添加以下代码，在您已经生成的联系表单 7 的设置部分中

on_sent_ok:  "document.getElementById('contactform').style.display = 'none';"

'contactform' 是包含联系表单标签的“div”的 ID。