Skip to content

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.

GIF of the Basin Form Studio

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).

GIF showing how to add reCAPTCHA to your form

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.

Screenshot showing how to redirect the parent page when embedding the Basin iframe form

TrustedForm & Jornaya Compliance Widgets

Form Studio includes dedicated drag-and-drop widgets for lead generation compliance. These widgets help you meet TCPA (Telephone Consumer Protection Act) requirements and provide proof of consent for your leads.

What Are These Tools?

TrustedForm provides independent, third-party documentation that a consumer submitted their information on your form. It captures a certificate with:

  • Screenshot of the form at the moment of submission
  • Timestamp and session data
  • Proof that consent language was displayed

Jornaya LeadID tracks the consumer journey across your landing pages and forms, providing:

  • Unique lead identifier for each submission
  • Session tracking across multiple pages
  • Fraud detection and lead quality signals

Both services are commonly required by lead buyers in industries like insurance, mortgage, solar, and home services.

Setting Up TrustedForm
  1. Add the TrustedForm Widget
  2. Open your form in Form Studio
  3. In the toolbox, find the TrustedForm widget

  4. Drag it into your form (it can be placed anywhere - it's invisible to users)

  5. No Additional Configuration Needed

  6. Basin automatically loads the TrustedForm script
  7. Certificate URLs are captured with each submission

  8. Data is included in webhooks and available in submission details

  9. Accessing TrustedForm Data

  10. The xxTrustedFormCertUrl field is automatically added to submissions
  11. Use this URL in your webhooks to send to lead buyers
  12. Available as a merge tag: {{xxTrustedFormCertUrl}}
Setting Up Jornaya LeadID
  1. Get Your Campaign Script
  2. Log in to your Jornaya account
  3. Navigate to your campaign settings

  4. Copy your campaign-specific JavaScript snippet

  5. Add the Jornaya Widget

  6. Open your form in Form Studio
  7. Find the Jornaya widget in the toolbox

  8. Drag it into your form

  9. Configure the Widget

  10. Click on the Jornaya widget to open settings
  11. Paste your Jornaya campaign script into the script field
  12. Save your form

Screenshot of Jornaya widget settings showing where to paste the campaign script

  1. Accessing Jornaya Data
  2. The leadid_token field is automatically captured with each submission
  3. Use this token in your webhooks for lead verification
  4. Available as a merge tag: {{leadid_token}}
How It Works

When a user submits your form:

  1. Basin loads the compliance scripts within the form iframe
  2. Scripts generate their respective tokens/certificates
  3. These values are captured as hidden fields
  4. Submission includes all compliance data
  5. Webhooks receive the complete payload with compliance tokens
Benefits of Using Form Studio Widgets
Approach Setup Complexity Maintenance Works in iFrames
Form Studio Widgets ✅ Simple drag & drop ✅ Automatic ✅ Yes
Manual Script Integration ⚠️ Requires coding ⚠️ Manual updates ⚠️ Requires workarounds
Compatibility
  • ✅ Hosted forms (direct link)
  • ✅ iFrame embeds
  • ✅ CDN one-line embed
  • ✅ All Basin deployment methods
Troubleshooting

Certificate/Token Not Appearing:

  • Verify the widget is present in your form
  • For Jornaya, check that your script is correctly pasted
  • Ensure the form was saved after adding the widget
  • Test with a real submission (not preview mode)

Lead Buyer Rejecting Certificates:

  • Verify the certificate URL is valid by opening it in a browser
  • Check that your TrustedForm account is active
  • Ensure the certificate hasn't expired (typically valid for 72 hours)

Testing Compliance Widgets

Always test your forms with real submissions (not preview mode) to verify compliance data is captured correctly. Preview mode may not fully initialize the third-party scripts.

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.

Screenshot of the Capture Source URL option in the Deploy tab

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.