How to clear all fields of a Webflow form

Bjorn Krols

Bjorn Krols

Published on
29 November 2021

This brief post explains how to clear all fields of a Webflow form.

⚡ Looking for a form provider for your exported Webflow sites? Check out Formspark.

Inside the Webflow designer

  1. Drag and drop a Form Block element.
  2. Drag and drop a Button element.
  3. Give the button element an ID (such as "reset").

We will be interacting with the HTML code Webflow generates for its forms, which looks approximately like this (abridged):

<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      src="https://code.jquery.com/jquery-3.6.0.js"
      integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <form data-name="Email Form">
      <input type="text" name="name" />
      <input type="email" name="email" />
      <input type="submit" value="Submit" />
      <a href="#" id="reset">Reset</a>
    </form>
  </body>
</html>
  1. Find the name of your form.
  2. Copy-paste the following code into your page's Before body tag Custom Code section:
<script>
  $("#reset") // <- Replace "#reset" with your button id (keep the #)
    .click(function (e) {
      e.preventDefault();
      var formElement = $('form[data-name="Email Form"]'); // <- Replace "Email Form" with your form name
      var inputElements = formElement
        .find(":input")
        .not(":button, :submit, :reset, :hidden");
      inputElements.val("").prop("checked", false).prop("selected", false);
    });
</script>

Note: we are using jQuery because Webflow includes it by default, and its usage has been widely adopted by the Webflow community.

Don't forget to save and publish your page.

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox weekly.

More like this