How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

To display a custom thank you page for a sign-up form and bypass the Webflow default success or failure state, you can use jQuery to listen for the form submission event and perform a redirect.

1. Add a jQuery Script

• Ensure jQuery is included in your project. Webflow usually includes it by default, but double-check in your project's settings.

2. Add JavaScript to the Page

• Open Webflow Designer and select the page where your form is located.
• Go to Page Settings by clicking the gear icon on the page.
• Scroll to the "Custom Code" section and find the "Before </body> tag" area.

3. Implement jQuery Code

• Use the following jQuery script to handle the form submission:

$(document).ready(function() { $('form').submit(function(e) { e.preventDefault(); // **Prevent the default form submission** var form = $(this); $.ajax({ type: 'POST', url: form.attr('action'), // Use the form's action URL data: form.serialize(), // Serialize the form data success: function() { // **Redirect to the custom thank you page** window.location.href = '/thank-you-page-url'; }, error: function() { // **You can handle errors here if required** } }); }); });

4. Customize URL Path

• Replace /thank-you-page-url with the actual path of your custom thank you page.

5. Publish and Test

• Publish your site to apply changes and test the form submission to ensure it redirects correctly.

Summary

To disable the Webflow default success or failure state for a form, use jQuery to submit the form via AJAX and redirect users to a custom thank you page upon successful completion. This approach allows for a seamless user experience by bypassing the built-in form message updates.