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.
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….
To looking like this…
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.
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:
- Set the option to “Show Label?” to No for
- Enter a placeholder, such as “Enter your email here”
- Under the Attributes tab, add class=”email_subscribe” to the Input Attributes
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”.
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.
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.”
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.)
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:
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.
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:
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:
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.
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********”.
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.
(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!
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.
After that, you should be able to go to a page where the form is displayed, and it will be done!
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!