Change the Colors of Your Form

After you have embedded your iHeart Business form on your website, you can change the form's colors. By default, the form's background is transparent with dark text. However, if your website or page has a dark background, then your form fields and text may not appear as intended (see example below).

While you can change your website's appearance within the Design Panel to help make your form stand out, you can also change your form's appearance within your iHeart Business dashboard so that you don't have to alter your website's theme or appearance.

These changes will occur within the Advanced Styling section of your form's Settings. You will need to add some CSS Styling to this section; the templates for the CSS are provided below. You can use CSS to change the form's background color and text, among other options. See full list of Advanced Form Styling Options.

To make the changes outlined below, you will log in to your iHeart Business dashboard and navigate to your Forms dashboard by selecting the App menu drop-down on the top-left corner of the page. Select the form you want to edit, select the Settings tab, then scroll down to the section labeled Advanced Styling.

The CSS codes will be pasted in the Custom CSS field seen above.

Change the Background Color of Your Form

To change the background color of your form, you will want to add the below code to edit the container color:

/* Form Container */
#madForm {
padding: 40px;
background:  #ffffff;
border: 2px solid #000000;
box-shadow: 5px 5px 8px rgba(0, 0, 0, .66);
margin-bottom: 10px;
}

The color hex code, #ffffff, is a plain white color. You can replace the color hex code next to "background:" with the color hex code of your choice. You can use this tool to find the hex code for any desired color.

When finished adding the CSS, click Save.

Change the Text Label Color

You can also use the below code to change the text color for the labels for your form fields:

/* Label Color */
label {
color: #ffffff; /* use to change the label color */
}

You will enter your desired color hex code to the right of "color:".

When finished adding the CSS, click Save.

Change the Field Description Sub-Label Color

If you need to change the text label color, you'll also likely want to adjust the color of the sub-labels that are used for field descriptions

/* Label Description Color */
.text-muted { color: #ffffff !important; /* use to change the description color */
}

You will enter your desired color hex code to the right of "color": Be sure to leave the !important tag there to overwrite the default color.

Additional Design Changes

You can also change the colors and style of the buttons, controls, layout, and other elements of your form. Check out this article to see a full list of available CSS templates that you can add to your form.