Mautic and WordPress: A Guide for Non-Developers

Mautic logoMautic and WordPress are like peanut butter and jelly.

Why?

Because they go really well together. They’re both free, open source, and incredibly powerful.

With Mautic running your marketing and WordPress handling your website, you’re set up for success that can scale – without costing a fortune.

Here’s the deal:

If you’re new to Mautic, I’ll show you how to get started by integrating your Mautic tracking code and adding forms to your WordPress site.

With the basics in place, we’ll explore some of the available WordPress plugins for Mautic, including form and ecommerce plugins.

Advanced user?

You’ll find a variety of tips, resources, and other links near the bottom of this post. I’ll update this section every time I find something new.

Last update: December 9, 2017

Want to stay informed about the latest tutorials, news, and plugins for Mautic? Check out my weekly newsletter, The Unofficial Mautic Newsletter.

Table of Contents

Before You Get Started

If you’re reading this, I’m guessing that you are already familiar with WordPress. But perhaps you’ve only recently discovered Mautic – free, open source marketing automation software.

In this guide, I assume two things:

First, I assume you are familiar with the basics of managing a WordPress site, such as installing plugins, using the text editor to add code snippets to your posts, etc.

Second: you already have Mautic installed with basic settings properly configured. If not, I recommend you do that first. Check out the Mautic docs and my Mautic tutorials page for help getting started.

First Steps: Install Tracking and Add Mautic Forms

To start tracking visitors to your website, you’ll need to add the Mautic tracking code to all of your pages. There are several ways to do this, but if you’re just getting started, I recommend using the official Mautic WordPress plugin, WP Mautic, which is maintained by the Mautic team.

  1. Install and activate the WP Mautic plugin
    Installing the plugin via your WordPress dashboard is easy. In WordPress, go to Plugins > Add New and search for ‘WP Mautic’. Install and activate the WP Mautic plugin.
  2. Add your Mautic site URLMautic and WordPress: WP Mautic plugin settings
    In the plugin settings, you need to add the site URL (sometimes referred to as your “base URL”) from your Mautic installation. To get this URL, go to your Mautic dashboard and choose Settings > Configuration. You should now be in System Settings, looking at a your General Settings. Copy your Site URL and add it to your plugin settings in WordPress. Make sure you save your changes.
  3. Additional settings
    I also recommend choosing the option to embed the script in the ‘wp_footer’ section, and checking the box to activate the tracking image when Javascript is disabled. I’ll cover the “Logged user” option later in this post.

With the plugin active and your site URL saved in settings, your Mautic tracking code will now automatically be inserted on every page of your site. Nice!

Note: you can also download the plugin via Mautic WordPress GitHub if you prefer to install using FTP or some other method.

Adding Mautic Forms to Your Site

Now it’s time to integrate your Mautic forms with WordPress so you can start collecting leads. If you haven’t created any Mautic forms yet, I recommend reviewing the forms documentation. You might also want to check out this video that explains the differences between standalone and campaign forms: Choosing the Right Form.

To add your form to your WordPress site, you have several options:

1. Use a Shortcode

If you’re using the WP Mautic plugin, you can use this shortcode to embed a form in any WordPress page or post:

[[mautic type="form" id="3"]]

Finding a Mautic form IDMake sure you change the ID number so that it matches the ID of the Mautic form you want to embed. The number 3 is just an example.

2. Automatic or manual embed

Even without a shortcode, embedding a Mautic form is very easy. From your Mautic dashboard, click on the name of the form you want to embed. Look for the teal colored box titled “Form HTML”, where you can choose either automatic or manual embed.Mautic form embed options

I suggest starting with “automatic”, and using the Javascript code, which you’ll notice is the recommended option. Copy that code, and paste it wherever you want it show up in your WordPress site.

If the area you want to embed your form does not allow Javascript, you can try the second “automatic” option – the iframe code.

Note: when using iframe code, the form is constrained to a 300px square area by default. If your form is not displaying well in those dimensions, you can adjust those values!

3. Use a Mautic Focus Item

Using Mautic Focus Items, you can display your form in a popup, in a bar at the top of your site, and more. Continue on to the next section for more details.

Focus Items & Popups

Besides your standard form embeds, Mautic makes it pretty easy to create popups and other types of opt-ins to collect visitor data.

Focus Items

In Mautic, a Focus Item is used to engage your visitors – either by displaying a notice, asking them to opt-in, or encouraging them to click on a button or link.

Popups, display bars, and full-page takeovers are all at your disposal. Check out the docs for more info.

Creating a Popup to Collect Email Addresses

Ready to create your own popup?
I recommend starting with this video (opens in a new tab):
How To Create A Focus Item On Your Website

Remember: once you’ve created your Focus Item, you have two options to get it live on your site.

a) You can embed it with the Javascript snippet that Mautic provides.

b) Use a shortcode (only works if you’re using the WP Mautic plugin):

[[mautic type="focus" id="1"]]

Don’t forget to change the ID number so that it matches the ID of the Mautic focus item you want to use.

Connecting Mautic with Other Popup / Opt-in Tools

If you don’t like Mautic’s Focus Items, there are plenty of other options. Here are a few I’ve used.

Sumo

I like Sumo because of their:

  • Great WYSIWYG designer that makes it super easy to create beautiful popups and slide-ins. They
  • Display rules and hidden fields. You can do all kinds of advanced targeting (choose specific pages,  referral sources, etc. to trigger popups) and pass extra data to Mautic.

If you decide to give them a try, I’d love it if you’d sign up using my affiliate link! Check out my post How to Connect Mautic and Sumo for Email Lead Capture (using Zapier) for more details.

Contact Form 7

If you’re using CF7, you have two plugin options: CF7 Mautic Extension (only works with CF7), or WP Mautic Form Integrator (works with several plugins, including CF7).

The CF7 Mautic Extension plugin has worked very well for me. Take a look at this post if you’re interested in giving it a try: How to Connect Contact Form 7 with Mautic [Video Tutorial]

Other Options

There aren’t many plugins with a direct integration with Mautic (yet). Check out the WordPress section of my plugins page for more info.

But don’t forget about Zapier. If you’re using a popular form tool such as Jotform, Google Forms, etc., you can probably send the form data to Mautic using Zapier. More details on the Mautic app for Zapier.

Dynamic Content and Gated Video

Coming soon.

Ecommerce: WooCommerce and more

More details coming soon. If you have any suggestions or tips for this section, please contact me!

Advanced Tips, Tutorials, and Resources for Mautic and WordPress

A few folks in the Mautic community (hi, Rob Went!) have published some tips and tricks for Mautic users working with WordPress. Fair warning: I have not necessarily tried or tested any of the solutions mentioned in these posts.