Form Builder

Build forms with the visual drag-and-drop editor — 35 field types, validation, themes, and conditional visibility.

The Buildorado form builder is a visual drag-and-drop editor that lets you create professional, multi-step forms without writing any code. With 35 field types, granular validation rules, custom themes, conditional visibility, and responsive layouts, you can build everything from simple contact forms to complex multi-page applications -- and connect them directly to your workflow for automated processing, payments, and integrations.

How the Drag-and-Drop Editor Works

When you open the form builder, you see a canvas on the right and a field palette on the left sidebar. To add a field, drag it from the palette and drop it onto the canvas where you want it to appear. Fields snap to a grid layout and can be resized to full width, half width, or third width to create multi-column layouts.

Once a field is on the canvas, click it to open the configuration panel on the right. Here you can set the label, placeholder text, validation rules, default values, conditional visibility, and appearance options. Every change updates the form preview in real time, so you always see exactly what your users will see.

Fields can be reordered by dragging them up or down within the form. To delete a field, select it and press the Delete key or click the trash icon in the configuration panel.

All 36 Field Types

Buildorado provides a comprehensive library of field types organized into five categories. Each field type is purpose-built for a specific kind of input, with built-in validation and formatting.

Basic Input Fields

These are the foundational text and numeric fields you will use in almost every form.

Text -- A single-line text input for names, titles, short answers, and any free-text entry. Supports min/max character length validation and regex pattern matching.
Textarea -- A multi-line text input for longer responses such as comments, descriptions, and messages. Automatically expands as the user types. Supports character count display and limits.
Email -- A text input with built-in email format validation. Rejects malformed addresses before submission. Ideal for collecting contact information.
Number -- A numeric input that accepts integers or decimals. Supports min/max value validation, step increments, and optional prefix/suffix display (e.g., "$" or "kg").
Phone -- A phone number input with an international country code selector. Validates phone number format based on the selected country. Outputs a standardized E.164 format.
URL -- A text input that validates the entry is a properly formatted URL. Useful for collecting website addresses, portfolio links, or social media profiles.
Password -- A masked text input for collecting sensitive values. The entered value is hidden behind dots. Supports minimum length and complexity requirements.

Selection Fields

Selection fields let users choose from predefined options. Use these when you want structured, consistent data.

Select (Dropdown) -- A dropdown menu where the user picks one option from a list. Supports searchable dropdowns for long option lists, custom placeholder text, and default selections. Options can be added manually or loaded dynamically.
Multi-Select -- Similar to a dropdown, but the user can pick multiple options. Selected items appear as tags/chips. Supports a maximum selection limit.
Radio -- Displays all options as radio buttons, letting the user select exactly one. Best for short lists (2-7 options) where you want all choices visible at once. Supports vertical or horizontal layout.
Checkbox -- Displays options as checkboxes, letting the user select zero or more. Best for "select all that apply" scenarios. Supports a minimum/maximum selection count.
Toggle -- A simple on/off switch. Ideal for consent checkboxes ("I agree to the terms"), opt-in preferences, and binary yes/no questions. Outputs a boolean true/false value.

Date and Time Fields

Purpose-built inputs for temporal data, with native date and time pickers for a smooth user experience.

Date -- A date picker that lets the user select a year, month, and day. Supports min/max date constraints (e.g., "no dates before today"), disabled date ranges, and multiple date format displays.
Time -- A time picker for selecting hours and minutes. Supports 12-hour and 24-hour formats, minute intervals (e.g., every 15 minutes), and min/max time constraints.
Date & Time -- A combined picker for selecting both a date and a time in a single field. Useful for scheduling appointments, booking events, and setting deadlines.

Rich Input Fields

Advanced field types for collecting specialized data that goes beyond simple text and numbers.

File Upload -- Accepts document, image, or any file type uploads. Configurable allowed file types (e.g., .pdf, .docx, .png), maximum file size (up to 50 MB), and multiple file support. Uploaded files are securely stored and accessible via the submission data.
Signature -- A draw-on-screen signature pad that captures handwritten signatures on desktop and mobile. The signature is saved as an image and attached to the submission. Essential for contracts, consent forms, and legal agreements.
Rating -- A star rating input (1 to 5 or 1 to 10 scale). Supports custom icons (stars, hearts, thumbs up) and half-star precision. Commonly used for feedback forms, product reviews, and satisfaction surveys.
Slider -- A draggable range slider for selecting a numeric value within a defined range. Supports custom min/max values, step size, and value labels. Great for budget ranges, satisfaction scales, and priority ratings.
Rich Text -- A formatted text editor with a toolbar for bold, italic, links, lists, and headings. Outputs HTML content. Useful when users need to provide structured, formatted responses.
Address -- A structured address input with fields for street, city, state/province, postal code, and country. Supports address autocomplete powered by Google Places for faster, more accurate entry.
Color Picker -- A visual color selector that outputs a hex color code. Useful for brand customization forms, design preference surveys, and theme configuration.

Layout Elements

Layout elements are not input fields -- they do not collect data. Instead, they help you organize and annotate your form for a better user experience.

Heading -- A section header for breaking your form into logical groups. Supports heading levels (H1 through H4) and optional subtext. Use headings to guide users through long forms.
Paragraph -- A block of descriptive text for providing instructions, context, or legal disclaimers. Supports basic formatting (bold, italic, links). Does not collect input.
Divider -- A horizontal line that visually separates form sections. Useful for breaking up dense forms without adding heading text.
Image -- Displays an image within the form. Useful for showing product photos, diagrams, reference materials, or branding. Supports alt text for accessibility.

Field Configuration Deep Dive

Every field in Buildorado can be fine-tuned through the configuration panel. Here is a detailed look at each configuration category.

Validation Rules

Validation ensures that users provide correctly formatted, complete data before they can proceed. Buildorado validates on the client side (instant feedback) and on the server side (security).

Required -- Mark a field as mandatory. The form cannot be submitted until the field has a value. A red asterisk appears next to the label.
Min/Max Length -- For text and textarea fields, set a minimum and maximum character count. The form displays a character counter when limits are set.
Min/Max Value -- For number and slider fields, define the acceptable numeric range. Values outside the range are rejected with an error message.
Regex Pattern -- For advanced validation, provide a regular expression. For example, /^[A-Z]{2}\d{6}$/ to validate a license number format. The pattern is tested against the full input value.
Custom Error Messages -- Override the default validation messages with your own text. For example, change "This field is required" to "Please enter your company name so we can personalize your quote."

Appearance Settings

Label -- The visible text above the field. Keep labels concise and descriptive. For example, "Work Email" is better than "Please enter your work email address below."
Placeholder -- Ghost text inside the input that disappears when the user starts typing. Use it for format hints (e.g., "[email protected]") rather than as a replacement for labels.
Help Text -- A smaller line of text displayed below the field. Use it for supplementary instructions, format requirements, or privacy notes (e.g., "We will never share your email with third parties.").
Width -- Control how much horizontal space the field occupies: Full (100%), Half (50%), or Third (33%). Place two half-width fields side by side to create a two-column layout (e.g., First Name and Last Name on the same row).
Default Value -- Pre-fill the field with a value. Useful for setting a common default (e.g., country = "United States") or for pre-filling known data via URL parameters.

Conditional Field Visibility

Show or hide fields dynamically based on the values of other fields in the same form. This keeps forms short and relevant by only displaying what matters to each user.

Common examples:

Show a "Company Name" field only when "Account Type" is set to "Business."
Show an "Other (please specify)" text field only when the user selects "Other" from a dropdown.
Show a "Dietary Restrictions" textarea only when the "Attending Dinner?" toggle is turned on.
Show "Spouse Name" only when "Marital Status" is "Married" or "Domestic Partnership."

Visibility conditions support 35+ operators and AND/OR logic groups for complex rules. For a full guide, see Conditional Logic.

Building Multi-Step Forms

For longer forms, splitting the content across multiple steps dramatically improves completion rates. Research shows that multi-step forms can convert up to 300% better than single-page forms of the same length, because they reduce perceived complexity and create a sense of progress.

How Multi-Step Forms Work

In Buildorado, each step is a separate form node on the workflow canvas. You connect form nodes with edges to define the step order. The user sees a progress bar at the top indicating how many steps remain and which step they are currently on.

Setting Up Steps

Drag your first form node onto the canvas and add the fields for Step 1 (e.g., personal information).
Drag a second form node onto the canvas and add the fields for Step 2 (e.g., company details).
Connect the two form nodes with an edge. The edge can optionally carry conditions to create branching multi-step flows.
Repeat for as many steps as you need.

Users can move forward by clicking Next after completing the required fields in the current step. A Back button lets users return to previous steps to review or modify their answers. All previously entered data is preserved when navigating between steps.

Tips for Multi-Step Forms

Group related fields. Put personal info in Step 1, company details in Step 2, and preferences in Step 3. Logical grouping reduces cognitive load.
Put easy fields first. Start with simple fields (name, email) to build momentum before asking for detailed information (budget, requirements).
Limit each step to 3-5 fields. Shorter steps feel faster and keep users engaged.
Use conditional steps. With branch nodes, you can skip entire steps that are not relevant. For example, skip the "Company Details" step for individual users.

Form Themes and Visual Customization

Every form can be styled to match your brand with Buildorado's theme system. Themes are applied per-workflow and previewed in real time as you make changes.

Customizable Properties

Colors -- Set the primary accent color (used for buttons, focus rings, and progress bars), background color, text color, input border color, and error color. Use your brand's color palette for a cohesive look.
Typography -- Choose a font family from a curated list of web-safe and Google Fonts options. Set the base font size, heading sizes, and label font weight.
Spacing -- Control the padding inside fields, the gap between fields, and the margin around the form container. Tighter spacing works for embedded forms; more generous spacing works for standalone pages.
Border Radius -- Set the corner roundness for inputs, buttons, and the form container. Use 0 for sharp corners (corporate, formal feel) or 12px+ for rounded corners (friendly, modern feel).
Shadows -- Add elevation effects to the form container and input fields. Subtle shadows give a floating, card-like appearance.

Theme Examples

Clean and Minimal: White background, light gray borders, no shadows, 4px border radius, Inter font. Best for professional applications and corporate sites.

Bold and Colorful: Bright primary color (#6366f1), dark background (#0f172a), white text, 12px border radius, generous spacing. Best for marketing landing pages and creative agencies.

Soft and Friendly: Warm beige background (#faf5ee), rounded inputs (16px radius), subtle shadows, handwritten-style font. Best for event registration and community forms.

Responsive Design and Mobile Optimization

Buildorado forms automatically adapt to the user's screen size. On desktop, multi-column layouts (half-width and third-width fields) display side by side. On tablets, third-width fields expand to half-width. On mobile phones, all fields stack vertically at full width for easy thumb-friendly input.

The form container, buttons, and progress indicators are all touch-optimized with appropriately sized tap targets (minimum 44px) on mobile devices. File upload fields switch to the device's native file picker, and signature fields work with touch drawing.

You do not need to configure responsive behavior manually -- it is built in and works out of the box.

Accessibility Features

Buildorado forms are designed with accessibility as a priority:

Semantic HTML -- All form elements use proper <label>, <input>, <fieldset>, and <legend> tags for screen reader compatibility.
Keyboard Navigation -- Users can tab through all fields, use arrow keys within selection fields, and submit forms with Enter. Focus indicators are clearly visible.
ARIA Attributes -- Error messages, help text, and required field indicators are connected to their fields via aria-describedby and aria-required attributes.
Color Contrast -- Default themes meet WCAG 2.1 AA contrast ratios. The theme editor warns you if your custom color choices create insufficient contrast.
Error Announcements -- Validation errors are announced to screen readers via live regions, so users who cannot see the red error text still receive feedback.

Pre-Filling Fields from URL Parameters

You can pre-fill form fields by appending query parameters to the form URL. This is useful for personalized links in email campaigns, ad landing pages, and CRM integrations.

URL format:

https://buildorado.io/f/[email protected]&plan=enterprise

The query parameter names must match the field keys in your form. Field keys are automatically generated from the label (e.g., "Work Email" becomes work_email) and can be customized in the field settings.

Pre-filled fields are editable by default. If you want to lock a pre-filled value so the user cannot change it, enable the Read Only option in the field configuration.

Form Analytics and Conversion Tracking

After publishing your workflow, the analytics dashboard shows you how your form is performing:

View Count -- How many times the form was loaded.
Submission Count -- How many users completed and submitted the form.
Completion Rate -- The percentage of views that resulted in a submission.
Drop-Off Points -- For multi-step forms, see which step users abandon most frequently. This tells you where your form may be too long, confusing, or asking for sensitive information too early.
Average Completion Time -- How long it takes users to fill out the form, broken down by step.

Use these metrics to iterate on your form design. If a specific step has a high drop-off rate, consider simplifying it, adding help text, or moving difficult fields to a later step.

Tips for Building High-Converting Forms

Keep it short. Only ask for what you truly need. Every additional field reduces completion rates. If you need detailed information, use a multi-step approach.
Use smart defaults. Pre-fill fields when possible (country based on IP, date set to today, common selections pre-checked).
Write clear labels. Avoid jargon and internal terminology. Use language your users understand.
Add help text for ambiguous fields. If users might be unsure what to enter, provide a brief explanation or example below the field.
Use conditional visibility. Hide irrelevant fields so users are not overwhelmed. A form that adapts to the user's context feels shorter and smarter. See Conditional Logic for setup instructions.
Place the easiest fields first. Name and email are low-friction; budget and timeline require more thought. Build momentum before asking for commitment.
Make error messages helpful. Instead of "Invalid input," write "Please enter a valid email address (e.g., [email protected])." Custom error messages are set in the validation section of each field.
Optimize for mobile. Over half of form submissions happen on mobile devices. Preview your form on a phone screen and ensure all fields are easy to tap and fill.

Frequently Asked Questions

How many fields can I add to a single form?

There is no hard limit on the number of fields per form. However, for usability, we recommend keeping each form step under 10 fields and splitting longer forms into multiple steps. Forms with 50+ fields on a single step may feel overwhelming to users and hurt your completion rate.

Can I reuse a form across multiple workflows?

Each form node is part of a specific workflow. To reuse a form design, you can duplicate the workflow from the dashboard and modify the duplicate. You can also save common form patterns as templates for quick reuse.

How do I embed a form on my website?

Publish your workflow and copy the embed code from the share dialog. Paste the iframe snippet into your website's HTML. The form inherits your theme and is fully responsive inside the iframe. For a detailed walkthrough, see the Embed Workflow guide.

Can I accept payments through a form?

Yes. Add a Stripe payment field to your form to collect credit card payments directly. Configure the amount (fixed or dynamic based on other fields), currency, and description. Payments are processed securely through Stripe. You can also use conditional logic to show payment fields only when relevant (e.g., only for paid plans).