How to customize the design of Mautic forms to be less vanilla

Mautic forms are extremely awesome. They can capture lead information, and then place that person into automated nurturing campaigns, all working behind the scenes. How cool is that?

But the base form that Mautic produces that can be easily embedded on your website…The design of that form is a little plain.

customize the design of your Mautic forms

I thought so at least, and so decided to figure out how to customize the form to look much more eye catching and on-brand.

Let’s take a very simple newsletter form as an example. Specifically, I wanted the form to go from looking like this….

Before the mautic form redesign
Let’s call this version A.

To looking like this…

after Mautic form redesign
Let’s call this one version B.

Let’s call the plain Mautic form version A, and the form with the updated design version B. In my opinion, version B is just obviously better.

It’s brighter and more colorful, which means it’s much more likely to catch the attention of visitors on my site. Which means more people are likely to complete the form. And that’s the name of the game for many online based marketing businesses: generate more leads and nurture them into sales.

So, in this article I’m going to go through the process of how version A can be transformed into version B. Or, to put it differently, how this mautic form can be totally customized to look however I want it to look.

[*****NOTE: The complete source code for this tutorial can be accessed here.*****]

Step 1: Create your own form in Mautic

First we’ll need a form in Mautic. I have an entire post about how to create and implement forms in Mautic, so I’m not going to go through too much detail here.

Suffice it to say, for this custom form design, our form will only have 2 fields: Email and a Submit button. For the email field, we’ll need to do 3 key things:

  1. Set the option to “Show Label?” to No for
  2. Enter a placeholder, such as “Enter your email here”
  3. Under the Attributes tab, add class=”email_subscribe” to the Input Attributes
Mautic custom form setup
This will be a basic newsletter signup form with newsletter and a submit button. Make sure you enter a label, even though in this version we’re choosing not to show it.

This is going to give us the look we want by not having a label, and by letting us style the input of the email field a cool darker color that will be more eye catching.

For the submit button, I usually don’t like to use the word submit, so let’s replace the label “Submit” with something more friendly such as “Sign me up”.

Mautic form button submit
Enter some kind of cool label for the button. “Submit” is boring.

Step 2: Use the Manual Copy option in Mautic’s form HTML

Once your form is saved, find the form page, and look for the Form HTML section. There should be 2 options: Automatic and Manual.

Not surprisingly, the Automatic option is what results in version A, the plainer, less eye-catching version of the form.

Manual copy Mautic form
Let’s select the Manual Copy option to make our form totally not vanilla.

On the plus side, this automatic option is very easy to implement. You simply copy the code it gives you, and paste into your WordPress widget or wherever else you want it to display on your website.

Unfortunately, the Automatic option is not very customizable, so that’s why we’re going to use the Manual option here. It is more of a process, but the end result is a form that is totally customized to your liking.

Select the Manual option, and from there, you should see 2 more options. We want to use “Copy and paste the form’s content into the document’s body.”

manual copy option for mautic
The second option from the Manual Copy option – this is the one we want.

Step 3: Open the form html in a code editor and preview in a web browser

For this step you’ll need some kind of html editor application. Don’t worry, the internet is filled with fantastic options for this type of software that are totally free.

I have used and found success with an application called “Notepad ++”. So if you Google, “Notepad ++ for windows/mac”, it should come up and you’ll be up and running within seconds. If you want to explore your options, just Google, “free html code editor for windows/mac” and you are sure to find numerous options.

In any case, you will need to do the following quick and easy steps:

Download your html code editor program

  • Open and html file
  • Paste the code from Mautic’s manual form html into the file (make sure to copy the “Copy and paste the form’s content…” option)
  • Save it as an html file
  • After you save the html file, find the file and open it up a web browser. (Just double click it like you would any word doc or pdf file.)
preview of the mautic manual html copy
You can preview your html file in your browser to make sure your changes are working right. Just save the file and refresh your browser.

This will give you a previous of the current look of your form. Every time you hit Refresh on your browser, it will update and display the most current version. And while it will not look exactly like it eventually will on your website, it will definitely show you if your design updates are working and if the form’s ready to be placed on your website.

Step 4: Add the above form content and the below form content to the Mautic html

Let the fun stuff begin!!!!

Above our form there is a headline “Get cool stuff…”, plus some more descriptive text. And below the form there is a privacy statement.

All of this material is contained within the bright green box as a call to action, so we need to include it in our form content html as well.

This is all a totally new addition to the mautic source code, and will be placed inside the <div> tag that wraps the form html. So, here is the opening and closing <div> tags, and the new code that we’ve placed:

Once we make these additions, you should be able to refresh the browser where you have your html file open, and it should reflect those updates, like this:

mautic form html preview
If you save updated html file, and then refresh the browser that you’re viewing the file in, the new version should look like this – still plain, but has our text above and below the form now.

Step 5: Add in the awesome background colors and change the text from black to white

So, the form now has the cool above and below content that is going to provide a clear, popping call to action and privacy statement. That’s awesome.

But it’s still the same blank looking, blank and white form. Now we need to make the background of the form a nice bright color, and change the text to white so that it reads better against the new bright colored background.

At this point, it is helpful to point out that there are 2 sections to this html. One if the content (or html) and one is the style (css). The style is everything inside the opening and closing <style></style> tags.

style section of the mautic form code
Here is the style, or css, section.
mautic custom from code html content section
Here is the content section that has the html markup.

In the <style> section, we’re going to make a commented out notation to make it clear where we have added new css styling that is different from what Mautic generates in the default form (the one that looks like version A).

After this note, we’ll add the css for our text that is before and after the form, making it white. This also adds some padding to the form to make the spacing a little nicer. And it makes the placeholder text white and background color a darker shade of green. Like this:

Now is also a good time to note that you can replace the colors I have there with anything that is more suitable for your website. For example, background-color:#4dbd33; –  this # can be changed to anything you think looks good.

(It’s fun to experiment with hex colors anyways.)

Again, if we apply these changes, save our html file, and refresh the browser, it should look much closer to our final form, like this:

mautic form custom html preview
Almost there! Our html file has been saved and refreshed in our browser, and it’s looking very close to how we want it.

Yay! This is looking very close to awesome!

Step 6: Change the button of the form to make it look awesome and make the email input field bigger

In our final form, the button is going to be full width, with larger and colorful text, and the square corners instead of rounded. All of these updates are going to be done by tweaking the original css code that Mautic has given us.

Let’s comment out Mautic’s css for the button (anything with “button-wrapper” in it). And then we copy it into the section with our new, modified css, and make updates until we like what we see.

Also, by commenting it out and not deleting it, this lets us revert back to the original in case we mess something up by mistake.

So here’s what the commented out section looks like:

keep your commented out css
Might be a good idea if you’re following along to keep your commented-out css just in case things go awry!

Now, in the new css section, we’ll take that code and make some updates to. What we’re doing here is making the width 100%, changing the color of the text and background color, and increasing the font size and padding. Here is the new code:

This is really going to make our button pop and grab people’s attention.

Finally, there is one more additional piece of css we should add to make the email input field a little bit bigger and match the height of the button. It is this:

Again, with this part, we’ll comment out the old Mautic version, and add the updated version in our new css section. Once we save and refresh our browser, we should have a very cool looking form like this.

mautic form html preview in browser
This is the saved, refreshed html file viewed in our browser. It’s now ready for primetime! Let’s place it in our website now.

Step 7: Make sure your html content is updated with YOUR Mautic information

This code is ready to roll. The only thing to note before putting it live on your website is…Make sure – if you’re using the sample code that I’ve provided in this article, that there are no spots that say “*******REPLACE THIS WITH YOUR MAUTIC FORM CODE********”.

make sure the right information is copied from your mautic form
If you’re using then sample code I’ve provided, make sure you copy the information from YOUR mautic form wherever you see this highlighted text.

At each of these places, you’ll need to replace this with whatever Mautic creates in your form html by default. This is critical; if you’ve left any of these unchanged, your form will just look pretty but won’t work at all!

If you have just followed along by first taking the default code form your Mautic form, and then updated it, you are good.

Step 8: Add the form html content to your website

From this point on, I’ll be working on adding the form to a WordPress website. If you are not working with WordPress, basically you need to make sure that both the html and the css part get loaded correctly onto your site.

First, the html part. This is the content of the form that is between the <div> and </div> tags.

This is simple: start by copying everything between and including those 2 tags, and then just paste it inside a WordPress text widget, assuming it’s going to be on a sidebar of your website.

place custom mautic form html in wordpress text widget
Paste the html content – not the style – into a WordPress text widget, wherever you want the form to appear in your sidebar.

(Alternatively, if this is going into the main content section of a page on your site, then you’ll just want to paste it into the text portion of the body of your webpage.)

Once you save that, you should be able to go to a page on your site where it’s supposed to appear, and it will be there!

embed custom mautic form html on website
Our custom Mautic form html has been embedded successfully on the site, but not yet the style. That comes next!

Only thing, obviously, is that we’ve only paste the content part yet – and not the styling part. So it will look pretty plain, like this:

Step 9: Add the style to in the head tag of your website using insert headers and footers

There are a number of different options you can use to import css (<style></style>) into your Worpdress website.

The best, most stable option I’ve found is the Insert Headers and Footers plugin from WordPress. This does just what it sounds like – inserts whatever you want in the html <head> tags of your website.

And that’s where the css from our form needs to go. So, install and activate the plugin.

Once you do this, you’ll be able to go from your WordPress dashboard, under Settings, and select “Insert Headers and Footers”.

From there, you will see an option to insert whatever you want into the <head> tag of your site. Unless you have totally different looking Mautic forms running on different pages of your site, this option should work fine for you.

So just paste it everything between and including the <style> and </style> tags into the “Scripts in Header” section, and save.

place css in head tag of website
Here is where you paste in the style, or css portion, of our customized Mautic form code.

After that, you should be able to go to a page where the form is displayed, and it will be done!

updated mautic form design
The customized Mautic form is looking pretty sharp!

Yaaay! Hopefully this has helped, and your once vanilla form is now orange sherbert, or rocky road, or whatever bomb flavor of ice cream you want your form to be!

This is a starting point, and you can make any tweaks to the language, height, or padding to suite your needs!

Leave a Reply

Your email address will not be published.

Launch a FREE email marketing and CRM program with Mautic

Setup guide

Pro-level email marketing, even to a large audience, can be accomplished for free. This is how. https://t.co/4DcJgBvI34

Mautic stages have the power to automate email marketing to your contacts, sending targeted messages that change depending on where they are in your sales pipeline. Learn how to set it up here: https://t.co/GkoaIQjRou

Load More…