Form Designer

Build hosted forms visually with drag-and-drop. Choose themes, configure fields, and share a link.

Overview

The Form Designer is a visual builder that lets you create fully functional forms without writing any HTML. When you open a form in the dashboard, the Designer tab gives you a two-panel layout:

Left panel — field list, field settings, and theme selector
Right panel — live preview that updates as you make changes

Generate with AI

When you create a new form, select Create with AI at the top of the wizard. Describe what you need in plain English — for example, "a booking form with name, email, date, time slot dropdown, and party size" — and AI generates the complete form with the right field types, labels, and layout. You can then fine-tune everything in the designer.

Start from a template

Alternatively, pick from 9 ready-made templates: Contact, Feedback, Newsletter, Support, Registration, Booking, Quote Request, Application, and Blank. Each template comes with pre-configured fields and a theme — pick one and customize it in the designer.

You can modify any template's fields, remove them, or add new ones. The template is just a starting point.

Field types

FormBlade supports 11 field types, all available on every plan:

Field Type	HTML Element
Text	`<input type="text">`
Email	`<input type="email">`
Textarea	`<textarea>`
Phone	`<input type="tel">`
Number	`<input type="number">`
Date	`<input type="date">`
URL	`<input type="url">`
Select	`<select>`
Checkbox	`<input type="checkbox">`
Radio	`<input type="radio">`
File	`<input type="file">`

The maximum number of fields per form depends on your plan: 30 on Personal, 80 on Pro, and 200 on Business.

Adding fields

To add a field to your form:

Click the + Add Field button below the existing field list
Select the field type from the dropdown
The field will appear at the bottom of the list with a default label
Click the field to expand its settings panel

Removing fields

Click the trash icon on the right side of any field row to remove it. You will be asked to confirm before the field is deleted. Removing a field from the designer does not delete any previously submitted data for that field.

Reordering fields

Drag and drop fields to reorder them. Click and hold the grip handle on the left side of a field row, then drag it to the desired position. The live preview updates immediately as you reorder.

Field settings

Click any field to expand its settings. Every field type supports these options:

Setting	Description
Label	The visible label shown above the field (e.g., "Your Name"). This is what the user sees.
Name	The HTML `name` attribute. This is the key used in the submitted data (e.g., `full_name`). Auto-generated from the label but editable.
Placeholder	Hint text shown inside the field before the user types (e.g., "John Doe").
Required	Toggle to make the field mandatory. Required fields show an asterisk (*) next to the label.

Some field types have additional settings:

Select and Radio — an Options list where you enter each choice on a separate line
Checkbox — a Checked by default toggle
File — a note showing the upload size limit (1 MB on Personal, 25 MB on Pro)
Number — optional Min and Max values

Themes

FormBlade includes 6 built-in themes that control the visual style of your hosted form. All themes are available on every plan:

Theme	Description
Minimal	Clean white background, underline inputs, serif font. Best for simple contact forms.
Corporate	Rounded corners, soft shadows, blue accent. Polished look for SaaS and business pages.
Glass	Frosted glass effect over a gradient background. Modern and visually striking.
Dark	Dark background, light text, subtle borders. Ideal for developer and tech sites.
Warm	Warm earth tones, serif font, soft shadows. Great for creative and personal brands.
Compact	Tight spacing, small font, minimal padding. Best when space is limited.

On Pro plans and above, you can also customize theme colors, fonts, spacing, and layout to match your brand.

Select a theme from the theme picker at the top of the left panel. The live preview updates instantly so you can compare themes before saving.

Live preview

The right side of the designer shows an accurate preview of your hosted form. It reflects:

The current theme
All fields in their current order
Labels, placeholders, and required indicators
Select/radio options
The submit button

The preview is interactive — you can type into fields and click buttons to see how the form feels. No data is submitted from the preview.

Hosted form URL

Every form gets a public hosted URL:

https://formblade.com/f/contact

Replace /f/contact with your own form link from the dashboard.

This URL serves the full form page using the theme and fields you configured in the designer. You can:

Share the link directly — paste it in emails, social media, or chat
Embed as an iframe — add it to any page on any platform

<iframe
  src="https://formblade.com/f/contact"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

Replace /f/contact with your own form link from the dashboard.

The hosted form handles validation, submission, and redirect automatically. No additional code is needed.

Using the HTML snippet instead

If you prefer full control over the HTML and CSS, switch to the Setup tab on your form page. The snippet is a plain <form> element that you can paste anywhere and style yourself. The designer and the snippet method both submit to the same form link — you can use whichever fits your workflow.

Tip: Changes you make in the designer only affect the hosted form page. If you are using the HTML snippet, you will need to update your HTML manually to match any field changes.

Plan comparison

Feature	Personal	Pro
Field types	All 11 types	All 11 types
Max fields per form	30	80
Themes	All 6 themes	All 6 themes
Custom theme colours	No	Yes
Hosted form URL	Yes	Yes
HTML snippet	Yes	Yes
Iframe embed	Yes	Yes
File upload fields	Yes (1 MB limit)	Yes (25 MB limit)