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.

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.