Is there a way to reset a form to its original state after it has been submitted in Webflow?

Published on
September 22, 2023

Yes, there is a way to reset a form to its original state after it has been submitted in Webflow. When a form is submitted in Webflow, the Webflow form handling system takes over and processes the data. By default, Webflow form handling does not include a built-in feature to reset the form after submission. However, you can achieve this functionality using custom code. Here's how:

  1. Add a Custom Code block: First, add a Custom Code block to your form's Success state. To do this, select the form element, go to the Form Submission section in the settings panel on the right, and choose the Success state. Then, click on the "Custom Code" button.

  2. Write the JavaScript code: In the Custom Code block, you can write JavaScript code to reset the form fields to their original empty state. The code snippet below demonstrates how you can achieve this using JavaScript and jQuery:

$('.your-form-class')[0].reset();

Make sure to replace .your-form-class with the correct class name of your form element.

  1. Publish and test: Once you have added the JavaScript code, publish your website and test the form submission. After submitting the form, the form fields should be reset to their original empty state.

By following these steps, you can easily reset a form to its original state after it has been submitted in Webflow.

Additional Questions:

  1. How can I add a success message after form submission in Webflow?
  2. Is it possible to customize the validation messages for form fields in Webflow?
  3. Can I integrate a third-party form handling service with Webflow forms?