Edit ONTRAform fonts, backgrounds, colors and widths

About

Applies to: All ONTRAPORT accounts.

This article covers how to edit the overall properties such as fonts, colors, width, background and borders used in your ONTRAform so you can create a form to your liking. The changes you make to these items cascade throughout the form.

Fonts

Each ONTRAform can have up to 8 primary text elements: Header 1, Header 2, Header 3, Label, Button, Large Body Text, Body Text, and Quote. We limit it to 8 so that you have consistent fonts throughout your ONTRAform. You can edit font family, font size, font face, line height and font weight, and toggle italics.

There are two ways to change the primary text elements in your ONTRAform. You can use a pre-formatted font pack or edit fonts individually. You may also load a font pack and then make individual changes as needed. The changes you make to a font here cascade throughout the form.

Option 1: Load a new font pack via our suggested combinations. Use the Form Fonts pulldown and click on Font suggestions. As you hover over the suggested font sets in the Palette the display in the Canvas shows the fonts. Select the font pack you'd like to load and click the save button.
Option 2: Edit each text element individually. Click the form fonts pulldown menu and then click the pencil icon next to the font you'd like to edit.

Colors

Each ONTRAform can have up to 5 color elements: Primary, Complementary, Dark, Light, and White. We limit it to 5 so that you have consistent colors throughout your ONTRAform. You can edit each color element to match your exact branding standards. The color picker has two modes, the default 256 web-safe color tile mode and, by clicking the artist’s palette icon at the bottom, an infinite slider color picker.

There are two ways to change the color elements in your ONTRAform. Use our pre-formatted color packs or edit them individually. You may also load a color pack and then make individual changes as needed. The changes you make to a color pack here cascade throughout the form.

Option 1: Load a new color pack via our suggested combinations. Use the color element pulldown and click on color suggestions.
Option 2: Edit each color element individually. Click the color element pulldown menu. Type in the color hex value or choose a color from the color picker.

Changes you make to the form properties apply only to the current form, and do not get saved with the color palette for use in other forms. To re-use your color and font choices use the Copy from form function when creating a new form.

Width

You can adjust the width of your form to conform to the size that best fits the space where the form will live.

Click the Form Width pulldown to select the desired width of the form. If you'd like a custom form width, enter the number in pixels. The ONTRAform will be restricted to that total width, centered in the browser viewport.

edit page width

If the form width is less than 768 pixels wide the product grid section will have the fields stacked for easier display and interaction. The Mobile version in this image shows the stacked fields.

desktop and mobile product grid displays

Background

The Form Background pulldown allows you to choose an image, a color, or a transparent background.

Type in the hex color value, or select one of the 256 web-safe colors. Click on the artist’s palette icon in the color picker to use the color slider to choose a color.

Display of the form background may be hidden by background colors or images in individual Blocks. Edit each Block’s background to the same color or choose “transparent” to allow the form background to show through.

edit page background

Other Resources

ONTRAforms Basics

Selling Products and Leveraging Upsell Opportunities

Publishing Your ONTRAforms

Add an ONTRAform to a Website

Rochelle Yoshida

Contents