Skip to content

URL Parsing

Basin provides a powerful URL parsing feature that automatically breaks down the source URL of form submissions into its components. This allows you to track where submissions are coming from and use this information in your webhooks and email templates.

How It Works

When a form submission includes a source_url parameter, Basin automatically parses it into the following components:

  • source_host: The domain name (e.g., "example.com")
  • source_path: The path portion of the URL (e.g., "/contact")
  • source_query: The query string parameters (e.g., "?utm_source=google")
  • source_fragment: The URL fragment/hash (e.g., "#section1")

These parsed components are available in: - Default webhooks - Custom webhooks using handlebars merge tags - Custom email templates using handlebars merge tags

Setup Options

There are two ways to set up URL parsing for your forms:

If you're using Basin JS v2.5.0 or above, you can enable URL parsing by adding the data-basin-capture-url attribute to your form:

<form action="https://usebasin.com/f/YOUR-FORM-ID"
      method="POST"
      data-basin-form
      data-basin-capture-url="true">
  <!-- Your form fields here -->
</form>

This is the simplest way to enable URL parsing as Basin JS will automatically capture and send the current page's URL with the submission.

Option 2: Manual Setup

If you're not using Basin JS or need more control, you can manually add URL parsing to your form:

  1. Add a hidden input field to your form:
<form action="https://usebasin.com/f/YOUR-FORM-ID" method="POST">
  <!-- Your form fields here -->
  <input type="hidden" name="source_url" id="source-url">
</form>
  1. Add JavaScript to capture and set the URL:
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const sourceUrlInput = document.getElementById('source-url');
    if (sourceUrlInput) {
      sourceUrlInput.value = window.location.href;
    }
  });
</script>

Using Parsed URL Components

Once you've set up URL parsing, you can use the parsed components in your webhooks and email templates using handlebars merge tags:

In Webhooks

{
  "submission_url": "{{source_url}}",
  "domain": "{{source_host}}",
  "page": "{{source_path}}",
  "query_params": "{{source_query}}",
  "section": "{{source_fragment}}"
}

In Email Templates

<p>Form submitted from: {{source_url}}</p>
<p>Domain: {{source_host}}</p>
<p>Page: {{source_path}}</p>
<p>Query Parameters: {{source_query}}</p>
<p>Section: {{source_fragment}}</p>

Example Use Cases

  1. Analytics Tracking: Track which pages generate the most form submissions
  2. UTM Parameter Analysis: Parse and analyze marketing campaign parameters
  3. Section-specific Responses: Send different email responses based on which section of your site the form was submitted from
  4. A/B Testing: Track form performance across different pages or variations

Notes

  • If a component is not present in the URL (e.g., no query parameters), the corresponding merge tag will return an empty string
  • The source_url parameter should be named exactly as shown for the parsing to work but source-url or sourceUrl should also work.