[Code] Prefill Form Input Using a String of Custom Fields

In this article, you learn how to capture data from multiple fields and then automatically display it as a single string inside a different pre-filled custom field.

Let's say, for example, you want to combine the data from three separate address fields (e.g. street address, city, and zip code) and then pre-fill one new input field with that data. Here's how.

Adding Custom Code

In this example, the user has three input fields:

• Street Address
• City
• Zip Code

The code below combines these fields into a string and then pre-fills a custom field with that string.

1. Log in to your Webflow account and open a project.
2. Open the page with the fields that have the original data and the custom field.
3. Click the Settings icon and scroll down to Before </body> tag heading and paste the following code into the field.
4. Click Save and Publish.

<script>
window.addEventListener('load', function() {
  // Get the values of the three fields
  var streetAddress = document.querySelector('[data-ms-member="street-address"]').value;
  var city = document.querySelector('[data-ms-member="city"]').value;
  var zipCode = document.querySelector('[data-ms-member="zip-code"]').value;

  // Concatenate the values into the total address
  var totalAddress = streetAddress + ', ' + city + ', ' + zipCode;

  // Set the value of the total address field
  document.getElementById('total-address').value = totalAddress;
});
</script>

Hiding the Original Fields

By default, the Webflow page displays the fields with the original data and the string in the custom field. Optionally, you can hide the fields that contain the original data.

That's it.

Now you know how to combine data from different fields into a string and then pre-fill a custom field with that string.