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?
- Create a visible “Location” dropdown and a hidden “LocationEmail” dropdown with matching labels and email value mappings.
- Use custom JavaScript to sync the visible selection to the hidden dropdown, ensuring the correct email is submitted to Zapier or your CRM.
To build a form in Webflow with two dropdown selectors—one visible for “Location” and one hidden to send data to Zapier or a CRM—you’ll configure both elements within the form component using Webflow's form builder and custom settings.
1. Create the Visible Dropdown Selector for “Location”
- Drag a Dropdown or Select element into your form.
- Label it “Location” for clarity.
- Set the Name attribute (in the settings panel) to something like
Location—Zapier will use this to identify the field. - Add your desired dropdown items (e.g., New York, Los Angeles, etc.).
2. Add a Hidden Dropdown for Email Routing
Since Webflow doesn’t support conditional logic on the native form, create a second Select element and hide it from the user:
- Drag another Select element into the form.
- Label it “Location Email Routing” or similar.
- Set the Name attribute to something like
LocationEmail. - Add the same dropdown items, but with internal values like:
- New York →
ny-team@example.com - Los Angeles →
la-team@example.com - Style this Select element to be hidden:
- Set Display: None under the Style panel.
- Alternatively, add a CSS class like
hidden-fieldand hide it manually.
3. Sync the Two Dropdowns with Custom JS
To make the hidden field reflect the visible choice, use a simple custom script:
- Add this to the Page Settings > Before </body> tag field:
```js
<script>
document.addEventListener("DOMContentLoaded", function() {
const locationSelect = document.querySelector('select[name="Location"]');
const emailSelect = document.querySelector('select[name="LocationEmail"]');
locationSelect.addEventListener('change', function() {
emailSelect.value = emailSelect.querySelector(
option[label='${locationSelect.value}']
)?.value || '';
});
});
</script>
```
- Make sure each option's
labelin the hidden field matches the visible dropdown. - Example: Label = “New York”, Value =
ny-team@example.com.
4. Configure Zapier or CRM to Use Hidden Field
- The form submission will send both dropdown values.
- In Zapier, map the
LocationEmailfield to the target email/CRM recipient. - This allows routing based on the chosen location without exposing email addresses to the user.
Summary
Create one visible dropdown for user location selection and one hidden dropdown containing mapped email addresses. Sync them via custom JavaScript so the correct email populates during form submission, enabling Zapier or your CRM to route the data appropriately.
