4. Theme Designer

You are here:
< All Topics

Theme Designer

  1. Introduction
  2. Design Sections
  3. Main Tools and Features
  4. Common Uses Cases

Introduction

The Theme Designer is a feature that lets you design your form in minutes.

To customize the look and feel of your form, just go to the Form Builder, on the right side you will see the “Design” panel. From there, set the different properties you wish to customise.

A1Surveys - Theme Designer

Design Sections

The Design Panel has the following sections.

  • Global: The Form Container.
  • Form: The form. By default it doesn’t have a padding.
  • Form Group: Group of Labels, Inputs, Help Text and Validation Messages.
  • Form Control: Input Field.
  • Button: Submit Button.
  • Label: Label Field
  • Placeholder, Heading, Paragraph, Help Text
  • Form Steps: Appears when a PageBreak field is added to the form.
  • Form Alerts: Success or Error message that appears when a form is submitted.
  • Field Validation: To customize the error state of your fields.

Main Tools and Features

– Fonts Selector

Select fonts with live preview from a dropdown list.

A1Surveys - Theme Designer - Font Selector

– Gradients

You can find the gradient selector to build your own gradient (linear, radial, choose your colors and stops and more) or choose the ready-to-use gradients.

A1Surveys - Theme Designer - Gradient Selector

– Patterns

Choose Patterns.

A1Surveys - Theme Designer - Patterns

Common Uses

– Hide Field Labels

If you want to hide a field label, just click the field and enter the following Label CSS Class: sr-only

But, if you’d like to remove the entire form labels all at once, simply follow the next steps:

  1. In the Design panel -> Open the Label section
  2. Scroll down until Extra sub-section
  3. On Display choose None.

That’s it!

– Align Your Form to Center

If you want to show your form on a full page (Share Form -> Link without box) this tip will be very useful.

There are several ways to center a form, below we will describe the most common option:

  1. In the Global Section, Select Text Align: Center
  2. And In the Form Section, Select:
    • Text Align: Left     – Margin: Auto     – Width: 80%

– Design Full Width Buttons

If you would like to show specific buttons at full width, just click the field and enter the following: btn-block

But, if you’d like to design the entire form buttons all at once, simply follow the next steps:

  1. In the Design panel -> Open the Button section
  2. Scroll down until Size sub-section
  3. On Width choose 100%
Previous 3. Form and Survey Builder
Next 5. Rule Builder
Table of Contents