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.
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.
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.
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.
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.
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:
- Step Order: Combine related actions and ensure sequential numbering.
- Formatting Adjustments: Minor consistency updates to headings and sub-steps.
- 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
- The parent page sends the current URL to the iframe using postMessage
- Basin Form Builder automatically captures this data and includes it in form submissions
- 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:
- 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>
- 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>
- 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>
- 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 theredirect
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.