Skip to content

Form Builder

A no code way to build forms and integrate them into your website.

What is Basin Form Builder?

Basin Form Builder, powered by Form.io, provides a powerful and flexible solution for form creation and data management. Whether you are a developer or a non-technical user, you can easily create and manage forms with Basin Form Builder while maintaining full control over the front-end experience.

How does Basin Form Builder work?

Basin Form Builder leverages the power of Form.io to provide a seamless form creation and management experience. You can easily create forms using the drag-and-drop interface, customize the form fields, and manage the collected data using Basin as the backend.

Key Features

  • Drag-and-drop form builder
  • Customizable form fields
  • Data management
  • Validation
  • Spam filtering
  • Multi-step forms
  • Hosted forms
  • Customizable form styling

1. Setting up the Basin Form Builder

To get started with Basin Form Builder, you need to create a Basin account. Once you have an account, you can start creating forms using the form builder. You can customize the form fields, set up data management, and configure authentication settings.

GIF showing how to use the Basin Form Builder

2. Publishing Your Form

Once your form is ready to go, navigate to the share tab to see the options for sharing your form. You can embed your form as an iFrame on your site or Basin can host your form at the provided link.

Additional Configuration

Adding reCAPTCHA to your Form

To add reCAPTCHA to your form, navigate to the form builder and select the reCAPTCHA option. Drag and drop it into your form. No need to provide the key as we add this automatically for you. All you need to do is decide when the reCAPTCHA should trigger, on submit or on load.

GIF showing how to add reCAPTCHA to your form

Collaborating on Form Builders

To collaborate on form builders, you can invite users to your project and edit their access levels. To increase a user's access level to the editor role, navigate to the Access top-level tab, select the user's profile, and choose the 'Editor' role from the dropdown menu.

GIF showing how to manage project access on your Basin account

Configuring Redirects

Redirects can be configured within the frame or outside the frame to redirect the parent page. This can be done from the share page where iframe code and JavaScript is generated in a copy-pastable block for you.

GIF showing how to redirect the parent page when embedding the Basin iframe form

Naming File Uploads

To name file uploads to keep track of which input fields they came from, you can use the File form-data key attribute found on the File tab within the file component. This attribute will be used as the key in the form data object that is sent to your backend.

File component naming configuration File component naming submission example

Tips and Tricks

Re-ordering your form pages

It's possible to re-order your multi-step form pages by switching to single-page view and dragging and dropping the pages in the order you want them to appear. Then save the form, switch back to multi-step view, and save again.

The instructions are mostly clear and follow a logical order, but here are some minor adjustments to improve clarity:

  1. Step Order: Combine related actions and ensure sequential numbering.
  2. Formatting Adjustments: Minor consistency updates to headings and sub-steps.
  3. Clarify Note Placement: Move the note so it’s directly relevant to the hidden field addition.

Capture Parent Page URL in Iframe

This guide shows how to automatically capture the parent page URL in your iframe form submissions. Basin Form Builder now automatically includes the parent page URL when you send it via postMessage from the parent page.

Implementation

To capture the parent page URL, simply add the following JavaScript to the parent page where the iframe is embedded:

window.addEventListener('load', () => {
  const iframes = document.querySelectorAll('iframe.basinIframe');
  const parentUrl = window.location.href;

  iframes.forEach((iframe) => {
    iframe.contentWindow?.postMessage({ source_url: parentUrl }, '*');
  });
});
How It Works
  1. The parent page sends the current URL to the iframe using postMessage
  2. Basin Form Builder automatically captures this data and includes it in form submissions
  3. No additional configuration is needed in the form builder itself
Key Benefits
  • No Manual Setup: No need to add hidden fields or custom JavaScript to the form
  • Automatic Integration: The parent URL is automatically included with form submissions
  • Simple Implementation: Only requires adding a small script to the parent page

Now, your form submissions will automatically include the URL of the page where the form was submitted!

Adding Additional Data to Form Submissions

You can add additional data to your form submissions by sending custom data from the parent page to the iframe using the postMessage API. This allows you to include context-specific information such as user preferences, page metadata, or any other relevant data that should be captured with the form submission.

How It Works

When the parent page sends data via postMessage, the Basin Form Builder iframe automatically includes this data in the form submission. This data will appear alongside the regular form field data when the submission is processed.

Example Implementation

Add the following JavaScript to the parent page where the iframe is embedded:

<!-- Parent page -->
window.addEventListener('load', () => {
  const iframes = document.querySelectorAll('iframe.basinIframe');
  const payload = {
    source_url: window.location.href,
    key: 'value',
    key2: 'value2'
  };

  iframes.forEach((iframe) => {
    iframe.contentWindow?.postMessage(payload, '*');
  });
});
Key Points
  • Automatic Integration: The data sent via postMessage is automatically included in the form submission without needing to modify the form itself.
  • Custom Data: You can include any key-value pairs in the payload object that are relevant to your use case.
  • Timing: The script runs on page load to ensure the iframe is ready to receive the message.
Example Use Cases
  • Adding user session information
  • Including page metadata (URL, timestamp, referrer)
  • Passing tracking or analytics data
  • Including user preferences or settings
  • Adding A/B testing variant information
Advanced Example: Lead Compliance Tracking with TrustedForm + Jornaya

For businesses in regulated industries (insurance, finance, solar, etc.), capturing compliance data is crucial for lead tracking and regulatory requirements. This example shows how to automatically include TrustedForm certificates, Jornaya LeadID tokens, and source URL data in your Basin Form Builder submissions.

What This Captures: - Source URL: The page where the form was submitted - TrustedForm Certificate: Compliance data proving consent and form interaction - Jornaya LeadID: Universal lead identifier for lead tracking across platforms

Implementation Steps:

  1. Add the hidden form structure for certificate data:
<!-- Hidden form to capture compliance certificates -->
<form id="compliance-certs" style="display:none;">
</form>

2. **Add your Basin Form Builder iframe:**

```html
<!-- Your Basin Form Builder iframe code goes here -->
<iframe class="basinIframe" src="https://usebasin.com/f/YOUR_FORM_ID"
        width="100%" height="500" frameborder="0"></iframe>
  1. Add the data collection and transmission script:
<script>
  function sendComplianceData(token = null) {
    // Start with the source URL
    const payload = {
      source_url: location.href,
    };

    if (token) {
      payload.leadid_token = token;
    }

    // Collect all hidden field values from the compliance form
    const complianceForm = document.getElementById('compliance-certs');
    if (complianceForm) {
      complianceForm.querySelectorAll('input[type="hidden"]').forEach(input => {
        if (input.name && input.value) {
          payload[input.name] = input.value;
        }
      });
    }

    // Send data to all Basin iframes on the page
    document.querySelectorAll('iframe.basinIframe').forEach(iframe => {
      iframe.contentWindow?.postMessage(payload, '*');
    });

    console.log('Compliance data sent to Basin:', payload);
  }

  // Send data when page loads (for static certificates)
  addEventListener('load', sendComplianceData);

  // Jornaya callback - automatically called when LeadID is generated
  // This will also pick up any TrustedForm certificates that were added to the form
  function jornayaLeadIdCallback(leadId) {
    sendComplianceData(token = leadId);
  }
</script>
  1. Add the TrustedForm SDK:
<!-- TrustedForm SDK -->
<script type="text/javascript">
  (function() {
    var tf = document.createElement('script');
    tf.type = 'text/javascript';
    tf.async = true;
    tf.src = ("https:" == document.location.protocol ? "https" : "http") +
             "://api.trustedform.com/trustedform.js?field=trusted_form_cert_id&ping_field=trusted_form_ping_id";
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tf, s);
  })();
</script>
  1. Add the Jornaya SDK, make sure to use your own Jornaya account ID:
<!-- Jornaya LeadID SDK -->
<script id="LeadiDscript">
(function () {
  var s = document.createElement('script');
  s.async = true;
  s.src = '//create.lidstatic.com/campaign/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js?snippet_version=2&callback=jornayaLeadIdCallback'; // Callback triggers data transmission to Basin
  document.getElementById('LeadiDscript').parentNode.insertBefore(s, null);
})();
</script>

Key Benefits:

  • Automatic Compliance: Certificates and LeadIDs are automatically captured and included
  • Real-time Updates: Data is re-sent whenever new certificates are generated
  • Complete Audit Trail: Source URL, timestamps, and compliance data in every submission
  • Regulatory Compliance: Meets TCPA and other regulatory requirements for lead tracking

Notes:

  • Replace YOURID in the Jornaya script with your actual Jornaya account ID
  • The TrustedForm and Jornaya callbacks automatically trigger when certificates are ready
  • All compliance data appears alongside your regular form fields in Basin submissions
  • This approach works with both single-page and multi-step forms

Events Emitted by Basin Form Builder

Basin Form Builder emits several events that can be utilized for custom interactions both within the frame and by the parent page embedding the form. These events can be consumed by adding custom scripts to the Custom Head section in the Form Builder under Design -> Custom Tab: Custom Head.

Events Emitted to the Parent Window

When the form is embedded as an iframe, it can communicate with the parent window (the site that embeds the form). This allows for deeper integrations and dynamic behaviors:

Recommended Method

This is the recommended method. It allows the re-use of scripts already included on the parent page and provides a more robust way to handle form events.

  • basinFormReady: Sent to the parent window when the form is ready.

Usage Example in Parent Page:

window.addEventListener('message', function(event) {
  if (event.data.action === 'basinFormReady') {
    console.log('Form inside the iframe is ready.');
    // Execute parent page logic
  }
});
  • basinSubmitDone: Sent to the parent window when the form submission is successful.

Usage Example in Parent Page:

window.addEventListener('message', function(event) {
  if (event.data.action === 'basinSubmitDone') {
    console.log('Form submission completed successfully.');
    // Execute parent page logic
  }
});
  • basinSubmitError: Sent to the parent window when there is an error in the form submission.

Usage Example in Parent Page:

window.addEventListener('message', function(event) {
  if (event.data.action === 'basinSubmitError') {
    console.error('Error occurred during form submission.');
    // Handle error on parent page
  }
});
  • redirect: Sent to the parent window when a redirect is required after form submission.

Usage Example in Parent Page:

window.addEventListener('message', function(event) {
  if (event.data.action === 'redirect') {
    window.location.href = event.data.url;
  }
});

Events Emitted Within the Frame

Events emitted within the iframe are useful when you want to trigger custom logic based on form actions:

  • basinFormReady: Emitted when the form is fully loaded and ready to interact with.

Usage Example:

window.addEventListener('basinFormReady', function() {
  console.log('Form is ready to use!');
  // Custom logic here
});
  • basinSubmitDone: Emitted after the form submission is successfully completed.

Usage Example:

window.addEventListener('basinSubmitDone', function() {
  console.log('Form submitted successfully!');
  // Custom logic here
});
  • basinSubmitError: Emitted if there is an error during the form submission process.

Usage Example:

window.addEventListener('basinSubmitError', function() {
  console.error('An error occurred during form submission.');
  // Custom error handling here
});

Important Notes

  • Consuming Events Within the Frame: You can add custom scripts directly to the Custom Head section in the Form Builder settings to consume these events. For instance, if you are using Google Tag Manager, it must be included within the frame. Ensure that the submit event tracking triggers before the internal frame redirects to the success page. You can add these custom scripts directly to the Custom Head section in the Form Builder settings to consume these events.
  • Consuming Events in the Parent Window: Ensure that any script listening for messages from the iframe is on the same domain or uses appropriate cross-origin settings for security.
  • No Parent Page Redirection: The events emitted to the parent window will work correctly only if the iframe is not set to redirect the parent page. A bulletproof flow for this might be to use the basinSubmitDone event to trigger a redirect on the parent page instead of relying on the redirect event supported by Basin iframe script generator.

This updated content provides a comprehensive guide on how users can leverage custom events to enhance their form integration experiences.