• Hello,

    I’ve added a form in an Elementor popup, but it seems like the validation is not working. The page refreshes after clicking the submit button even if some required fields were not filled in.

    I’ve added a snippet suggested in this thread here – https://github.com/elementor/elementor/issues/7798. But it seems to not work anymore. JS error log shows this error – wpcf7.initForm is not a function

    Any help would be much appreciated.

    Regards.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    @takayukister I am having the same issue. Seems The CF7 scripts.js are rewritten with pure JS. So the previous jQuery initForm function is not available.

    Please guide us with a reference to how can we initiate the form with pure JS.

    Here is my current code for initiate the form in an Ajax popup.

    +(function($) {
        var WPB_Quote_Button = {
    
            initialize: function() {
                $('.wpb-get-a-quote-button-form-fire').on('click', this.FireContactForm);
            },
    
            FireContactForm: function(e) {
                e.preventDefault();
    
                var button  = $(this),
                id          = button.attr('data-id'),
                post_id     = button.attr('data-post_id'),
                form_style  = button.attr('data-form_style') ? !0 : !1,
                width       = button.attr('data-width');
    
                wp.ajax.send( {
                    data: {
                        action: 'fire_contact_form',
                        contact_form_id: id,
                        wpb_post_id: post_id,
                        _wpnonce: WPB_GQB_Vars.nonce
                    },
                    beforeSend : function ( xhr ) {
    					button.addClass('wpb-gqf-btn-loading');
    				},
                    success: function( res ) {
                        button.removeClass('wpb-gqf-btn-loading');
                        Swal.fire({
                            html: res,
                            showConfirmButton: false,
                            customClass: {
                                container: 'wpb-gqf-form-style-' + form_style,
                            },
                            padding: '30px',
                            width: width,
                            showCloseButton: true,
                        });
                        if(typeof wpcf7 != 'undefined'){
                            wpcf7.initForm( $('.wpcf7-form') );
                        }
                    },
                    error: function(error) {
                        alert( error );
                    }
                });
            },
    
        };
    
        $(function() {
            WPB_Quote_Button.initialize();
        });
    })(jQuery);
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CF7 with Elementor Popup Builder’ is closed to new replies.