Company Blog Support
Rochelle Yoshida
posted

Contents

    Back to Top

    Edit ONTRAform fonts, backgrounds, colors and widths

    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.

    edit form font       Contacts_-_ONTRAforms_-_Properties_-_Change_Form_Fonts_-_Select_Font_Pack.png

    • 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.

    edit page font

    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.

     

    edit page colors

    • 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.

    • Change form width: Click the Form Width pulldown. 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
    Background

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

    • Change form 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

    .
    Borders

     

    Other Resources

    ONTRAforms Basics

    Selling Products and Leveraging Upsell Opportunities

    Publishing Your ONTRAforms

    Articles in this section

    Have more questions? Submit a request

    Comments

    Powered by Zendesk