Use HTML and CSS with your forms

With ActiveCampaign, you can use the HTML Code block to customize your form with HTML, and you can use CSS to modify elements.

Please note that using HTML and CSS with your form is for advanced users. You need to be comfortable with these languages. If you are not familiar with HTML or CSS, we recommend working with a member of your team who is. There are also several great resources out there where you can learn HTML and CSS such as this one.

Our Support Team is not able to help you create or troubleshoot any HTML or CSS you add to your form.

HTML

You can use the HTML block to add your own HTML to your form. The HTML you add will only be applied to this block, not the entire form.

You may want to use this block to embed links into text, create bulleted lists, format any text in this block, and more.

Please note that the HTML block can only be used on inline forms. Floating box, floating bar, and modal forms do not have the option to add an HTML block.

Add the HTML Code block to your form:

  1. From the Form Builder, click Fields > Contact Fields.
  2. Drag the "HTML Code" block to your form layout.
  3. Click the HTML Block code on your form layout.
  4. The right pane will display sample text and HTML code. Type or paste your code to this box on the right pane.

As you add the code and text to this box, you will see this new text and formatting applied to the block on your form layout.

CSS

You can use the Custom CSS box and Inspector to modify visual elements of your form, such as adjusting the width of your submit button, adjusting font type and size, centering text in an element, changing the color of your text, and more. This option is located under the Style tab of the form builder. All form types include the custom CSS box and Inspector.

Add custom CSS to your form:

  1. From the Form Builder, click the “Style” tab on the right pane.
  2. Scroll down until you see the “Custom CSS” box and "Inspector."
  3. Click the Inspector button, then click the element on the form builder that you wish to modify with custom styling.
  4. The Custom CSS box on the right will display code for the element. Type or paste your CSS code to this box on the right pane.

As you add CSS to this box for the selected element, you will see the new styling applied to the element on your form layout.

Repeat the steps above to add CSS to any other element you wish to modify.

Was this article helpful?
4 out of 18 found this helpful

Have more questions? Submit a request

Start free trial