Skip to main content

Building Forms with the Visual Form Builder

This guide shows you how to create and manage forms with the EasyForms visual builder—no code required.

Audience: Joomla site owners, editors, and marketers.

← Back to Overview

1. Creating a New Form​

  1. Log into the Joomla Administrator.
  2. Go to Components → EasyForms → Forms.
  3. Click New.
  4. Enter a Form Title (e.g., "Contact Us", "Event Registration").
  5. Optionally choose a Form Type (form, survey, quiz, poll) if available.
  6. Click Save to create the form, then open the Form Builder tab.

You now see the drag-and-drop builder with a live preview of your form.

2. Understanding the Form Builder Screen​

The builder typically has three main areas:

  • Preview canvas – the center area showing how your form looks.
  • Field sidebar – a library of fields you can add (text, email, dropdown, etc.).
  • Toolbar – actions like settings, AI Assistant, preview, conditional logic, and save.

You can click any field in the preview to edit its settings.

3. Adding and Configuring Fields​

Adding Fields​

  1. In the Field sidebar, browse available field types:
    • Basic: Text, Email, Phone, Number, Textarea
    • Choices: Dropdown, Radio buttons, Checkboxes, Multi-select
    • Date & Time: Date, Time, Datetime
    • File & Media: File upload, Image upload, Signature
    • Advanced: Address, Rating, Calculation, Hidden, etc.
  2. Drag a field into the form preview or click it to add it at the bottom.

Configuring Field Settings​

Click a field in the preview to open its settings panel. Common options include:

  • Label – the question or name shown above the field.
  • Placeholder – faint example text inside the field.
  • Help text – explanation or instructions below the field.
  • Required – whether the field must be filled in.
  • Default value – pre-filled value (optional).
  • Options – for dropdown, radio, and checkbox fields (e.g., "Yes", "No").

Make changes and they appear instantly in the preview.

4. Organizing Sections and Layout​

Grouping Fields into Sections​

For longer forms, group related questions:

  1. Add Section or Heading fields to visually separate parts of the form.
  2. Use clear titles like "Personal Information" or "Preferences".

Using Columns (If Supported)​

Many layouts support multiple columns:

  • Drag fields side by side to create two- or three-column layouts.
  • Use columns for short fields (first/last name, city/postcode) to save space.

Always preview on mobile to ensure fields are still easy to use.

5. Form Settings (Global Options)​

In the builder toolbar or a "Form Settings" panel, you can configure:

  • Title and description displayed on the form.
  • Form type (form, survey, quiz, poll), if supported.
  • Submission behavior:
    • Show a success message.
    • Redirect to a thank-you page.
    • Hide the form after submission.
  • Multi-page options (progress bar, step titles) when using page breaks.
  • Custom CSS for advanced styling (optional).

These settings affect the entire form, not individual fields.

6. Previewing and Testing Your Form​

  1. Click Preview in the builder toolbar.
  2. A preview opens (often in a new tab).
  3. Test your form as a visitor would:
    • Fill in fields and submit.
    • Check required fields and error messages.
    • Try on both desktop and mobile.

If anything looks wrong, go back to the builder, adjust fields or settings, and preview again.

7. When to Use the AI Form Builder Assistant​

If you know what you want to collect but don’t want to design every field manually, use the AI Form Builder Assistant:

  • Describe your form in plain language.
  • Let AI propose fields and structure.
  • Apply suggestions, then fine-tune in the builder.

Read the dedicated guide: AI Form Builder Assistant.

8. Next Steps​

After building your form, you’ll likely want to: