Hello everyone
I am new to this forum but have read up on it for like a month. I am an agency owner and recently decided to use marketing automation seriously, and like most of you, struggle with Mautic quirkiness and bugs. I have worked with my Mautic installation guy + web dev guy and we have figured out some solutions to these above mentioned problems with Mautic.
1. Twilio + Mautic
If you want to send Twilio SMS as part of automation to contacts (eg purchase, webinar signup) you have to make Mautic form deliver contact phone number in E.164 format. i.e +1 234 567 8901 with country code and plus sign. Mautic’s verified phone number function for phone number field is useless (It does not work at all!). And most people will not enter this full format or do not know how to, and it’s a nightmare to edit the numbers manually at backend. How can we solve this?
There is ONLY ONE solution to do this: Use Mautic v.2 “Mobile” field (not “Phone” field) + International Phone Input plugin (GitHub - mtcextendee/mautic-international-phone-input-bundle: Integration form field https://intl-tel-input.com/ for Mautic) + Tweak a bit of Mautic’s file.
That plugin only works with Mautic v.2, and my team had to downgrade from v.3 to v.2.15.2. Kuzmany the author of the plugin has not updated the plugin to work with v.3, and although its phone field does show the country selection on the front end, it delivers to the backend of Mautic phone numbers that miss plus sign + and country code, which means Twilio cannot send SMS to those. Still it is useful and needs to tweak to work right.
The secret is edit the file SubmissionModel.php in Mautic. My team tried one of the solutions written here and it works like a charm.
(Country code is not saved to field · Issue #2 · mtcextendee/mautic-international-phone-input-bundle · GitHub)
Essentially you add a bit of code like this
Line 254 at /app/bundles/FormBundle/Model/SubmissionModel.php
//Core Hack
$internationalphoneinput="plugin.internationalphoneinput";
if ($f->getType()==$internationalphoneinput)
{
$value = (isset($post[$alias."_full"])) ? $post[$alias."_full"] : '';
}else{
$value = (isset($post[$alias])) ? $post[$alias] : '';
}
Now it works. Even if users enter space to follow the example shown for their country’s phone format, at backend you will get full E.164 phone number without any space. And send SMS without problem.
2. Mautic and Thrive Themes/Thrive Leads
Apart from Thrives plugin, Hustle Pro and Convert Pro are two WP plugins that claim to integrate with Mautic via API. I tested Hustle and it could not connect with Mautic, even though the log history shows that my version has been corrected issues connecting with Mautic, and many users in their forum has had also the same problem. All in all, Thrive is a better alternative as my agency builds our website with Thrive and its a huge part of conversion focused marketers so we stick with Thrive.
API with Thrive does not work anymore for both Mautic v.3 and v.2. Period! There is no need to try as API by Thrive has been decommissioned, and they find communications issue with Thrive Dev Team.
Pasting Mautic form’s HTML code to Thrive Leads still work beautifully. So I have tested all sort of complex custom fields, and edit the design/color/placement/label of fields directly in Thrive without issues. I designed myself with Thrive this Mautic form even though I am no webdev or coder. This looks like an enterprise quality form, you can do it too easily.
Some Mautic guru has had videos about form styling (like Mautic Training: Quick and Dirty Mautic Form styling - YouTube, How to customize your Mautic forms to look however you want - YouTube). To be honest, a kid knows that a form can look better, and their way of styling Mautic form is quite technical/complex. And their forms look super simple AND ugly. Really ugly I must say as a marketer. You do not need that, Thrive is great for this and its simpler.
3. Professional Horizontal optin form to work with International Phone field
Will Mautic’s international phone field display correctly with Thrive?
Now you get the phone number format plugin work but will it display well with Thrive?
The answer is No. If you paste the HTML code of Mautic form containing International Phone Format field into Thrive Leads’s code box, the flag will be gone and the javascript won’t be executed. My team has tried doing this and we hit the wall with this issue. We had the HTML code of Mautic form pasted into Thrive Leads’s code box and he managed to get the flag appear correctly, but when submitting email and phone number, Mautic redirects to a strange URL saying Phone number require xyzzz. The contact appears in Mautic backend with only email, and phone number is not recorded.
If you paste the Javascript code of Mautic form (the very short code, not the long HTML code) directly into Wordpress page, then it WORKS yes. BUT the form looks super vanilla and ugly. Noone will want to fill in their info with ugly form, that’s cold hard truth!
On top of this, I want to reproduce the horizontal optin form that looks sleak which I created with Thrive. And I want that the international phone field created in Mautic to display correctly.
There’s a guy here (Mautic Form Horizontal Layout Theme) selling his theme for horizontal form for 10 bucks. It has max 3 columns. Not flexible. We need a solution that works for any number of columns. Like I want 6 columns.
This challenge is no joke, and I had to spend a whole day doing research and figuring this out. I am no coder or web designer. I am only familar with editing websites in Thrive but somehow I figured this out and want to share with you.
This method is using Thrive just as a wrapper, and use Mautic form’s Javascript code directly without pasting in the Thrive Leads’ code box, and use a bit of custom CSS to display the horizontal fields (because we cannot use Thrive’s design fucntionality to edit the fields’s placement, color directly).
So because we use Thrive beautiful default design (superficially yes, it still works OUTISIDE the lead generation box) and Mautic form’s Javascript, the international phone field using JS will work correctly. It will look good and function well for Twilio SMS operation. The only drawback is that leads will not be registered in Thrive Leads dashboard, but only in Mautic backend.
Step 1. Go to Generate your own Grid with the Responsive Grid System calculator. and select the number of columns you want. For example I have 5 fields + 1 button, so I chose 6. I got the CSS code and I copy it to Wordpress/Appearance/Customize/Custom CSS. It will work on all pages of your website. Remember to copy two boxes in CSS column like below (not the HTML column, though)
Step 2. Create a Mautic form including the International Phone field. In each field set the class like this to set width of each field to be 1/6 of total width. Use this same class for all of your fields. If you have 5 columns write span 1 of 5, for example.
Remember to choose Render Style as No.
Why so? Because we need to strip away Mautic default CSS styling for fields. It has max with of 600 pixels, but we want at least 1980 pixels because we want to fields to spread out horizontally, so we need to get rid of that default styling them! Note: Editing the style.html.twig of your Mautic’s form theme folder does not help, we tried doing that and the form still shows default CSS styling, and Mautic will show Error as the form is somehow cannot be previewed. So we will get rid of this default CSS styling from the Mautic form and will use our own custom CSS later in Wordpress.
Here is the default CSS FYI, you can find them in some theme’s folder.
Also Hide Label. We do not need them as they will show up as two rows (1 label, 1 field box) later on, which does not look good with the Submit button on its own row. We want only 1 row for everything. I recommend you add Placeholder text (for text field like Name, Email) and Default Value (if you have Select field like I do)
If you add Select field, always try to add a Default option when you create option list. A Country Select field needs to add “Country” as an option (how to add that, see it here (Adding Kosovo to the list of countries in the drop down menu · Issue #8795 · mautic/mautic · GitHub). If you have an “Industry” Select field, set an option as “Industry”. So you alwasy have a default value to select in the Mautic field option and we do not need to show the field’s label at all.
Step 3. Create a Thrive Leads form. You can design color, add text, picture etc inside the form. Set the width as full screen, max with can be 2000 pixels.
And DELETE its lead generation box. We do not need that.
Then add 2 HTML code box inside it.
The first box is your Mautic form’s JS code to display original form. The second box is our custom CSS styling for it. Remember to set Margin as 0 for both boxes so they look neat on the front end.
I have played around with editing this code from Mautic’s default code and found a sweet configuration below to make the form look good. Feel free to copy it and change the color code inside it to match with your website.
Here is the custom CSS that works beautifully to display horizontal form
<style type="text/css" scoped="">
.mauticform_wrapper { max-width: 1980px; margin: 10px auto; color: #6f6f6f; font-weight: 400; font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', 'sans-serif';font-size: 18px;}
.mauticform-innerform {}
.mauticform-post-success {}
.mauticform-name { font-weight: bold; font-size: 1.5em; margin-bottom: 3px; }
.mauticform-description { margin-top: 2px; margin-bottom: 10px; }
.mauticform-error { margin-bottom: 10px; color: red; }
.mauticform-message { margin-bottom: 10px;color: green; }
.mauticform-row { display: block; margin-bottom: 20px; }
.mauticform-label { font-size: 1.1em; display: block; font-weight: normal; margin-bottom: 5px; }
.mauticform-row.mauticform-required .mauticform-label:after { color: #e32; content: " *"; display: inline; }
.mauticform-helpmessage { display: block; font-size: 0.9em; margin-bottom: 3px; }
.mauticform-errormsg { display: block; color: red; margin-top: 2px; }
.mauticform-selectbox, .mauticform-input, .mauticform-textarea { width: 100%; padding: 1em 1em; line-height: 2; border: 1px solid #CCC; background: #fff; box-shadow: 0px 0px 0px #fff inset; border-radius: 4px; box-sizing: border-box; }
.mauticform-checkboxgrp-row {}
.mauticform-checkboxgrp-label { font-weight: normal; }
.mauticform-checkboxgrp-checkbox {}
.mauticform-radiogrp-row {}
.mauticform-radiogrp-label { font-weight: normal; }
.mauticform-radiogrp-radio {}
.mauticform-button-wrapper .mauticform-button.btn-default { color: #5d6c7c;background-color: #ffffff;border-color: #dddddd;}
.mauticform-button-wrapper .mauticform-button { display: inline-block;margin-bottom: 0;width: 90%;font-weight: 600;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 10px 10px;font-size: 18px;line-height: 2;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.mauticform-button-wrapper .mauticform-button.btn-default[disabled] { background-color: #ffffff; border-color: #dddddd;}
Adding only the Mautic form’s JS code without the custom CSS code will result in something messy like this, so remeber to add the custom CSS code
Step 4. That’s it. Very simple. Here is the result. I will tweak the color later.
A beautiful professionally design horizontal form that has international phone field that sends correct E.164 formatted phone number to back end of Mautic, ready for Twilio SMS’s campaign.
It uses Mautic form’s JS code so when you update the form option in Mautic, changes will be shown automatically on the front end without re-pasting a new html code. Also we use Thrive Leads and paste the shortcode on your webpages, all pages with this form/shortcode will get update instantly.
If you want to add another field, then go back generate a new column CSS code from the website above and edit the Mautic field’s class attributes. If you want to change the color of text or background, simply edit the color codes in the custom CSS code above - that custom code is stick with the form in thrive leads, so it goes in sync with each form, and allows for flexible customization.
I am no technical webdev and you can do this too. Mostly involving some copy paste of coding, and some basic knowledge of Thrive
Most of the forum has very technical instructions that are not so user friendly and some threads are out of dated with scattered solutions. I have spent days with my team to figure Mautic out, and we hope this help. We want Mautic to work functionally but we are very serious with design and look on the front end, which is something that is critical nowsaday. Mautic is a beast that is definitely powerful - still it needs some custom work to get the most out of it.
