Hi,

I've uploaded my finished site finally!

https://sedicksasman.com/

I have some questions about how to improve the performance.

I'm using W3 Total Cache, but I'm not sure what the best settings are to get the site to load seamlessly like your demos. Could you let me know what are the best practices? Or if you recommend a different caching plugin.

I've also noticed that sometimes the contact forms reload the page, and other time it updates with the success message withou reloading. How do I set this up properly?

Otherwise, it was great to build a site with this theme. Thanks for the all the help!

Some more:

I noticed my scroll animated videos don't work on android and on Firefox on windows. didn't check chrome.

Also, the moving thumbs don't work on Firefox 

Thanks!

I have a contact form on almost all the pages. It works sometimes, but I'm not sure why.

Turning off ajax is kind of defeating the purpose of using this theme...

Moving thumbs are used on this page: https://sedicksasman.com/connect/

and this one: https://sedicksasman.com/collaborate/

I discovered that the videos need to be reencoded to work on other browsers (everything works on Safari)

Fixed the moving thumbs :-)

Had remove the alignment that was set in elementor for some reason.

Hi, I'm trying to figure out how to load the contact form's JS after the page loads with ajax. Any idea how to implement it in this theme? 

Solutions I found online don't seem to work 

Alternatively, a recommendation for a different plugin that would work properly with the theme (without disabling ajax)

Thanks! I don't have the childscript. I'm using a modified version of scripts.js

Anyway, I've found this old thread: https://stackoverflow.com/questions/45719266/contact-form-7-throws-wpcf7-initform-is-not-a-function-error-when-loading-page#46851578

And this: https://wordpress.org/support/topic/wpcf7-initform-removed-how-to-reinitialize-the-form/

Not sure if it's still valid.

Okay, I've tried a few different snippits and functions but still nothing

Hi, yes there was errors. But I have since removed the code.

I had a function in there - function ContactForm() { which I called after customfunction, but could quite find the right code to make it work.

The latest solution I've found, a added with WPCode Lite plugin. It almost works, but the front end does update with success or failure messages/notifications. This is the code:

(function ($) {
    $(document).ready(function () {
        console.log('CF7 AJAX handler initialized.');
        function initializeCF7Forms() {
            console.log('Initializing CF7 forms...');
            $('.wpcf7-form').each(function () {
                const $form = $(this);
                // Clear previous messages
                $form.find('.wpcf7-response-output').empty();
                // Unbind any existing submit handlers
                $form.off('submit'); 
                // Bind the submit event
                $form.on('submit', function (event) {
                    event.preventDefault(); // Prevent default form submission
                    console.log('Form submitted:', $form);
                    // Use the built-in CF7 AJAX submission
                    const formData = $form.serialize(); // Serialize the form data
                    $.ajax({
                        url: $form.attr('action'), // Use action URL
                        type: 'POST',
                        data: formData,
                        success: function (response) {
                            console.log('Response received:', response);
                            // Check response for success status
                            if (response.status === 'mail_sent') {
                                $form.find('.wpcf7-response-output').html('<span class="success">Thank you! Your message has been sent.</span>');
                            } else {
                                $form.find('.wpcf7-response-output').html('<span class="error">There was an error sending your message. Please try again.</span>');
                            }
                        },
                        error: function (xhr, status, error) {
                            console.error('Submission failed:', error);
                            $form.find('.wpcf7-response-output').html('<span class="error">There was an error sending your message. Please try again.</span>');
                        }
                    });
                });
            });
        }
        // Initialize forms on page load
        initializeCF7Forms();
        // Reinitialize forms after any AJAX content load
        $(document).on('ajaxComplete', function () {
            console.log('AJAX complete - Reinitializing CF7 forms.');
            initializeCF7Forms();
        });
    });
})(jQuery);

Hi, thanks.

I've found a solution using WPForms Lite. Here it is in case anyone else needs it.

Added to scripts.js:

/*--------------------------------------------------
    Function Contact form
---------------------------------------------------*/
 function InitWPFormsReinitialization() {
    jQuery(document).ajaxComplete(function () {
        if (typeof wpforms !== 'undefined' && typeof wpforms.init === 'function') {
            // Reinitialize WPForms
            wpforms.init();
            console.log('WPForms Lite reinitialized after AJAX');
            jQuery('.wpforms-form').off('wpformsAjaxSubmitSuccess').on('wpformsAjaxSubmitSuccess', function (event, data) {
                console.log('Form submitted: ', data);
                // Handle the confirmation message
                const confirmationMessage = data.success 
                    ? (data.data.confirmation || 'Thank you! Your form has been submitted successfully.') 
                    : 'There was an error submitting the form. Please try again.';
                // Ensure the confirmation container exists
                let confirmationContainer = jQuery(this).find('.wpforms-confirmation-container');
                if (confirmationContainer.length === 0) {
                    confirmationContainer = jQuery('<div class="wpforms-confirmation-container"></div>');
                    jQuery(this).append(confirmationContainer);
                }
                if (data.success) {
                    console.log('Form submission was successful. Displaying confirmation: ', confirmationMessage);
                    confirmationContainer.html('<div class="wpforms-confirmation-success">' + confirmationMessage + '</div>');
                } else {
                    console.log('Form submission failed.');
                    confirmationContainer.html('<div class="wpforms-confirmation-error">' + confirmationMessage + '</div>');
                }
                // Delay the ScrollTrigger refresh by 300 milliseconds
                setTimeout(function() {
                    if (typeof ScrollTrigger !== 'undefined') {
                        ScrollTrigger.refresh();
                        console.log('ScrollTrigger refreshed after form submission attempt');
                    }
                }, 300); // Set to 300 milliseconds
            });
        }
    });
}

Then called it after custom function:

InitWPFormsReinitialization();

Also should make sure the plugin is set to load scripts globally, otherwise it doesn't work.