How can I create a Webflow form that directs users to a new page and pre-fills certain fields with data from a CMS item?

Published on
September 22, 2023

To create a Webflow form that directs users to a new page and pre-fills certain fields with data from a CMS item, you can follow these steps:

  1. Create your CMS collection and define the fields that you want to pre-fill in the form.
  2. Design your form layout using Webflow's built-in form elements.
  3. Add the form elements to your page, including input fields for the data you want to pre-fill.
  4. Make sure the input fields have appropriate names that match the field names in your CMS collection.
  5. Add a button or submit element to your form to trigger the submit action.
  6. Select the form element and go to the Form Settings panel on the right-hand side.
  7. Under the Form Actions section, select the Redirect option.
  8. Enter the URL of the page you want the form to redirect to after submission.
  9. To pre-fill the fields with data from a CMS item, add a dynamic binding to each input field. You can do this by selecting each input field and going to the Settings panel on the right-hand side.
  10. In the Settings panel, click on the plus icon next to the placeholder attribute and choose the field from your CMS collection that you want to pre-fill.
  11. Save your changes and publish your site to see the form in action.

By following these steps, you can create a Webflow form that directs users to a new page and pre-fills certain fields with data from a CMS item. This can be useful for creating personalized user experiences or for capturing user information and displaying it on subsequent pages.

Additional Questions:

  1. How do I create a multi-step form in Webflow?
  2. Can I integrate third-party form tools with Webflow?
  3. How can I style my Webflow form to match my website's design?