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:
Options available depend on the form style selected.
Modify background color, font color, form border width, corner radius, and form's width.
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.
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.
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.
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.
The Style section allows you to adjust the following for each form style listed below:
Background color, font color, border color and width, corner radius, and width of your form
Background color and font color
Background color, font color, and width
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.
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."