9 min read........
This is how to integrate Thrive Leads and Mautic without using an API connection and be able to connect historical anonymous browsing data with the known record.
Overview
The concept is simple. (Watch the video for a step by step walk through)
- Create a landing page with Thrive Leads and set it to pass the form variables by URL.
- Create a thank you page with a hidden Mautic form to capture those variables. The form will be et to auto submit.
- The connection with Mautic is via it's own form so all Mautic functionality is available to us.
- Past and Return visits to the website will be tracked by Mautic and attributed to the new record.
The Build
1. Create the Thrive Leads form and landing page
- Create your lead form.
- Connect the lead generation element with an API. Simply connect with your WordPress site. This will add each sign up as a subscriber to your site. This connection is needed to activate redirecting to a custom URL on form submission. With out it the form will just reload when submitted.
- Set the submit action to a custom URL and enter the the URL of your thank you page. If you do not have one yet, remember to come back here and enter the URL once you have created the page.
- Turn on the options to pass the form variables to your thank you page.
- Note the labels for the variables that will be passed by clicking on view variable details. You will need those for creating the Mautic receiver form.
2. Create the Mautic Receiver form
- Create a stand alone form and set the submit action to "remain at form".
- Create the same fields as you have in your Thrive Leads form.
- For each field, under attributes, enter the field label that Thrive Leads has allocated to each variable, into the Field HTML Name. It is case sensitive so be careful to exactly match the label.
- Below the submit button, create an HTML area field. Under properties paste in the code below. This will make the form automatically submit itself once it has captured the data passed through from the Thrive Lead form. This is important as the form will be hidden on the Thank You page.
- Configure any actions you would like on form submission.
- Save and close the form.
- Copy the form javascript found under "Automatic"
<script>
function autosubmit(){
var form = document.querySelector('form[id^=mauticform_]');
if(form){
form.submit();
}
}
window.addEventListener('load',autosubmit);
</script>
Credit for this code to Steve Robinson from Brilliant Metrics
3. Create the Thank you page
- Create the thank you page on your WP site.
- Add in a custom HMTL element and then paste in the Mautic form javascript.
- Add in a second custom HMTL element and load the code below. This is the code that will read the URL and populate the hidden Mautic form with the variables being passed over from the Thrive Lead Form.
- Design your Thank You page how you want.
<script>
var __fields = decodeURIComponent(location.search.toString().slice(1)).split("&")
__fields.forEach( param=> {
const [fieldName, fieldValue ] = param.split("=");
const el = document.querySelector(`form *[name="mauticform[${fieldName}]"]`);
if( !!el ) el.value = fieldValue;
})
</script>
Credit for this code to Leo Schuler from this forum post
4. Create the Thank you page
- Hide the Mautic form with some simple CSS
- Be sure to only apply the CSS to the exact thank you page or you will hide any other Mautic form you have on your site.
- In Thrive Architect custom CSS is under the settings cog page right.
.mauticform_wrapper {
display:none ;
}
Test
- Remember to test in private browser session or log out of Mautic.
- You may want to turn off the auto submit code and not hide the Mautic form during testing so you can trouble shoot.
- Once you have submitted a form, check in Mautic to see if the new record is created and any actions you set have fired.
- Look to see that the anonymous browsing history is attributed to the newly created record.
- And that subsequent browsing is also linked to the new contact.
Troubleshooting
- Check that the URL contains the variables after form submission.
- If it does not, check that you have set up the Thrive Leads form correctly and activated the option to pass the variables to the thank page.
- Make sure the Mautic form Field html Names are correct. These are case sensitive. If you have made an error you will need to recreate the form as the fields are not editable once created.
- Check your Mautic CORS setting is correct under your Mautic Configuration.
- Make sure the Mautic tracking code is installed correctly on your site.
Robin, thanks for this, you just save me from some headaches. I have bookmarked your blog for more tips from you. Once again thanks for this solution for Mautic and Thrive Leads
Hi Robin, I am probably doing something wrong, but I followed your tutorial and this happens: the ip is send to mautic but not the name and address (while they are shown in the url) and the thank you page with the hidden mautic form is refreshing constantly with a lot of server action… Have you ever accounted this error?
Hi Maarten, I have not seen that error. The solution is still working well for me. The challenge with trouble shooting Mautic issues is Mautic can be installed into many different environments with lots of different server set ups. I am not tech enough to get into that level of trouble shooting. Seems though that the mautic form is not collecting the name and email address before it submits itself. Test by showing the mautic form on the thank you page, and removing the auto submit function. Then you can see if the form is collecting the name and email from the url. If it is, manually submit the form and see if that right data is passed to mautic. If that works, keep the form visible but add back the auto submit. Then see if the form is getting the data before it submits itself. This way you should be able to narrow down where the issue exists. The fact that is keeps refreshing constantly suggests something maybe screwy withe the auto submit function.