Use HTML and CSS with your forms

```mediawiki Navigation: Main_Page > Forms > Use HTML and CSS with your forms

Use HTML and CSS with your forms

ActiveCampaign offers the ability to enhance your forms through the use of HTML and CSS, allowing for a more customized and visually appealing user experience. This feature is particularly beneficial for users looking to embed specific functionalities or style their forms according to their brand’s aesthetics. Utilizing these languages can significantly improve how your forms are perceived by users, potentially leading to increased engagement and conversion rates.

Why This Matters

Customizing forms with HTML and CSS allows advanced users to incorporate unique elements into their forms, facilitating a better alignment with branded materials and improving overall user experience. Such enhancements could range from formatting text and embedding links to modifying the appearance and functionality of various form elements. This customization capability is vital for businesses looking to create a strong brand presence across digital platforms.

How to Access This Feature

To access the HTML and CSS features within your forms, you must first navigate to the Form Builder in ActiveCampaign. This is where you can make all adjustments to your forms. Ensure that you are using a compatible plan, as this feature is available on the Starter, Plus, Pro, and Enterprise plans.

Step-by-Step Instructions

Using HTML

The HTML block can be added to customize specific parts of your form.

1. From the Form Builder, click on Fields > Contact Fields. 2. Drag the HTML Code block to your form layout. 3. Click the HTML Block on your form layout to activate it. 4. The right pane will then display sample text and HTML code. Here, you can type or paste your desired code into this box.

As you input the code, you will immediately see the text and formatting applied within the block on your form layout.

Using CSS

To modify visual elements of your form using CSS, follow these steps:

1. Click the CSS button located on the top right toolbar of the Form Builder. 2. A custom input panel will appear at the bottom of the Form Builder screen. 3. Hover and click on elements within your form; this will open the element-specific sidebar. 4. Click the Inspector button, and then select the element on the form you want to isolate. 5. Input your custom CSS into the custom input panel provided. 6. To exit Inspector mode, click the Inspector button again. 7. To close the code overlay on your form, click the CSS button on top of the builder.

Configuration Options and Settings

While customizing your forms, there are various options available through the use of HTML and CSS:

• HTML Code block: This feature allows you to insert custom HTML just for specific blocks within your forms.
• CSS Panel and Inspect Mode: It provides a way to add custom CSS rules to adjust visual aspects like size, color, and layout of form elements.

Best Practices and Tips

1. **Familiarize Yourself**: Ensure you have a basic understanding of HTML and CSS, as this feature is meant for advanced users. Collaborate with someone who has experience if you are still learning. 2. **Keep it Simple**: Avoid overly complex modifications that can confuse users or create accessibility issues. 3. **Mobile Responsiveness**: Test your forms to ensure they work well on mobile devices, adjusting CSS as necessary. 4. **Utilizing Resources**: Consider using resources such as [W3Schools](https://www.w3schools.com/) to learn more about HTML and CSS if you are unfamiliar with coding.

Common Use Cases

1. **Embedded Links**: Use the HTML block to create hyperlinks within your forms, encouraging users to visit related resources. 2. **Formatted Lists**: Customize the layout of information provided in your forms using bullet or numbered lists through HTML. 3. **Styling Elements**: Adjust the appearance of buttons and text to match your brand’s colors and fonts using CSS, enhancing the overall look and feel of your forms.

Troubleshooting

While utilizing HTML and CSS, you may encounter several challenges:

1. **Code Not Reflecting Changes**: Make sure your HTML code does not contain errors. Validation tools can help identify issues. 2. **CSS Not Applying**: If your styles do not show up, verify the specificity of your selectors and ensure there are no conflicting styles in other areas of your form.

Please note that the Customer Experience Team at ActiveCampaign is unable to assist with troubleshooting specific HTML or CSS issues.

Related Features

You may want to explore the following related features for additional capabilities:

• Forms
• Automation

Frequently Asked Questions (FAQ)

1. **Can I use external stylesheets for my forms?**

  No, custom CSS can only be added directly within the Form Builder.

2. **Are there any limitations to using HTML?**

  Yes, the HTML block can only be added to inline forms; other types such as floating box or modal forms do not support HTML blocks.

3. **What kind of HTML can I add?**

  You can include text formatting, links, and basic layout structures, but you cannot affect the overall structure of the form with HTML.

4. **Will changes I make affect all forms?**

  No, HTML and CSS changes are specific to the individual form you are editing.

5. **What if I need help with CSS?**

  Since CSS implementation can vary widely, consider reaching out to a web developer for assistance or checking existing online resources.

6. **Is there a preview option for my changes?**

  While the view updates as you type in the HTML/CSS, be sure to test the form live to see how it interacts with users.

By understanding how to effectively use HTML and CSS within your forms in ActiveCampaign, you can create compelling, branded forms that engage your audience and enhance your overall marketing efforts. ```