🧱 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!