Skip to content

Custom Routing

Use JavaScript to dynamically select your form's endpoint.

Follow these steps to use custom routing with a dropdown menu:

1. Copy code

Copy this code into your form's HTML page

<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>
2. Update the dropdown options, action values, and logic based on your endpoints
3. Customize the rest of the form as needed

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.

Add the JavaScript to a Webflow site

  1. Navigate to the Webflow editor for your site.
  2. In the left-hand panel, click on the "Project Settings" icon.
  3. In the top-right corner of the "Project Settings" panel, click on the "Custom Code" tab.
  4. In the "Custom Code" tab, you will see a text area labeled "Before tag". This is where you can add your JavaScript code.
  5. Copy and paste the JavaScript code from above into the text area.
  6. Click the "Save" button to save your changes.
  7. Your JavaScript code will now be included in the site whenever it is published.

Add JavaScript to specific Webflow page/template

If you don't want to add the JavaScript to your entire site you can alternatively add it to a specific page/template:

  1. Navigate to the Webflow editor for your site.
  2. In the left-hand panel, click on the page or template that you want to add the JavaScript code to.
  3. In the top-right corner of the page or template editor, click on the "Settings" tab.
  4. In the "Settings" tab, click on the "Custom Code" sub-tab.
  5. In the "Custom Code" sub-tab, you will see a text area labeled "Before tag". This is where you can add your JavaScript code.
  6. Copy and paste the JavaScript code from above into the text area.
  7. Click the "Save" button to save your changes.
  8. Your JavaScript code will now be included in the page or template whenever it is published.