How can I create two dropdown selectors in Webflow for a form, one for 'Location' and one for a hidden email response dropdown for Zapier and CRM integration?

You want to create a form in Webflow with two dropdowns: one visible for “Location” selection and the other hidden for passing an email address tied to each location (for use with Zapier or your CRM). Here's how you can structure that setup.

1. Create the Form and Dropdowns

• Add a Form Block to your page using the Webflow Designer.
• Inside the Form Block, add two Dropdown fields (from the Add panel under Forms > Select).
• Name the first dropdown label "Location" and make it visible.
• Name the second dropdown something like "Location Email", and use Display: none under the Style panel to hide it from users.

2. Populate the Dropdown Options

• In the visible Location dropdown, add location names as options (e.g., "New York", "Los Angeles", etc.).
• In the hidden Email dropdown, add the matching email addresses in the same order as the location options (e.g., "ny@example.com", "la@example.com").
• Important: The order of options should exactly match between the two dropdowns so you can map values correctly.

3. Use Custom JavaScript to Sync Selection

• To automatically update the hidden email dropdown when a user selects a location, embed the following inside a Webflow Embed component just before the closing </body> tag (in Page Settings > Custom Code > Footer):

• Set Display: none for the email dropdown using Webflow Styles, don't rely solely on JS to hide it.

• Reference the dropdowns by their id or name attributes assigned via the Element Settings panel.

• Add simple script to sync selected index:

  Example (replace #location and #location-email with your actual field ids):

  ``

4. Set the Right Field Names for Zapier

• In the Element Settings panel, assign unique Name attributes:
• For the visible dropdown: Name it something like user-location
• For the hidden email dropdown: Name it destination-email
• These Name values will show up in Zapier when you connect the form through Webflow Form Submission or Webhooks.

5. Test the Form Integration

• Publish the site and submit a test form.
• Check your form submission in Webflow > Form Submissions or through Zapier.
• Ensure the selected location and the correct email are both submitted.

Summary

To achieve your goal, add two dropdown inputs—one visible for Location, and one hidden for Email—with synchronized options. Use JavaScript to sync the hidden email value based on the selected location. Assign proper Name attributes so Zapier or your CRM can access the correct values during submission.