Custom Routing

Use JavaScript to dynamically select your form's endpoint.

To use custom routing with a dropdown menu, follow these steps:
  1. Copy the code below into your form's HTML page
  2. Update the dropdown options, action values, and logic based on your endpoints
  3. 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:
    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.
    Alternatively, you can also add the JavaScript code to a specific page or template in Webflow by following these steps:
    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.