🧱 Playground / Form Builder

The Playground is where you design your form, add components, apply logic, customise branding, and preview the result in real time.

Written By SyncroEdge

Last updated 10 months ago

🆕 Creating a New Form

You can create a form in three ways: from scratch, using a template, or by generating it with AI.

🤖 Generate with AI

  • From the Console, click “Create New Form”

  • Click “Generate with AI” in the form creation modal

  • Enter a short prompt like:

    • “Create a job application form with resume upload and rating”

    • “Generate a lead gen form for a SaaS product demo”

  • AI will automatically:

    • Choose relevant components

    • Apply smart labels and placeholders

    • Add logic where needed (e.g. conditional questions)

  • You can edit everything after generation

🧠 Tip: You can also regenerate or edit your AI prompt directly in the Playground via the AI assistant panel

✍️ Start from Scratch

  • From the Console, click “Create New Form”

  • Select Start from Scratch

  • You’ll enter the Playground with a blank canvas and one default page

📦 Use a Template

  • Open the Templates tab from the left menu

  • Browse categories like Lead Gen, Surveys, Contact Forms, etc.

  • Click on a template to load it into the Playground instantly

  • Customise the pre-built components as needed

🧩 Component Types

FormMaster.io supports a variety of components you can drag and drop into your form:

  • 📋 Choice Fields: Single choice, multiple choice, dropdowns

  • ✍️ Text Inputs: Short text, long text, number fields

  • ⭐ Rating Types: Star rating, opinion scale, thumbs up/down

  • 📁 Uploads: File upload, image input

  • 🕹 Advanced: Date/time pickers, email/phone/contact fields, logic gates

🖥 Layout Panels

The Playground has 3 key areas to build your form:

🔹 Left Panel – Form Layers

  • View your form structure page-by-page

  • Reorder pages or jump between them

  • Manage overall form navigation

🔹 Middle Panel – Canvas

  • This is where you build the form visually

  • Drag components here and edit them directly

  • Supports multi-page navigation

🔹 Right Panel – Properties

  • Configure settings for each selected component:

    • Label

    • Placeholder

    • Validation

    • Required toggle

    • Styling options and more…

🧭 Top Tabs in the Playground

The Playground has 4 main tabs to manage the entire lifecycle of your form.

🛠️ Create

This is your main form builder.

  • Left Panel → Pages & layers

  • Middle → Drag & drop canvas

  • Right Panel → Component properties

  • Add logic, edit text, change layout — this is your “Playground”


⚙️ Setup

Manage form logic, integrations, and settings.

Logic

  • Show/hide components based on user input

  • Build dynamic flows with AND/OR conditions

Integrations

  • Connect apps like Zapier, Slack, Notion, etc.

  • Trigger actions on form submit, draft, etc.

General Settings

  • Allow multiple submissions

  • Set password, auto-save, draft links

  • Send response notifications to the owner's email

  • Open/close form


📤 Share

Control how your form is distributed.

Link Sharing

  • Public

  • Customise title, description, and OG image

Social Share

  • Share to Twitter, WhatsApp, LinkedIn

  • Auto-preview with branding

Embed Options

  • Embed types: Standard, Full Page, Pop-Up, Slider, Side Tab, Popover

  • Customise icons, text, position, colours

  • Display conditions: on load, scroll %, time delay

  • Control frequency: once, every time

  • Generate multiple versions with unique settings

  • Copy & paste HTML embed code to any website


📊 Results

See performance, responses, and insights.

Overview Stats

  • Views, submissions, completion %, drop-off rate

  • Avg. submission time, device/browser/location data

  • Drop-off analysis by question

Filter Responses

  • All-time, Today, 7d, 30d, or custom date range

Summary

  • Auto-visuals:

    • Charts for choices

    • Text lists for open responses

    • Ratings and scale bars

  • Easy data interpretation per question type

Individual Responses

  • Table format like a spreadsheet

  • View all submissions with user ID & answers

  • Export to CSV or sync to Google Sheets


⚙️ Dock at the Bottom

🧾 Setup

  • Set form name, description, SEO, favicon, submission behaviour, and redirects

🔄 Workflow (Integrations)

  • Connect to Slack, Google Sheets, Notion, or any webhook

  • Define what happens after submission

🧠 Logic

  • Add conditional logic to show/hide components or pages

  • Support for multi-condition rules (AND / OR)

🕓 Version History

  • View autosaved snapshots of your form

  • Revert to previous versions if needed

🎨 Branding

  • Apply brand colours, fonts, logos, and border radius

  • Choose from saved themes or create new ones

👁️ Preview

  • Switch between Desktop, Tablet, and Mobile views

  • Test form behaviour before publishing


You’re now ready to publish your form or connect it to apps!