The form builder is where you spend most of your time, so it is worth getting familiar with how it is laid out. Understanding each panel and control means you can build forms faster, avoid mistakes, and take advantage of features you might otherwise overlook. Think of the builder as your workshop — knowing where every tool lives makes the job easier.
The interface is divided into three main areas that work together to give you full control over your form. Once you learn the layout, building forms becomes second nature.
The Three Panels
Left Panel — Your ToolboxThis panel shows every field type you can add to your form. Fields are organized into clearly labeled groups:
| Group | What it contains | Example fields |
|---|---|---|
| Basic | The most commonly used input fields | Text, Email, Phone, Number, Textarea |
| Choice | Fields where visitors pick from options | Select (dropdown), Radio, Checkbox |
| Advanced | Specialized input fields | Date, Time, Rating, Range, Color, URL, Password |
| Layout | Visual elements that organize your form | Heading, HTML Block, Divider, Page Break |
| PRO | Premium field types that require a PRO license | File Upload, Repeater, Calculation, Payment, Map, Calendar |
To add a field, drag it from the left panel into the center area. You can also click a field type to add it at the bottom of your form.
Center Area — Your CanvasThis is where your form takes shape. It shows all your fields in the order visitors will see them. You can drag fields up and down to rearrange them. Each field in the center area shows its label, a preview of how it looks, and small action icons.
Right Panel — InspectorThe right panel holds three working areas: Field Settings, Element Style, and Live preview. Click anywhere on a field card, or use its edit icon, to open its field settings and automatically select that field in Element Style. On narrower screens, the builder scrolls the inspector into view after you select a field so you do not have to hunt below a long canvas. Field settings update the form draft as you type or toggle controls; there is no separate per-field Apply step. Click items inside Live preview to switch the style controls to the exact form element you want to adjust.
Quick Actions Reference
| To do this | Do this |
|---|---|
| Add a field | Drag from the left panel, or click a field type to append it |
| Reorder fields | Drag and drop within the center area |
| Edit a field | Click it — settings appear in the right panel |
| Copy a field | Click the duplicate icon on the field (creates an exact copy below) |
| Delete a field | Click the trash icon on the field |
| Undo a mistake | Press Ctrl+Z (Cmd+Z on Mac) |
| Redo an undone action | Press Ctrl+Shift+Z (Cmd+Shift+Z on Mac) |
| Save your form | Click Save Form at the top right |
| Preview your form | Click Preview to see how visitors will see it |
Form-Level Settings Cards
Beyond individual field settings, each form has its own configuration. These settings stay below the field canvas on the left, as a stack of collapsible cards (click each header to expand):
- Conversational Mode toggle (above the cards) — one click switches the form to a one-question-per-screen Typeform-style layout.
- Form Settings: Submit button text (for example, “Send Message” instead of “Submit”), success message shown after submission, and an optional redirect URL.
- Email Notifications: Admin notification email + auto-reply to the submitter (with the field-name dropdown for picking which form field carries the recipient address).
- Slack / Discord / Mailchimp / Google Sheets / Google Calendar / HubSpot CRM / Post Submission: One card per integration, each with a per-form override of the global Settings page configuration.
Multi-step is activated automatically by adding a Page Break field (no toggle needed). Conversational Mode and integrations require PRO.
Real-world example: You are building a newsletter signup form. In the Basic tab, you change the submit button text from “Submit” to “Subscribe Now” and set the success message to “Welcome aboard! Check your inbox for a confirmation.” These small touches make the form feel polished and professional.> Tip: You can switch between field settings and form-level settings at any time without losing your work. Click a field to see its settings, or click a tab to see form-level options. Nothing is lost when you navigate between panels.
> Good to know: The form builder marks the header save bar when the draft has unsaved changes and warns before you leave the page. Field settings are applied to the draft immediately, but you still need to click Save Form to persist the draft to the database.
Live Preview, Styling, and Submit Actions
The builder includes a Live preview panel in the right inspector. It renders the same frontend markup that visitors see on your site, including labels, descriptions, inputs, the submit button, the success message, conditional logic wrappers, calculation results, conversational mode chrome, and your saved styles. Field Settings, Element Style, and Live preview expand naturally with their content instead of using small internal scroll panes. Click Refresh if you want to force an immediate update; most field and form setting changes refresh automatically.
Very long labels and descriptions wrap inside the form instead of stretching the page horizontally. If you paste long instructions into a Text field label by mistake, the frontend stays readable; for real instructions, use HTML Block or Textarea so the content has the right semantics.
To style the form, click the element you want to change directly inside Live preview. The right-side Element Style inspector then shows controls for that exact element. For field elements, the inspector also lets you switch between the field wrapper, label, input/control, and description without leaving the selected field:
| Element | Common controls |
|---|---|
| Wrapper | Background color, border color, border width, border radius, padding, bottom spacing, custom CSS declarations |
| Label | Font size, text color, font weight, custom CSS declarations |
| Control | Font size, text color, background color, border color, border radius, padding, custom CSS declarations |
| Description | Font size, text color, custom CSS declarations |
Click the empty preview area to style the form container. Click the submit button to style the button. When a success message is visible, click it to style the message. Styling is no longer a large global block under the form settings cards.
Custom CSS boxes accept safe CSS declarations only, such as text-transform: uppercase;, letter-spacing: 1px;, line-height: 1.4;, text-align: center;, or border-style: dashed;. Do not paste full CSS rules with selectors, braces, imports, URLs, or scripts. Form Forge strips unsupported declarations instead of saving unsafe code.
The After submit setting controls what visitors see after a successful submission:
| Action | What happens |
|---|---|
| Show success message | The form submits by AJAX, clears or locks the completed form, and shows your success text in a single completion state |
| Redirect to URL | The form submits successfully and immediately redirects to a root-relative or same-site URL such as /thank-you |
| Run safe page action | The form submits by AJAX, then adds, removes, or toggles a CSS class on an existing page element |
Safe page actions are useful when your theme already contains a hidden modal or thank-you section. For example, document.getElementById('modal').classList.add('is-active'); opens an element by adding a class. Form Forge does not execute arbitrary JavaScript; it converts supported class actions into a safe internal action list and blocks external requests, inline scripts, cookie access, storage access, eval, and assignments.
Common Mistakes to Avoid
- Do not forget to check the Notifications tab. Many users build a beautiful form but forget to set up the notification email, so submissions arrive in the dashboard but never in their inbox.
- Do not ignore the submit button text. “Submit” is generic. “Send Message,” “Book Now,” “Get Your Quote,” or “Join the Waitlist” converts better because it tells the visitor what happens next.
- Do not skip the success message. The default works, but a custom message that sets expectations (“We will reply within 24 hours”) builds trust.
[Screenshot: The form builder interface showing all three panels — field types on the left, the form canvas in the center with several fields, and the right panel displaying settings for the selected field]
—