form builder
The clout form builder is a powerful drag-and-drop interface that lets you create beautiful forms without any coding knowledge. Build everything from simple contact forms to complex multi-step surveys.
builder interface overview
sidebar tabs
- • questions: drag and drop different question types
- • templates: browse and apply pre-built form templates
- • design: customize colors, fonts, and branding
main canvas
- • live preview: see exactly how your form will look
- • drag targets: drop questions anywhere in your form
- • inline editing: click to edit questions directly
getting started with the builder
step-by-step walkthrough
- Click "create form" from your dashboard or go to
/builder - Choose to start from scratch or select a template from the templates tab
- Drag question types from the questions sidebar into your form canvas
- Click on any question to edit its settings, validation rules, and appearance
- Use the design tab to customize colors, fonts, and add your logo
- Preview your form using the preview button to see the user experience
- Save as draft or publish when you're ready to collect responses
builder features
auto-save
your work is automatically saved every few seconds, so you never lose progress
live preview
see exactly how your form will look to users as you build
real-time design
design changes are applied instantly with live preview
keyboard shortcuts
navigation
- Ctrl + S Save draft
- Ctrl + P Preview form
- Ctrl + Z Undo changes
editing
- Delete Remove selected question
- Enter Edit question text
- Esc Cancel editing
💡 pro tip: start with a template that's close to what you need, then customize it. This is much faster than building from scratch and ensures you follow form best practices.
question types
Clout supports a comprehensive variety of question types to capture any kind of information you need. Each type is optimized for specific use cases and includes built-in validation.
text input types
short text
Single-line text input perfect for names, titles, or brief responses.
- • character limits
- • pattern validation
- • placeholder text
long text
Multi-line textarea for comments, feedback, or detailed responses.
- • adjustable height
- • word/character count
- • rich text options
Email input with automatic format validation and verification.
- • format validation
- • domain checking
- • duplicate detection
phone number
Formatted phone number input with international support.
- • auto-formatting
- • country codes
- • validation rules
selection types
multiple choice
Radio buttons for single selection from multiple options.
- • unlimited options
- • custom styling
- • "other" option support
checkboxes
Multiple selection checkboxes for choosing several options.
- • min/max selections
- • select all option
- • conditional logic
rating
Star ratings, number scales, or emoji-based feedback.
- • 1-10 or 1-5 scales
- • star, heart, thumbs icons
- • custom labels
date picker
Calendar interface for selecting dates and times.
- • date ranges
- • time selection
- • timezone support
advanced question features
conditional logic
Show or hide questions based on previous answers to create dynamic, personalized forms.
- • show if: display question only when conditions are met
- • hide if: hide question when conditions are met
- • multiple conditions: combine rules with AND/OR logic
- • answer piping: reference previous answers in question text
validation rules
Ensure data quality with built-in and custom validation rules.
- • required field validation
- • minimum/maximum length
- • pattern matching (regex)
- • number range validation
- • email format checking
- • URL validation
- • custom error messages
- • real-time validation
question settings
basic settings
- • question title
- • description/help text
- • required/optional
- • placeholder text
appearance
- • custom styling
- • layout options
- • image attachments
- • color themes
behavior
- • auto-advance
- • focus management
- • keyboard shortcuts
- • mobile optimization
✨ pro tip: use the right question type for your data. Email questions validate format automatically, number questions prevent text input, and rating questions provide better user experience than dropdowns for feedback.
sections
Organize your forms into logical sections to improve user experience and make long forms more manageable. Sections help break up complex forms and provide clear structure for your respondents.
what are sections?
Sections are groups of related questions that help organize your form into digestible chunks. They act as visual and logical separators, making it easier for users to understand and complete your form.
benefits of using sections
- • improved form organization
- • better user experience
- • reduced form abandonment
- • clearer progress indication
when to use sections
- • forms with 10+ questions
- • multiple topic areas
- • complex workflows
- • multi-step processes
creating and managing sections
adding sections
- 1. In the form builder, sections are created automatically
- 2. Add section titles and descriptions for context
- 3. Questions are automatically grouped into sections
- 4. Customize section appearance and behavior
organizing sections
- • drag and drop questions between sections
- • reorder sections to match your desired flow
- • assign questions to specific sections
- • remove empty or unused sections
section properties
basic properties
- • section title
- • description text
- • display order
- • enabled/disabled state
visual settings
- • section dividers
- • background colors
- • spacing options
- • typography styles
behavior options
- • section-based navigation
- • progress tracking
- • conditional display
- • page break options
section best practices
logical grouping
group related questions together. for example: "personal information", "preferences", "feedback"
clear titles
use descriptive section titles that clearly indicate what information you're collecting
optimal length
keep sections to 3-7 questions each. longer sections can feel overwhelming to users
progressive disclosure
start with easy questions and gradually move to more complex or sensitive topics
section examples
customer feedback form
- 1. about you - name, email, customer type
- 2. your experience - satisfaction ratings
- 3. feedback - comments and suggestions
- 4. follow up - contact preferences
event registration
- 1. attendee info - personal details
- 2. event preferences - sessions, meals
- 3. accessibility - special requirements
- 4. payment - billing information
advanced section features
conditional sections
show or hide entire sections based on user responses
🎯 pro tip: use sections strategically to guide users through your form. start with engaging, easy questions to build momentum, then move to more detailed information.
design & branding
Make your forms look professional and match your brand with our comprehensive design tools. Create a consistent visual experience that builds trust with your audience.
branding options
logo upload
add your company logo to build brand recognition and trust
- • supported formats: PNG, JPG, SVG
- • maximum file size: 2MB
- • automatic optimization
- • responsive sizing
logo settings
customize how your logo appears on forms
- • adjustable size (small, medium, large)
- • positioning options
- • link to website option
- • alt text for accessibility
color themes
preset color themes
custom colors
create your own color scheme to perfectly match your brand
primary color
- • buttons and call-to-actions
- • progress bars
- • focus states
- • active elements
secondary color
- • borders and dividers
- • background accents
- • hover states
- • subtle highlights
typography
font families
choose from curated google fonts
- • inter (default)
- • roboto
- • open sans
- • lato
- • montserrat
- • poppins
font sizes
separate controls for different text types
- • headings: 24-32px
- • body text: 14-18px
- • labels: 12-16px
- • captions: 10-14px
font weights
control text emphasis and hierarchy
- • light (300)
- • normal (400)
- • medium (500)
- • semibold (600)
- • bold (700)
design best practices
accessibility first
ensure sufficient color contrast (4.5:1 ratio) for text readability
brand consistency
use colors and fonts that match your website and marketing materials
mobile-first design
test your design on mobile devices - most users will see your form on their phone
less is more
avoid too many colors or fonts - stick to 2-3 colors and 1-2 font families
real-time preview
All design changes are applied instantly in the form builder, so you can see exactly how your form will look to users.
preview features
- • live color updates
- • font changes in real-time
- • logo positioning preview
- • mobile responsive preview
testing tools
- • desktop preview mode
- • mobile preview mode
- • tablet preview mode
- • accessibility checker
🎨 design tip: start with a preset theme that's close to your brand colors, then fine-tune with custom colors. this ensures good color harmony and accessibility.
publishing
Once your form is ready, publishing makes it available to collect responses from your audience. Learn how to publish, share, and manage your live forms.
publishing process
step-by-step publishing
- Review your form in preview mode to ensure everything looks correct
- Click the "publish" button in the form actions toolbar
- Your form gets a unique public URL automatically
- Copy the share link and distribute to your audience
- Monitor responses in real-time from your dashboard
form states
draft
form is saved but not public - only you can see it
- • visible only to form creator
- • can be edited freely
- • no public URL generated
- • auto-saved as you work
published
form is live and collecting responses
- • publicly accessible via URL
- • collecting real responses
- • can still be edited (updates live)
- • analytics tracking active
sharing options
direct link sharing
share the form URL directly with your audience
- • works on any device
- • no setup required
- • trackable via analytics
- • can be shortened for social media
embed code
embed the form directly on your website
- • seamless website integration
- • responsive design
- • customizable dimensions
- • maintains your site's look
distribution channels
email campaigns
- • newsletter integration
- • personalized links
- • email templates
- • response tracking
social media
- • facebook, twitter, linkedin
- • custom preview images
- • shortened URLs
- • social tracking
website integration
- • embed in pages
- • popup forms
- • sidebar widgets
- • footer forms
managing published forms
editing published forms
You can continue editing your form even after it's published. Changes are applied immediately to the live form.
safe changes
- • updating question text
- • changing design/colors
- • adding new questions
- • modifying help text
be careful with
- • deleting questions
- • changing question types
- • removing required fields
- • major structural changes
unpublishing forms
when to unpublish
- • campaign has ended
- • need major restructuring
- • temporary maintenance
- • reached response limit
note: unpublishing makes the form inaccessible but preserves all existing responses
🚀 pro tip: always test your form thoroughly in preview mode before publishing. Share the preview link with colleagues to get feedback before going live.