Skip to main content
Applying CSS to the Form Widget

Applying CSS will allow you to customize the look and feel of your form.

Ashleigh Alldredge avatar
Written by Ashleigh Alldredge
Updated over a week ago

Applying CSS to the Form Widget

While the GiveGab Enterprise widgets default styling is intended to blend in with the parent page, there are many times when the widget may need to maintain a specific look and feel (or ‘branding’) regardless of the styling of the parent page. Enabling the snippet’s Custom Stylesheet parameter and a small amount of CSS declarations, anyone can create a self-contained, branded widget that can be distributed to any number of other websites.

Accessing the recommended HTML containers for styling through CSS

As outlined in the diagram included in the form widget structural HTML elements section below, there are specific HTML containers rendered in the widget that GiveGab Enterprise recommends styling. First, it's important to understand how to access those containers through the widget namespace.

Each widget has a unique name-space that allows it to co-exist on the same parent page with other widgets. This name-space is a CSS class applied to the div.kimbiaDiv element, and can be configured in two methods:

1. [CAMPAIGN CHANNEL PREFIX] . [FORM SUFFIX] 

This name-space is the most specific that can be applied. We recommend using this configuration if you expect to be placing multiple forms on the same web page, or if you plan to distribute your forms to other websites. It should be written as follows:

div.[CAMPAIGN CHANNEL PREFIX].[FORM SUFFIX] {....}

For example, if the campaign prefix is ‘supporttkf’ and the form suffix is ‘donate’, the name-space for that widget would be written as:

div.supporttkf.donate {....}

2. [Form Suffix]

This name-space is less specific than the method described. We recommend using this configuration if you expect to be placing a single form per web page, and do not plan to distribute your forms to other websites. It should be written as follows:

div.[FORM SUFFIX] {....}


For example, if the form suffix is ‘donate’, the name-space for that widget would be written as:

div.donate {....}

The GiveGab Enterprise Form Widget HTML Structure

The snippet code of the form inserts the appropriate HTML elements required to render your form on any page of your website. It's important to understand how this structural HTML is configured in order to help you decide where to place the widget on a particular page.

Below is a diagram that shows the form widget structural HTML elements for our single page formatted forms:

The diagram above shows the nesting relationship of the containers used in rendering a form widget in HTML when using Single Page format. These containers are necessary:

  1. To support the logical separation of elements based on their function

  2. To provide a discrete, flexible infrastructure for custom styling. 

*Donation forms use the div.k_sectionDonation classname.


*Registration forms use the div.k_sectionRegType classname.

Note: Spacing between individual elements is exaggerated for the purposes of display.

Did this answer your question?