Custom Routing
Use JavaScript to dynamically select your form's endpoint.
To use custom routing with a dropdown menu, follow these steps:
- Copy the code below into your form's HTML page
- Update the dropdown options, action values, and logic based on your endpoints
- Customize the rest of the form as needed
Note: The action value specified in the <form> tag will be the default starting endpoint
HTML
<form action="https://usebasin.com/f/your_form_id">
<select basin-js-custom-routing>
<option value="https://usebasin.com/f/another_form_id">Option 1</option>
<option value="https://usebasin.com/f/another_form_id">Option 2</option>
</select>
</form>
<script>
const selects = document.querySelectorAll('[basin-js-custom-routing]');
for (const select of selects) {
select.addEventListener('change', () => {
const form = select.closest('form');
form.action = select.value;
});
}
</script>
Webflow Specific Instructions
Note: The following instructions are specific to Webflow. If you are not using Webflow, you can skip this section.
Webflow Select (Dropdown)
You will need to add a custom <select> attribute named "basin-js-custom-routing" to the Select (as per above example).
Also make sure to set the Select's "Value" to the Basin form URL that you want to use as the form endpoint.
To add the above JavaScript to a Webflow site, you can follow these steps:
- Navigate to the Webflow editor for your site.
- In the left-hand panel, click on the "Project Settings" icon.
- In the top-right corner of the "Project Settings" panel, click on the "Custom Code" tab.
- In the "Custom Code" tab, you will see a text area labeled "Before