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 from 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 they 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 and select user's profile and select 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 in order 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 and switch back to multi-step view, and then save again.