Is there a way to pre-populate a contact form on a CMS page based on the user's previous selection?

Published on
September 22, 2023

Yes, there is a way to pre-populate a contact form on a CMS page based on the user's previous selection in Webflow. Here's how you can achieve this:

  1. Create a CMS Collection: Start by creating a CMS collection in Webflow. This collection will hold the options that users can select from.

  2. Add a Collection List: On the CMS page where you want the contact form, add a Collection List element. Bind this element to the CMS collection you created in step 1. This will display the options for users to select from.

  3. Create a Form: Add a Form element to your CMS page. Inside the form, add form fields such as Name, Email, Message, etc.

  4. Add Form Element Attributes: Add a unique name attribute to each form field. For example, you can add "name" as the name attribute for the Name field.

  5. Set Up Interaction: Now, you need to add an interaction to the Collection List element. Select the element, go to the Interactions panel, and choose the "link block is clicked" trigger. Then, select the form fields you want to pre-populate and choose the values to populate from the CMS collection fields. For example, you can bind the Name field to the CMS collection Name field.

  6. Publish and Test: Once you have set up the form and interaction, publish your site and test it. Each time a user selects an option from the Collection List, the form fields will be automatically populated based on their selection.

This method allows you to dynamically pre-populate a contact form on a CMS page in Webflow, making the user experience more convenient. It can be used for various purposes, such as pre-filling a form with user preferences or previous selections.

Example: Let's say you have a CMS collection of car models, and each model has fields like "Name", "Manufacturer", and "Price". When a user clicks on a car model in the Collection List, the form fields for Name, Manufacturer, and Price will be automatically populated with the corresponding values from the selected car model.

By using this method, you can provide a personalized experience to your users and reduce the effort required to fill out the form.