A Fix for Mautic 6.0 Focus Item Form Not Validating Required Input Fields

Mautic is an incredible marketing automation platform that is still available for free.  This is an amazing tool for small businesses with small budgets that want to do big things on the Salesforce Marketing Cloud level.  I have helped enough small businesses and even enterprise corporations set up Mautic and many of its power users in digital marketing had been very impressed with its capabilities and performance.

Many of them like its simplicity of use, its clean set up, and visual campaign editor that is so much simpler to setup and follow then the clunky Salesforce marketing cloud Journey Builder.  Quite simply you can do so much of Salesforce marketing Cloud so much faster in my tech with less hassles and it is a good fit especially for small businesses looking for a new way to expand their digital marketing efforts without the ginormous Salesforce price tag.

Upgrading to Mautic 6 was no small feat, as it took about 3 hours to set up but many businesses that want to explore free Marketing Automation and CRMs would be hard-pressed to find a more powerful and productive investment of a few hours to expand any organizations marketing and automation capabilities.

One of the very powerful capabilities of Mautic is the ability to connect your WordPress site to the Mautic API.  You can also connect Mautic to other CRMs and custom systems But I will be addressing WordPress specifically in this case.  In wordpress, by embedding a simple shortcode on any page or post you can change the content of the page.  It offers a wonderful ability to personalize content with Dynamic Content. You can also put useful user messages and call to actions based on individual behaviors on a schedule.

You can also ad what is called a focus item including one of my favorite versions of user abandonment recovery, the exit intent pop up.  That’s this live screenshot above. You can do this all without having to write code or alter much of your WordPress content to achieve this higher level integration that expands your website capabilities and functions.

For those who have installed Mautic 6, you may have encountered some limitations to embedding a focus item like an exit intent pop up with an embedded form. what happened very recently on this website is on the contact page I embedded and exit intent pop up through Mautic’s  Focus Item.  Unfortunately, any required fields were not enforced so when testing the form and just clicking the submit button, it would allow blank data to go through.

This shortcoming happens when setting up the exit intent pop up through the “Basic Content Mode” in the Focus Item editor.  To overcome this minor issue, I had to set up the pop-up in HTML content mode. Here is the pop-up HTML, Javascript and custom CSS in its entirety, please note the JavaScript in script tags in the HTML content editor.

To embed a form, Mautic provides the shortcode token within the editor which is {focus_form}.

The live editor in Mautic is very useful since you can put in your own HTML page and it will simulate the behavior of the pop-up, however just be warned that your custom CSS does not update in this view, but all of your changes WILL show up when it is called on from your website.

Here is some sample HTML, CSS & Javascript to get our Mautic 6.0 focus item form working with user input validation.

<h3>
We offer FREE one-hour strategy sessions!
</h3>
<p>
    There is no obligation, you won't know if we could help you if you don't take the first step and reach out to us!
</p>
<p>&nbsp;</p>
<p>
    {focus_form}
</p>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
       const requiredParentDivs = document.querySelectorAll('.mauticform-required');

    requiredParentDivs.forEach(function(parentDiv) {
        const formElements = parentDiv.querySelectorAll('input, select, textarea');

        formElements.forEach(function(element) {
            element.setAttribute('required', 'required');
        });
    });
});
</script>

Please be advised that any code or recommendations are made available to you, in the spirit of Stack Overflow, but we do not make any guarantees that they will work in your individual case. 

If you are a small business, a non-profit  or a veteran owned company and you are looking for new ways to set up a very powerful, simple and reliable marketing automation, Mautic is exceptional and will give your organization the edge over your competition. To learn more, I suggest reaching out to the business growth and tech consultants at brandager.com.