Customize the look and feel of your forms with Enhanced Themes

Overview

Using Enhanced Themes in LGL Forms, you can build modern-looking forms using options such as a multi-step online donation widget that fits easily on your website or on a mobile device, as well as suggested donation amount buttons and numerous other look and feel settings.

Styling options include a selection of fonts, element styles, and settings for how much room the form takes up on a screen. You can set a form to fully fill the available space, and header images can be set to resize automatically when viewed, based on the device they’re being displayed on.

All of these options enable you to build an easily configurable form that can be matched to your organization’s brand, like the one shown embedded to the right of the example webpage below (NOTE: Only the “Make a donation” form in the image can be built using LGL Forms):

Instructions for how to set up your theme are available in the sections below.

Create your theme

To create a new theme, begin by navigating to LGL Forms > Design > Themes. Add a name for the new theme you’re designing, and click Create theme:

Select your theme’s header

To customize the header in your theme, click the Header tab in the design options on the right side of the page. Available options include:

Setting font size, color, and the header’s background color
Adjusting the padding both horizontally and vertically
Uploading an image to display in the header and selecting its size and alignment

NOTE: If you prefer not to use a header, you can hide it by checking the “Hide form header?” box indicated by the arrow in the screenshot below.

The header tab allows you to upload a logo image on the spot, or select from any existing image in LGL Forms. You can set the image width as a percentage so that your image will resize in a mobile-responsive way.

Preview your theme as single-page or multi-step

Forms using enhanced themes can be either single-page or multi-step, but in order for a form to have multiple steps it must be using an enhanced theme.

You can preview the options you’ve selected in your theme by toggling back and forth between the single page and multi-step form preview, indicated by the arrows in the screenshot below. As you’re selecting the different options for your theme, you can preview how each version will look. You can also see the result each of your selections makes on the preview as you select them.

Select your theme’s styles

The primary styling options for your theme are available in the Form tab to the right of the preview (shown in the red box below). As you’re selecting your styles, the sample form in the main part of the page will update, showing you how the styles will display when you apply this theme to a form.

Options include:

General styling options, including width and multiple font choices
The ability to paste in your choice of hexadecimal color codes, which can be applied to background, text, and buttons
Label position
Input style

Setting a default enhanced theme

When you want to apply a specific enhanced theme to any new form that is created in your account, navigate to LGL Forms > Design > Themes and select the Default? star to the left of that theme, as shown here:

Any theme that is starred will then be applied by default to any new form that is created in your account.

Apply your theme to your form

When you’re ready to update your form with your new theme, go to the Forms tab. For the form you want to add the theme to, choose the theme from the dropdown menu within the Theme column of the page: