Custom Branding: How to use Images, Fonts & Colors

Formsite forms can be fully customized by form owners at all service levels, which allows for complete control over the forms’ appearance. Adding images and logos with a form is a great way to communicate basic brand attributes and set the tone of your form, as well as apply any custom branding requirements like fonts and colors.

Adding Logos & Images

There are three basic places where images can be added:

1. Form items:
   • The Image item is the easiest way to add an individual image.
   • Image List items are used to include images with a radio button or checkbox item.
   • The Heading item allows you to add a text box with your image as a background image.
   • The Formatted Text item lets you add images along with your text.
2. Form Header/Footer:
   • The Header/Footer link in the Form Editor lets you add text or images that appear on every page of your form.
3. Page or Form Background:
   • The Style page allows you to add images for the page or form background using the tools on the Customize page.

Form owners with paid accounts can upload images to the User menu -> Files & Images page or through the Image item itself. Free and Trial accounts are not able to upload files to their accounts so those form owners will need to find an alternative place to host their images. See more details on hosting images from a previous article.

Fonts

Using specific fonts to align with custom branding guidelines is possible through the style page. The built-in style settings has a large group of the most common fonts being used currently, and selecting the font-family settings for the various form areas allows designers to specify which ones to use in each available place.

If the desired font isn’t listed, a custom web font can be used from an online source like Google Web Fonts.

Adding a font to the form:

1. Start by finding your font and copying the link that looks like:

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

2. Add the link to your form’s Style -> Advanced page in the HTML Head text box
3. Edit your form’s CSS to use the new font in the desired places.

Colors

Customizing the settings on the Style page allows form designers to apply the custom branding standards to the form, and virtually every form element is available to be styled. Editing a style setting where the color choose appears will show a default group of colors, but any hex color can be used by manually entering the hex code.

Advanced color styling like opacity or gradients can be manually added to the CSS on the Style -> Advanced page.

Embedded Forms

The ultimate in custom branding is embedding the form into a website. This lets form designers customize the style then place the form’s unique embed code into the hosting site for a seamless integration. You can find your form’s embed code on its Share page.