Design and customize your ActiveCampaign form

With ActiveCampaign, you can customize forms to match your brand's colors, add images, change the font, and more.

Learn more about the types of forms you can create with ActiveCampaign.

Learn how to create a 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:

1. Click "Forms" in the left menu to navigate to the Forms Overview page.

2. Click the "Edit" button or form name for the form you wish yo work with.

3. Click the "Style" tab located in the right menu.

Style tab in the form builder.

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.

Customize an inline form

With the inline form, you can choose a layout and customize the styling for the form and submit button.

Layout

Click either option to choose a horizontal or vertical layout for your form.

SMCNALLY Email Marketing - Form

Form Style

The "Form Style" box lets you customize how the form will appear to your website vistiors. Form style customization options include:

Form Style Customization Options Description
Background Change the background color of your form or make it transparent.

Background images are not supported with this form type. 
Font Color Change the color of the text that appears on your form.
Font Change the font type on the form to match your brand. 
Border Use this option to add a border to your form. 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. 
Corner Radius Use this option to make the corners of your form rounded or square. Corner radius is set as a pixel value. 
Width Use this option to adjust the width of your form. Width is set as a pixel value. 

Button

The "Button" box lets you customize the look of your form's submit button. Button customization options include:

Button Customization Options Description
Background Change the background color of the submit button. 
Text Change the color of the button text. 
Border 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. 
Corner Radius Use this option to make the corners of your button rounded or square. Corner radius is set as a pixel value. 
Padding Padding is the space around your button. You can use this option to increase or decrease the padding. This is set as a pixel value. 

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 these adjustments.

Customize a modal pop-up form

With the modal pop-up form, you can choose a layout and customize the styling for the form, input fields, and submit button.

Layout

There are four options you can choose from for your form: no image, image on the left, image at the top, or image in the middle.

SMCNALLY Email Marketing - Form

Modal Style

The "Modal Style" box lets you customize how the form will appear to your website vistiors. Modal style customization options include:

Modal Style Customization Options Description
Background Click the color picker to change the color of your form or add a background image.
Font Color Change the color of the text that appears on your form.
Font Change the font type on the form to match your brand. 
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 decrese padding. This is set as a pixel value.
Corner Radius
Use this option to make the corners of your form rounded or square. Corner radius is set as a pixel value.
Shadow Use this to add a shadow to your form. Doing so will help it stand out. You can choose from the following options: None, Light, Medium, and Heavy.

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
Background Click the color picker to change the color of the input fields.
Font Color Click the color picker to change the color of the input field text. 
Corner Radius
Use this option to make the corners of input fields rounded or square. Corner radius is set as a pixel value.

Button

The "Button" box lets you customize the look of your form's submit button. Button customization options include:

Button Customization Options Description
Background Change the background color of the submit button. 
Text Change the color of the button text. 
Border 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. 
Corner Radius Use this option to make the corners of your button rounded or square. Corner radius is set as a pixel value. 
Padding Use this option to adjust the padding of your button. Padding is set as a pixel value. 

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 these adjustments.

Customize a floating box form

With the floating box form, you can choose a layout and customize the styling for the form, input fields, and submit button.

Layout

There are four options you can choose from for your form: no image, image on the left, image at the top, or image in the middle.

SMCNALLY Email Marketing - Form

Box Style

The "Form Style" box lets you customize how the form will appear to your website vistiors. Form style customization options include:

Box Style Customization Options Description
Background Click the color picker to change the color of your form or add a background image.
Font Color Change the color of the text that appears on your form.
Font Change the font type on the form to match your brand. 
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. 
Corner Radius Use this option to make the corners of your form rounded or square. Corner radius is set as a pixel value. 
Shadow Use this to add a shadow to your form. Doing so will help it stand out. You can choose from the following options: None, Light, Medium, and Heavy. 

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
Background Click the color picker to change the color of the input fields.
Font Color Click the color picker to change the color of the input field text. 
Corner Radius
Use this option to make the corners of input fields rounded or square. Corner radius is set as a pixel value.

Button

The "Button" box lets you customize the look of your form's submit button. Button customization options include:

Button Customization Options Description
Background Change the background color of the submit button. 
Text Change the color of the button text. 
Border 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. 
Corner Radius Use this option to make the corners of your button rounded or square. Corner radius is set as a pixel value. 
Padding Use this option to adjust the padding of your button. Padding is set as a pixel value. 

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 these adjustments.

Customize a floating bar form

With the floating bar form, you can customize the form style and submit button. Layout options are not available with this form type.

Bar Style

The "Bar Style" box lets you customize how the form will appear to your website vistiors. Bar style customization options include:

Bar Style Customization Options Description
Background Change the background color of your form.

Background images are not supported with this form type.
Font Color Change the color of the text that appears on your form.
Font Change the font type on the form to match your brand. 

Button

The "Button" box lets you customize the look of your form's submit button. Button customization options include:

Button Customization Options Description
Background Change the background color of the submit button. 
Text Change the color of the button text. 
Border 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. 
Corner Radius Use this option to make the corners of your button rounded or square. Corner radius is set as a pixel value. 
Padding Use this option to adjust the padding of your button. Padding is set as a pixel value. 

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 these adjustments.

Change the "Submit" button text

You can change the text of the "Submit" button for any form.

1. From the Forms Overview page, click the "Edit" button for the form you wish to work with.

2. Click the "Submit" button in the form builder.

3. The right menu will display the button label and a field. Type the text you wish to use for the button.

SMCNALLY Email Marketing - Form

The new button text will save automatically.

Advanced 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 with using it. 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

If you want to learn more about using CSS, see this CSS Tutorial from w3schools.com.

To use the custom CSS option:

1. From the form builder, click the "Style" tab.

2. Scroll down until you see the "Custom CSS" box.

3. Click the "Inspector" button then click the form element you wish to modify.

4. Once you click the element you wish to customize, it will appear in the "Custom CSS" box. Type the CSS into this box.

The CSS you add to the form element 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.

Lite plan users are not able to switch off branding.

To turn off ActiveCampaign branding:

1. From the form builder, click the "Style" tab.

2. Scroll down until you see the "Miscellaneous" box.

3. Click the AC branding toggle to set it to the "Off" position.

This setting will save automatically.

Have more questions? Submit a request