Reset Webflow Form

</ head>

</ body>

<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
$(function() {
  /*** START SCRIPT CONFIG ***/

  // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
  var FORM_SELECTOR = ".your-class";

  // Do you want to hide the success message after the form is submitted?
  var HIDE_SUCCESS_MESSAGE = false;
  
  // Do you want the success message to show above the form?
  var SUCCESS_MESSAGE_ABOVE_FORM = true;

  /*** END SCRIPT CONFIG ***/

  var resetCustomElement = function(customElement) {
    var inputElement = customElement.nextSibling;
    if (inputElement.checked) {
      customElement.classList.add("w--redirected-checked");
    } else {
      customElement.classList.remove("w--redirected-checked");
    }
  };

  var resetForm = function(form, successDiv) {
    // Reset the inputs in the form
    form.reset();

    // Reset custom checkboxes
    document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

    // Reset custom radio buttons
    document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

    // Show the form
    form.style.display = "block";

    // Hide Success Message
    if (HIDE_SUCCESS_MESSAGE) {
      successDiv.style.display = "none";
    }
  };

  var form = document.querySelector(FORM_SELECTOR);
  var successDiv = form.nextSibling;
  if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
    // Move the form last so that the success message appears before it
    form.parentElement.appendChild(form);
  }

  // Create an observer to run our resetForm function when Webflow hides our form after submission
  var observer = new MutationObserver(function(mutations) {
    if (form.style.display === "none") {
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>

HTML/Embed

Author
Chris Spags
Published
Jun 12, 2020

How to use:

Once you've pasted the code into your </ body> custom code section of the page settings, all you have to do is change the selector name in the code to match your forms selector name. This can be an id (#) or a class name (.) as show below.

Click here to edit your page settings.
Paste the code here.
Change this to be the class name of your form (use a . for class name or a # for id and this is the class or id name of the form itself and not the "form block").

We have another cool option to either show the success message on top or below the form. The value uses a boolean (true or false). In this case we selected false to show the success message below the form after submit. The last option we're given is to show or hide the success message altogether (also using a boolean value, true or false).

Show success message below or above the form.
Show or hide success message altogether.

Lastly, if you noticed in the demo we added a close (X) button for the success message. This is done simply by adding a link-block or div (whatever you want to use for a button really) and added a very simple Webflow interaction to hide the message with a "Click or Tap" trigger. That's all. 🤙

Tutorial Coming Soon!

Check Browser Support

Interactive Table

Comments

Unfortunately at this time we don't have SSO for comments so you will have to sign up separately to leave your comment. Thanks for understanding!

This code will reset your Webflow form after submit without hiding the form and still showing your success message. This is great for multiple submissions for different use cases.

Clone Project
Documentation
Author:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor