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:

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 capture the parent page URL and pass it into an iframe form submission. By following these steps, you'll be able to track the page URL where the form submission originated.

---

Step 1: Add a Hidden Field to Form

1. Sign in to your Basin account.
2. Go to Form Builder for the form you want to modify.
3. Click the Add Component button.
4. Select Hidden from the component options.
5. Set the Label to "origin" (the key where the URL will be stored).
6. Click Save.

Note

Ensure that the hidden field key is set to origin. This is where the URL will be stored.

---

Step 2: Add Custom JavaScript to Form Builder

1. In Form Builder, go to the Design tab at the top.
2. Click on Custom to access custom design options.
3. Locate the field labeled Custom Head. Add the following JavaScript to this field:

<script>
// Listen for the message sent from the parent page
window.addEventListener('message', function(event) {
  console.log("Script running!");
  const parentUrl = event.data;

  // Get the first (and only) form on the page
  const formioForm = Object.values(Formio.forms)[0];

  if (formioForm) {
    // Find the hidden component by its key (assumed to be 'origin')
    const hiddenFieldComponent = formioForm.getComponent('origin'); // Replace 'origin' with the actual key of your hidden field

    if (hiddenFieldComponent) {
      // Set the value of the hidden input to the parent URL
      hiddenFieldComponent.setValue(parentUrl);
      console.log('Hidden field populated with parent URL:', parentUrl);
    } else {
      console.error('Hidden field with key "origin" not found');
    }
  } else {
    console.error('No Form.io form found on the page');
  }
});
</script>

4. Click Save.

---

Step 3: Add JavaScript to the Parent Page

To pass the current page URL from the parent page to the iframe:

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

window.onload = function() {
  const iframes = document.querySelectorAll('iframe.basinIframe'); // Selects all <iframe> elements with the class 'basinIframe' on the page
  const parentUrl = window.location.href;
  iframes.forEach(function(iframe) {
    if (iframe.contentWindow) {
      iframe.contentWindow.postMessage(parentUrl, '*');
    }
  });
};

This code will send the parent page URL to the iframe when the page loads.

---

Summary

With these scripts in place:

1. The parent page URL is sent to the iframe on page load.
2. The iframe script captures the URL and populates a hidden field in the form with it.
3. When the form is submitted, the hidden field value will contain the originating URL for tracking purposes.

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

---

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.