Customizing Application Form Style

Your application form can be customized with a small amount of CSS. We show examples below of simple edits you can make. For more advanced styling integration, you will need to consult with your web team who can provide further CSS.

Getting Started

To start, click the "show" link beside the CSS Styles area in your application form:

This will show the CSS inputs areas. See below for some example CSS you can use.

Previewing Changes

Once you've entered some custom styles, just click anywhere outside of the input box to update the preview of your form on the right hand side of the page. 

Don't forget to click the "Save Form" button when you're happy with the Preview!

Examples

Changing Apply Button Color

Add the following CSS in the custom styles area to change the button color as shown below. Note: change the hex background color ("#319795") and border color to match what your website uses.

#btn-bc-apply { background-color: #319795; border-color: #2a807f }

The above example will update the preview to show a button like the following:

Changing Text Color

Add the following CSS in the custom styles area to change the text color as shown below. Note: change the hex color ("#37b3ad") to match what your website uses.

.bc-apply {  color: #37b3ad }

Changing Font

To change the font used for the entire form, you will need to ensure that the font is available which means loading it via a "<link>" element. In the example below, we want to use the Open Sans font from Google Fonts. Google fonts will give you code to embed the font similar to the following:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

We can't paste that directly into BrandChamp. Instead, you can just copy the value in the "href" attribute ( https://fonts.googleapis.com/css2?family=Open+Sans&display=swap) and paste that into the href input shown below, then click "Add"

Finally, you need to add the following custom CSS style to use the font for the application form:

.bc-apply { font-family: 'Open Sans', sans-serif; }

The final configuration will look something like the following: