Skip to content

Legacy Form Builder (Form.io)

Use this guide only to maintain an existing form created with Basin's legacy Form.io builder.

Use Form Studio for new forms

Form Builder (Form.io) is a legacy builder and is no longer the recommended way to create forms. For new hosted or embedded forms, use Form Studio.

Existing Form.io Forms

Existing Form.io forms continue to use the Basin form backend for submissions, spam filtering, storage, email, and integrations. Their builder schema, styling, and deployment settings remain separate from Form Studio.

Open the legacy builder from the form's design menu when the form already has a Form.io schema. The dashboard labels this option Form Builder (Legacy).

Edit and Publish

  1. Open the existing Basin form.
  2. Select Design → Form Builder (Legacy).
  3. Edit fields in the Build tab.
  4. Review styling and behavior in the Style and Preview tabs.
  5. Open Publish to copy the current direct link or iframe embed code.
  6. Submit a real test entry and confirm that it reaches the expected Basin inbox.

Use the embed code generated by the Publish tab. It includes the settings needed for iframe sizing and parent-page redirects.

Common Legacy Settings

CAPTCHA

Add the reCAPTCHA component in the builder and choose when it runs. Basin supplies the key used by the legacy builder.

Redirects

Configure the form's redirect in Basin. If the form is embedded in an iframe and the whole page should redirect, enable Redirect Parent Page in the legacy Publish settings and replace the embed code with the newly generated version.

File Upload Field Names

Set the File form-data key on each File component. Basin uses that value as the field name shown with the uploaded attachment.

Reorder Multi-Page Forms

Switch to single-page view, reorder the pages, save, then switch back to multi-page view and save again.

Collaboration

Growth, Pro, and Agency plans support collaborators. Manage project access from the Basin Access page rather than from the builder itself.

Custom Parent-Page Code

Legacy iframe integrations can exchange additional data and lifecycle events with the embedding page, but custom code depends on the embed version and your site's origin.

Validate cross-origin messages

Do not trust arbitrary postMessage events or use * as the target origin in production. Restrict messages to the expected Basin and parent-page origins, validate the message shape, and allow redirects only to destinations you control.

Use the generated iframe code as your starting point. If an existing integration depends on custom parent-page data, analytics events, TrustedForm, or Jornaya, test it end to end before changing the embed. Contact Basin Support for help with a legacy implementation.

Move to Form Studio

There is no documented one-click conversion from a Form.io schema to Form Studio. To replace a legacy form:

  1. Build the replacement in Form Studio.
  2. Recreate required fields, validation, styling, spam protection, email, and integrations.
  3. Test hosted and embedded behavior with real submissions.
  4. Replace the old direct link or iframe only after the new form passes testing.
  5. Keep the legacy form available until you confirm that traffic and submissions use the replacement.

See Creating Forms for other supported approaches, including your own HTML form and Basin JS.