Form Studio

A no code way to build forms and integrate them into your website.

What is Basin Form Studio?

Basin Form Studio, powered by SurveyJS Survey Creator, provides a powerful and flexible solution for building modern forms and surveys. Whether you are a developer or a non-technical user, you can easily create and manage forms with Basin Form Studio while maintaining full control over the front-end experience.

How does Basin Form Studio work?

Basin Form Studio leverages the SurveyJS to provide a seamless form creation and management experience. You can create forms using the drag-and-drop interface, configure logic and validation, and Basin handles hosting, submissions, spam filtering, notifications, and integrations.

Key Features

• Drag-and-drop form designer
• Conditional logic and branching
• Validation and input masking
• Spam filtering
• Multi-page (wizard) forms
• Hosted forms and iframe embeds
• Themes and styling

1. Setting up Basin Form Studio

To get started with Basin Form Studio, create a Basin account. Open your project, create a new Form Studio form, and start building. Configure fields, logic, and validation as needed.

2. Styling your form

Use the Themes tab to select a theme for your form. You can also customize the theme to your liking.

3. Publishing Your Form

When your form is ready, go to the Deploy tab to view sharing options. You can embed your form as an iframe on your site, or Basin can host your form at a shareable link.

https://usebasin.com/f/FORM_UUID/hosted/HOSTED_UUID

CDN one-line embed (auto-updating)

Use the CDN embed to include your form with a single script tag. This will always render the latest published version of your Form Studio form and automatically apply your configured settings (theme, redirects, CAPTCHA, autoresize, etc.). Copy the exact snippet from your form's Deploy tab.

<script
  async
  src="https://hf.usebasin.com/hf/FORM_UUID-HOSTED_UUID.js">
</script>

Notes:

• The snippet above uses placeholders. Use the CDN URL provided in your Deploy tab.
• The CDN embed sets up the iframe for you, and keeps it updated so changes you make in the Studio are reflected in the embed immediately without needing to redeploy your site.
• You can place multiple forms on a page by including multiple script tags (one per form).

Additional Configuration

Adding reCAPTCHA to your Form

To add reCAPTCHA, simply select the reCAPTCHA option in the Deploy tab. No keys are required; Basin automatically manages them. Choose when the reCAPTCHA should trigger (on submit or on load).

Configuring Redirects

Configure redirects within the frame or redirect the parent page after submission. Use the share page to generate iframe code and optional JavaScript that you can copy and paste into your site.

TrustedForm & Jornaya compliance widgets

Form Studio includes dedicated drag-and-drop widgets for TrustedForm and Jornaya LeadID.

• TrustedForm widget: Drag it into your form. Basin will handle loading and submitting the certificate fields with each submission automatically. No extra scripts are required on your site.
• Jornaya widget: Drag it into your form and paste your Jornaya campaign script into the widget's settings. Basin wires the callback and includes the LeadID token with each submission.

Notes:

• Using these widgets replaces the need for manual parent-page scripts in most cases.
• Works with hosted forms, iframe embeds, and the CDN one-line embed.

Capture Parent Page URL in Iframe

To capture the parent page URL in the iframe, simply select the Capture Source URL option in the Deploy tab. This will add a hidden field to your form that will capture the parent page URL.

Notes:

• This will add a hidden field to your form that will capture the parent page URL.
• This will work with hosted forms, iframe embeds, and the CDN one-line embed.

Adding Additional Data to Form Submissions

Send extra context from the parent page to the embedded form using the postMessage API. This lets you include metadata like user preferences, page info, or tracking data with each submission.

How It Works

1. The parent page sends a payload to the iframe using postMessage.
2. Basin Form Studio captures this data and includes it with submissions.
3. No additional configuration is needed in the Studio.

Example Implementation

Add the following JavaScript to the parent page where the iframe is embedded, choose the action flag addHiddenFields so your key/value pairs are added as hidden fields:

<script>
  // Parent page
  window.addEventListener('load', () => {
    const iframes = document.querySelectorAll('iframe.basinIframe');
    const payload = {
      action: 'addHiddenFields',
      key: 'value',
      key2: 'value2'
    };

    iframes.forEach((iframe) => {
      iframe.contentWindow?.postMessage(payload, '*');
    });
  });
</script>

Key Points

• Automatic integration: Data sent via postMessage is included with the submission without modifying the form.
• Use the action flag: Include action: 'addHiddenFields' so your key/value pairs are added as hidden fields.
• Custom data: Add any keys relevant to your use case (e.g., campaignId, utm params).
• Timing: Run on page load to ensure the iframe is ready to receive the message.