This article shows you how to customize your ActiveCampaign forms. You'll learn to change colors, fonts, and layouts to match your brand. It also covers advanced options like custom CSS and removing ActiveCampaign branding.
Take note
Using HTML and CSS with your form is recommended for advanced users; you should be comfortable with these languages. If you are unfamiliar with HTML or CSS, we recommend working with a team member who is familiar with these languages, or you can work with one of our Certified Consultants.
Our Support Team is unable to assist you with creating or troubleshooting any HTML or CSS you add to your form.
Watch a video
Watch this video to learn how to create and customize your form.
Access form customization options
A form's customization options are located under the "Style" tab in the form builder.
To access this tab for any form:
- Click Website > Forms on the left menu.
- Click the "Edit form" button or create a new form.
- The form builder will load. All editing and style options will appear in the right pane. Click the "Style" tab located on the right pane.
Choose a layout
You can choose a layout for inline, modal, and floating box forms. Layout options are not available for floating bar forms.
Inline form layout options
There are two options you can choose from for your inline form: horizontal or vertical layout for your form:
Modal and floating box form layout options
There are four options you can choose from for your modal or floating box form: no image, image on the left, image at the top, or image in the middle:
Customize a form
The style options under "Layout" let you customize how the form will appear to your website visitors. Below are tables displaying all customization options:
General
| General Customization Options | Description |
|---|---|
| Max Width | Use this option to adjust the width of your form. Width is set as a pixel value. |
| Padding | Padding is the space around your form. You can use this option to increase or decrease padding. This is set as a pixel value. |
| Form Background | Click the color picker to change the color of your form or add a background image. |
| Page Background | Click the color picker to change the color of your form or add a background image. |
| Borders Color | Click the color picker to change the color of the form borders. |
| Borders Stroke |
Use this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double. Click custom to choose a different width and style for each Border on the form. |
| Borders Corners | Use this option to make the corners of your form rounded or square. The corner radius is set as a pixel value. |
Inputs
Inputs refer to the fields that website visitors will use to submit their personal information to you. Input customization options include:
| Input Customization Options | Description |
|---|---|
| Field Background | Click the color picker to change the color of the input fields. |
| Field border | Click the color picker to change the color of the field borders. |
| Corners | Use this option to make the corners of input fields rounded or square. The corner radius is set as a pixel value. |
Fields
The "Fields" box lets you customize the look of your form's fields. Fields customization options include:
| Fields Customization Options | Description |
|---|---|
| Header Font Color | Click the color picker to change the color of the header font. |
| Header Text Style | Select a header font style, size, and if you want the text to be Bold, Italic, or Underlined. |
| Paragraph Color | Click the color picker to change the color of the paragraph font. |
| Paragraph Text Style | Select a paragraph font style, size, and if you want the text to be Bold, Italic, or Underlined. |
Button
The "Button" box lets you customize the look of your form's submit button. Button customization options include:
| Button Customization Options | Description |
|---|---|
| Layout Background | Change the background color of the submit button. |
| Layout Text | Change the color of the button text. |
| Layout Padding | Use this option to adjust the padding of your button. Padding is set as a pixel value. |
| Layout Width | Change the width of the submit button. |
| Borders Color | Click the color picker to change the color of the button border. |
| Borders Stroke |
Use this option to add a border to your button. Borders are set as a pixel value. You can increase or decrease the border, change the border color, and select from four different border types: Solid, Dotted, Dashed, and Double. Click custom to choose a different width and style for each Border on the form. |
| Borders Corner | Use this option to make the corners of your button rounded or square. The corner radius is set as a pixel value. |
Change the "Submit" button text
You can change the text of the "Submit" button for any form.
- From the Forms page, click the "Edit design" button for the form you wish to update.
- Click the "Submit" button in the form builder.
- The right menu will display the button label and a field. Type the text you wish to use for the button.
The new button text will save automatically.
Advanced style customization
Each form type in ActiveCampaign has a custom CSS option available. This is for advanced users who are familiar with CSS and are comfortable using it.
Please note that CSS involves advanced implementation that can be complex for those unfamiliar with coding. The Customer Experience team will be unable to troubleshoot CSS-related coding issues, so we recommend reaching out to a developer for assistance with implementation.
The custom CSS option is located under the "Style" tab for each form and can be used to add further modifications to any form element. For example, you can use this option to:
- Adjust the width and height of input fields
- Adjust the width and height of the submit button
- Adjust font size
- Adjust the font type for singular elements. For example, you can use this to make the button text font different from the rest of the form
To use the custom CSS option:
- From the Form Builder, at the top right, click the "Code Editor" toggle on.
- An HTML editor will appear at the bottom of the Form Builder. Type the CSS into this box.
The CSS you add to the form will save automatically.
Turn off ActiveCampaign branding
If you are on a Plus, Professional, or Enterprise plan, you can remove ActiveCampaign branding from your form. Starter plan users are not able to switch off branding.
To turn off ActiveCampaign branding:
- From the Form Builder, click the "Style" tab.
- Scroll down to the bottom of the "General" section.
- Click the AC branding toggle to set it to the "Off" position.
This setting will save automatically.
Learn more about ActiveCampaign branding on forms.
Additional customization options
The customization options under "Options" let you customize when Modal, Floating Box, and Floating forms appear on your website, how messaging appears after the form is submitted, form actions, and form settings. This section explains how to use the customization options in the "Options" tab.
If you need to update the size of a form on a mobile device, you can do so with CSS and media queries.
Please note that CSS involves advanced implementation that can be complex for those unfamiliar with coding. The Customer Experience team will be unable to troubleshoot CSS-related coding issues, so we recommend reaching out to a developer for assistance with implementation.
Additional customization for Modal, Floating Box, and Floating Bar forms
These form types offer additional customization options that determine when and how the form appears to site visitors. These settings are located under "Options" > "Popup Effect" in the form builder's right menu.
| Form Type | Options |
| Modal |
|
| Floating Box |
|
| Floating Bar |
|
Additional resources for the "Options" tab:
- Learn more about "On Submit"
- Learn more about "Form Action"
- Learn more about "Form Settings"