How do I customize my form?

Forms can be customized by using the options available on the "Style" tab. Each form you create will have its own "Style" tab.

To access this tab, navigate to the Forms overview page in your account and click "Edit" for the form you wish to work with. Then, click the "Style" tab located on the right side menu.

In this article, we'll walk you through the following styling options and how you can use them to create your own custom form:

  • Layout
    Options available depend on the form style selected. 
  • Style
    Modify background color, font color, form border width, corner radius, and form's width.
  • Button
    Modify background color, text color, border width, corner radius, and padding.
  • Custom CSS 
    Change font type and size, field width and height, button width and height.
  • Turn off ActiveCampaign branding
    Remove the ActiveCampaign logo from your form. Applies to Plus, Professional, and Enterprise accounts.

Layout

The Layout style option is available for the inline, floating box, and modal form styles. Each form style will have its own specific layout options.

Inline form

With this form style, you can select a horizontal or vertical layout.

Floating box form

With this form style you can select from four different layouts: one without an image, one with an image on the upper left of the form, one with an image at the top of the form, or one with an image under the form title.

Modal form

With this form style, you can select from four different layouts: one without an image, one with an image on the upper left of the form, one with an image at the top of the form, or one with an image under the form title.

To choose a layout for your form, click any of the options available under the Style tab. The form builder will automatically display the form in your preferred layout.

Style

The Style section allows you to adjust the following for each form style listed below:

Inline

Background color, font color, border color and width, corner radius, and width of your form

Floating bar

Background color and font color

Floating box

Background color, font color, and width

Modal

Background color, font color, and width

To select colors that match your company's branding, type that color's hex number into the Background field and/or Font color field.

You can also use the color picker to the right of those fields to select a different color. The color picker is available for Background, Font Color, and Border (inline forms only).

Click the up or down carets adjust the corner radius and border of an inline form.

You can also use the up and down carets to adjust the width of your form (inline, floating box, and modal form styles only).

The form builder will automatically display any and all customizations you make, as you make them. We encourage you to play with each of these elements to create a form that best suits your brand.

Button

This section will allow you to adjust how your Submit button appears on your form. You will be able to adjust the button's color, text color, border, corner radius, and padding. This option is available for all form styles.

To select colors that match your company's branding, type that color's hex number into the Background field and/or Font color field.

You can also use the color picker to the right of those fields to select a different color. The color picker is available for Background, Font Color, and Border.

To adjust the border width, corner radius, or padding for your button, click the up or down carets.

Note that you will not be able to adjust the button's height or width here. You will need to use custom CSS in order to make those adjustments (see the next section).

Custom CSS

You can customize each of the following elements by using the Custom CSS section available under the Style tab:

  • Font size
  • Font type
  • Width and height for form field
  • Width and heigh of submit button

Note that this requires knowledge of CSS syntax. If you are not familiar with CSS, you may need to work with someone on your team who is. There are also several great resources out there where you can learn CSS, such as this one.

This option is available for all form styles.

To learn how to apply custom CSS to your form, follow these steps:

1. Click the "Inspector" button, then click the element on the form you wish to add custom styling to. For example, you can add custom styling to the Submit button by clicking the submit button your form.

2. Once you click the element you wish to customize, it will appear in the Custom CSS box. Next, type your custom CSS in the box under the element. In the image below, we're continuing with the submit button example:

Here is a quick animation illustrating how to adjust the font size and font type for a form's submit button using the Inspector tool and Custom CSS box:

Turn off ActiveCampaign branding

You can remove the ActiveCampaign logo from your form by turning off ActiveCampaign branding. This option is available under the Miscellaneous section.

Note that you can only turn off branding if you are on the Plus, Professional, or Enterprise plan.

To turn off ActiveCampaign branding, click the toggle so that it says "Off."

turn_off_ac_branding.gif

 
Have more questions? Submit a request