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
- Drag and drop a Form Block element.
- Drag and drop a Button element.
- 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>
- Find the name of your form.
- 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.
