ajaxwordpressformscontact-form-7

Contact form 7 refreshing the page when i submit form. Form not submitting using Ajax form submission


I'm using Contact Form 7 in Wordpress. I have added a custom botton to submit form because i am displaying a confirm box if user click 'yes' then form submit but when user click yes then page reload or refreshing the page and not showing any success message to the user and When you click the submit buttons the screen reloads with #wpcf7-f5769-o1 tacked on to the end of the URL. That means the form is not submitting using AJAX.

Here is url of my form page About and contact

However, I'm not sure what would conflict or cause the this issue.


Solution

  • Since you're using a custom button to trigger the form submission, make sure it's integrated properly with Contact Form 7. Add a custom click event handler to your button that triggers the Contact Form 7 submission:

    document.getElementById('custom-submit-button').addEventListener('click', function(event) {
    event.preventDefault();
    // Confirm box
    if (confirm("Are you sure you want to submit?")) {
        // Trigger the Contact Form 7 submit
        const form = document.querySelector('.wpcf7 form');
        if (form) {
            form.querySelector('input[type="submit"]').click();
        }
    }
    });
    

    Make sure to replace #custom-submit-button with the actual ID of your button.