简体   繁体   English

如何在弹出窗口中显示联系表格 7 消息?

[英]how to show contact form 7 messages in popup?

In wordpress site , I am using Contact Form 7. In addition I added plugin Contact Form 7 Response Message Popup to show the validation error message and success message.wordpress 站点中,我使用的是 Contact Form 7。此外,我添加了插件 Contact Form 7 Response Message Popup 以显示验证错误消息和成功消息。 The problem is sometimes the popup is working fine and sometimes though validation error occurs shows blank popup.问题是有时弹出窗口工作正常,有时虽然发生验证错误显示空白弹出窗口。 Why is this happening?为什么会这样? Any help/suggestions are welcome.欢迎任何帮助/建议。 Thank you.谢谢你。

For time being I added settimeout function on fancybox call.暂时我在fancybox调用中添加了settimeout function。 I don't think it's a best approach though.我认为这不是最好的方法。

Please have a look on my developed plugin to add custom styles over contact form 7 messages, specifically developed for the purpose of setting custom style for the messages, Even you can manage the whole styling of contact form 7 messages manually, I hope the plugin fit for you.请查看我开发的插件,在联系表格 7 消息上添加自定义 styles,专门为设置消息的自定义样式而开发,即使您可以手动管理联系表格 7 消息的整个样式,我希望插件适合为你。

Download the plugin from bellow link on Github and follow the instructions provided on readme.txt file for further details.从 Github 上的以下链接下载插件,并按照 readme.txt 文件中提供的说明获取更多详细信息。

https://github.com/basirebadi/contact-form-7-Messages-Styleshttps://github.com/basirebadi/contact-form-7-Messages-Styles

Use fancybox: http://fancyapps.com/fancybox/ 使用fancybox: http : //fancyapps.com/fancybox/

enqueue a script in wordpress functions.php file with this code: 使用以下代码将脚本放入wordpress functions.php文件中:

jQuery( document ).ready(function() {
     jQuery('.wpcf7-popup-invalid, .wpcf7-popup-mailsent').fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,

                openEffect : 'elastic',
                openSpeed  : 150,

                closeEffect : 'elastic',
                closeSpeed  : 150,

                helpers : {
                    overlay : {
                        css : {
                            'background' : 'rgba(238,238,238,0.85)'
                        }
                    }
                }
    });
});//document

jQuery(document).on('invalid.wpcf7', function () {
    //console.log('invalid.wpcf7 was triggered!');
    jQuery('.wpcf7-popup-invalid').trigger('click');
});
jQuery(document).on('mailsent.wpcf7', function () {
    //console.log('mailsent.wpcf7 was triggered!');
    jQuery('.wpcf7-popup-mailsent').trigger('click');
});

and in your page template file (ex. page.php) add the following: 并在页面模板文件(例如page.php)中添加以下内容:

<a class="wpcf7-popup-mailsent" href="#f-success" title="" style="display: none;">PopUp</a>

<div id="f-success" style="width:400px;display: none;">
    <p>
        Success message.
    </p>
</div>

<a class="wpcf7-popup-mailsent" href="#f-failure" title="" style="display: none;">PopUp</a>

<div id="f-failure" style="width:400px;display: none;">
    <p>
        Failure message.
    </p>
</div>

Notes: 笔记:

1) This didn't work for me: https://contactform7.com/dom-events/ 1)这对我不起作用: https//contactform7.com/dom-events/

2) Hidden links and jQuery triggers was the easiest solution to make the fancybox open directly from the js code 2)隐藏链接和jQuery触发器是使fancybox直接从js代码打开的最简单的解决方案

3) Yes. 3)是的。 I know. 我知道。 You can use "$" instead of "jQuery" in Wordpress js files if you want to 如果要在Wordpress js文件中使用“ $”代替“ jQuery”

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM