CSS Customization Options on Forms, Events, Campaigns

Follow

If Flexible Forms are turned on for your site, a few design customization options are built into the Encompass forms system.  You must have advanced knowledge of how to use CSS and HTML in order to take advantage of these options.

To get a different look for forms, use CSS to target specific classes on form steps, categories or fields, or element IDs on elements generated by Encompass.

If you like the look of these customizations, but aren't ready to tackle it yourself, contact your Account Manager for more information.

Keep in mind:

  • These changes use fairly advanced CSS techniques, but are available to those brave enough to try it out!
  • If you do put in custom CSS, it is up to you to test and maintain these new styles, so be sure to check your work on multiple browsers and devices!
  • Don’t forget to check Page Verbiage in Verbiage Builder!
    • Some default text or inline styles can be managed there, so you can change many system pieces to fit your style (note: these changes are global in many cases, so be careful).
TABLE OF CONTENTS

Setting the CSS Class

CSS Classes on Fields

This class (and any styling added to it) will target or change the styling of the element to which it is applied.

CSS Classes on Categories

This class (and any styling added to it) will help target or change the styling for elements in that category.

CSS Classes on Steps

This class (and any styling added to it) will help target or change the styling for the elements in that step ONLY (not the whole form). NOTE: Step customization in particular requires an expert level of CSS and HTML knowledge. Category and field customization are simpler and might be easier to attempt first.

What can I do with these classes?

  • Change how the input boxes look
  • Change where the fields sit in relation to each other
  • Stack a field’s label on top of its input
  • Align a checkbox to the left of its label
  • Float 2 fields or categories side by side (or even three across!)
  • Highlight important information or fields

Examples

Custom Field Classes

Stacked Label Field
Class: stacked
Class for second field: noLabel

50/50 Field (left) with long text field in the display name; 50/50 Field (right); 50/50 Field (left Row 2); 50/50 Field (right Row 2)
Classes: split50 floatLeft and split50 floatRight

Field with Padding (Above): Class: paddingAbove
Field with Padding (Below): Class: paddingBelow
Field with Border (Above): Class: dividerAbove
Field with Border (Below): Class: dividerBelow

Wide Label: Field with Label at 70% with lots of text; would probably be good for activities or something similar: Class: label70
Checkbox on the Left: Class: checkboxLeft
Stacked and Split (left): Class: stacked split50 floatLeft 
Stacked and Split (right): Class: stacked split50 floatRight


Field with Borders and padding:  Classes: paddingAbove paddingBelow dividerAbove dividerBelow

Custom Category Classes

Split and Stacked with Float Left  Classes: split50 stacked floatLeft
NOTE: The class email can be added to the email field to hide the extra email label

Split and Stacked with Float Right  Classes: split50 stacked floatRight dividerLeft
NOTE: dividerRight is also available

Padding Above  Class: paddingAbove
Padding Below  Class: paddingBelow

Color Category  Classes: colorCategory or colorCategory1 or colorCategory2 or colorCategory3 or colorCategory4
NOTE:  You can change the color by dropping a content block on the page and placing in the html something like:

<style>
    .colorCategory {border-left-color: #0079C2  !important;}
    .colorCategory1 {border-left-color: #8EC63F  !important;}
    .colorCategory2 {border-left-color: #F12D22 !important;}
</style>

Divider Above  Class: dividerAbove
Divider Below  Class: dividerBelow

Border  Class: borderWrap
Background  Class: backgroundWrap

Background, Border, and Optional Border Radius
Classes: borderWrap backgroundWrap borderRadius

Examples of What iModules Design Team Can Do

These customizations require more advanced techniques and demonstrate what our Design team can do for you.  If you like the look of these customizations, but aren't ready to tackle it yourself, contact your Account Manager for more information.

Donation Check Boxes

Before CustomizationAfter Customization

Input & Category Alignment

Before CustomizationAfter Customization

Activity Step

Before CustomizationAfter Customization

Live Examples on the Design Site

 

Have more questions? Submit a request