This brief post explains how to pre-fill Webflow form input fields at page load.
⚡ Looking for a form provider for your exported Webflow sites? Check out Formspark.
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" id="name" />
<input type="email" id="email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
- Find the name of your form.
- Find the ids of the input fields you want to pre-fill.
- Copy-paste the following code into your page's Before body tag Custom Code section:
<script>
// 1. Find the form
var form = $('form[data-name="Email Form"]'); // <- Replace "Email Form" with your form name
// 2. Update the values of the inputs
form.find($("#name")).val("John Doe"); // <- Replace "#name" with your input id (keep the #)
form.find($("#email")).val("john.doe@example.com");
</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.
