Use HTML and CSS with your forms

Marketing_Lite_Plus_Professional_Enterprise

Sales_Plus_Professional_Enterprise

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 Customer Experience 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 Forms CSS Panel and Inspect Mode 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. All form types include the custom CSS input panel and Inspector.

Add custom CSS to your form:

  1. Click the CSS button on the top right toolbar of the Form Builder.

    CSS button.jpeg

  2. A custom input panel will appear at the bottom of the Form Builder screen. Hover and click elements on your form to see the element-specific sidebar.
  3. Click the inspector button then click the element on the form you wish to isolate.
  4. Add your custom CSS to the custom input panel.
  5. To exit Inpector mode, click the “Inspector” button again.
  6. To close the code overlay on your form, click the CSS button on the top of the builder.
Was this article helpful?
9 out of 43 found this helpful

Have more questions? Submit a request

Start free trial