How do I use HTML and CSS in my form(s)?

With MailBlue, you can use the HTML code block to customise your form with HTML, and you can use CSS to modify elements.

Please note: this article covers a relatively advanced feature within MailBlue. When implementing these tips, basic knowledge of CSS and HTML is required at a minimum. If you are not familiar with CSS and HTML, we recommend involving someone with expertise in this area to handle the design. Alternatively, there are many online knowledge bases like this one.

What we cover in this article:

• What can you do with HTML within MailBlue forms?
• How do I add an HTML code block to my form?
• What can you do with CSS within MailBlue forms?
• How do I adjust the CSS code of my form?

What can you do with HTML within MailBlue forms?

With the built-in HTML code block, you can add text with embedded links to your inline form. You can use this feature when you want to offer contacts the ability to view a video or the privacy policy on your website, for example. Additionally, with the HTML code block, you have the ability to design text and alignment more to your liking.

Keep in mind that an HTML block can only be used with inline forms. The floating bar, floating box, or modal form do not support this option.

How do I add an HTML code block to my form?

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

You can use this block to embed links in text, create bullet points, format text in this block, and much more.

Keep in mind that the HTML block can only be used on inline forms. Floating box, floating bar, and modal forms do not offer the option to add an HTML block.

Add the HTML code block to your form:

1. From the form builder, go to Fields > Contact Fields.
2. Drag the "HTML code" block to your form layout.
3. Click on the HTML code on your form layout.
4. In the right panel, sample text and HTML code will be displayed. Type or paste your code into this box on the right side.
5. As you add code and text to this box, you will see this new text and formatting applied to the block on your form layout.

What can you do with CSS within MailBlue forms?

Through the custom CSS box and the Inspector button, you can customise your form as desired. Here, you can, for example, change the width of the submit button using CSS, adjust the font type and size, centre text, change text colour, and much more. This option is located under the 'Style' tab. All form types contain a custom CSS box and Inspector button.

How do I adjust the CSS code of my form?

You can use the CSS input panel and Inspector mode to adjust visual elements of your form, such as the width of your submit button, customising the font type and size, centring text within an element, changing the colour of your text, and much more. All form types include the custom CSS input panel and Inspector mode.

1. Click on the CSS button in the top right corner of your form.
   
   
   
   

2. A custom input window will appear at the bottom of your form screen.

3. Click on 'Inspector' and then click on the element in the form that you want to customise.

4. Add your custom CSS in the custom input window.

5. To exit Inspector mode, click again on the 'Inspector' button.

6. To close the CSS input panel on your form, click on the CSS button at the top.