Skip to main content

Theming, Layout, and Templates

This guide explains how to make your forms look professional and consistent with your site’s brand.

Audience: Users who care about design but don’t want to write much CSS.

← Back to Overview · Form Builder Basics

1. Using Built-In Themes​

EasyForms typically includes built-in themes that control colors, borders, and basic typography.

Selecting a Theme​

  1. Open your form in the Form Builder.
  2. Look for a Theme, Design, or Appearance tab.
  3. Choose from available themes (light, dark, minimal, etc.).
  4. Save and preview your form.

Themes help your forms look good out-of-the-box without manual styling.

2. Adjusting Layout​

Sections and Headings​

  • Use Section or Heading fields to break the form into logical parts.
  • Clear headings make long forms easier to navigate.

Columns (If Supported)​

  • Place related short fields side by side (e.g., First Name / Last Name, City / Postcode).
  • Avoid putting very long fields (like big textareas) into narrow columns.

Always test your form on mobile devices; multi-column layouts should gracefully stack on small screens.

If your EasyForms installation includes a template gallery:

  1. When creating a new form, choose From Template instead of starting from blank.
  2. Browse templates such as:
    • Contact form
    • Newsletter signup
    • Event registration
    • Feedback survey
  3. Select a template and customize fields, text, and settings as needed.

Templates are a great way to follow best practices without starting from scratch.

4. Custom CSS (Advanced)​

If you’re comfortable with CSS, you can fine-tune the look and feel.

  1. Edit your form and open Form Settings.
  2. Look for a Custom CSS or Advanced section.
  3. Add CSS rules that target your form elements.

Examples:

  • Adjust spacing between fields.
  • Change button colors.
  • Hide optional labels or help text in special layouts.

Be careful—poorly written CSS can affect other parts of your site. Test changes thoroughly.

5. Consistency Tips​

  • Use similar styles and structures across forms so visitors know what to expect.
  • Keep headings and button labels consistent (e.g., always use "Submit" or "Send" rather than mixing terms).
  • Avoid overly bright or clashing colors that harm readability.