How to pre-fill Webflow form input fields at page load

Bjorn Krols

Bjorn Krols

Published on
15 November 2021

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>
  1. Find the name of your form.
  2. Find the ids of the input fields you want to pre-fill.
  3. 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.

Subscribe to our newsletter

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

More like this