Greetings,
I have a landing page located at http://worldfzoeep.com/ and have a Mautic form embedded to capture inquiries. I would like for people to leave their corporate emails instead of gmail, yahoo, outlook, etc.
Is there any way to validate the submitted email and give an error/alert when user submits an email that is not corporate?
Many Thanks
Greetings,
I have a landing page located at http://worldfzoeep.com/ and have a Mautic form embedded to capture inquiries. I would like for people to leave their corporate emails instead of gmail, yahoo, outlook, etc.
Is there any way to validate the submitted email and give an error/alert when user submits an email that is not corporate?
Many Thanks
Well, I would see two ways of doing it:
- If you are running Mautic in your own server: dive deep into the source code and write some lines to validate the addresses.
- Build a campaign: Your form should have a condition (form field value), limit it to your form, select Email as your field and probably “not like” as the operator. What action should follow this decision is up to you.
Thanks mautic_user for your input. Regarding your first suggestion, i did not want to have this type of validation on all forms, just this particular one in this specific landing page, so editing the existing source code for validation was not an option.
As for your second recommendation, my understanding is that this route would enable campaign actions depending on the email input value, but what I was looking for was to actually block form submission if a user entered an email from a free provider (gmail, yahoo, etc.) So unless I’m mastaken, this wasn’t really an option.
In case anyone cares, I have found 2 solutions that work to varying degrees of effectiveness.
The first is pure javascript. This option works but the output for a user entering an invalid email is your standard (ugly) browser alert.
(document).ready(function(e){
$('#FORMID').click(function(){
var email = $('#FORM_EMAIL_INPUTID').val();
var reg = /^([w-.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!yahoo.co.in)(?!aol.com)(?!abc.com)(?!xyz.com)(?!pqr.com)(?!rediffmail.com)(?!live.com)(?!outlook.com)(?!me.com)(?!msn.com)(?!ymail.com)([w-]+.)+[w-]{2,4})?$/;
if (reg.test(email)){
return 0;
}
else{
alert('Please enter a valid company email address');
return false;
}
});
});
</script>What I am doing here is selecting my Mautic Form using it’s ID (#FORMID), establishing an email variable using the Mautic forms’ email ID (#FORM_EMAIL_INPUTID), and then testing the user’s input by running it through a regex validation pattern. If the email is valid, test is passed and form submits, otherwise user gets a standard browser alert.
The second option is to use HTML5 pattern attribute. To do this form must be manually copied in to your landing page. This gives a standard HTML validation error when triggered which looks much better than a standard browser alert. The biggest problem with this is that it does not work with Safari and older browsers. So I’m working on a fallback similar to the option above.
<div id="mauticform_work_email" data-validate="work_email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-required">
<input id="mauticform_input_wfzomembershiplpenquiry_work_email" name="mauticform[work_email]" value="" placeholder="Work Email" class="mauticform-input" type="email" pattern="^.+@((?![hH][oO][tT][mM][aA][iI][lL])(?![gG][mM][aA][iI][lL])(?![yY][aA][hH][oO][oO])(?![oO][uU][tT][lL][oO][oO][kK]).)+..+$" oninvalid="this.setCustomValidity('Please enter a valid company email')" onchange="this.setCustomValidity('')">
<span class="mauticform-errormsg" style="display: none;">Please enter your work email</span>
</div>Above is the email section, the key is to run a regex query in the HTML5 pattern attribute, like so:
pattern="^.+@((?![hH][oO][tT][mM][aA][iI][lL])(?![gG][mM][aA][iI][lL])(?![yY][aA][hH][oO][oO])(?![oO][uU][tT][lL][oO][oO][kK]).)+..+$" As a bonus, you can customize the HTML5 validation error message like so:
oninvalid="this.setCustomValidity('Please enter a valid company email')" onchange="this.setCustomValidity('')"Hello!
Please, I am looking for a solution like this to avoid non corporate emails into my mautic.
Is there any other option them this?
Thanks!
Please note that upon further review, there is a mistake in the first method mention in my solution post.
The original post mentioned the following as a solution, which is incorrect:
(document).ready(function(e){
$('#FORMID').click(function(){
var email = $('#FORM_EMAIL_INPUTID').val();
var reg = /^([w-.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!yahoo.co.in)(?!aol.com)(?!abc.com)(?!xyz.com)(?!pqr.com)(?!rediffmail.com)(?!live.com)(?!outlook.com)(?!me.com)(?!msn.com)(?!ymail.com)([w-]+.)+[w-]{2,4})?$/;
if (reg.test(email)){
return 0;
}
else{
alert('Please enter a valid company email address');
return false;
}
});
});
</script>Correct solution is as follows:
The method depend on manually copying your form from Mautic in to your landing page. So, assuming you have a landing page, and assuming you have manually copied the Mautic form in that landing page (Including CSS styles, Mautic script, and form HTML). Then you would simply need to copy the following javascript code in to the landing page before the closing tag.
As each form is unique, there are a few variables that you would need to change in order for this to work for you:
-
The first is “YourFormSubmitButtonID” if you inspect the submit button element, you will see it has an ID attribute. Copy and paste this after the hashtag in the code above.
-
The second is “YourFormEmailInputID” if you inspect the form’s email element, you will see it has an ID attribute. Copy and paste this after the hashtag in the code above.
-
You can also change the alert message to your liking.’
-
You can also filter additional email providers, simply by adding the domains after the last one highlighted in bold above like so (?!freeemaildomain.com)
Once you have modified the code, simply copy/paste it and it should work
[quote=18384:@Alcides]Hello!
Please, I am looking for a solution like this to avoid non corporate emails into my mautic.
Is there any other option them this?
Thanks![/quote]
These are the two methods that have worked best for my purposes, as i needed to validate some (not all the forms). I know that custom validation can be hard-coded to the Mautic installation if you’re running it yourself. More details can be found here: https://developer.mautic.org/#extending-forms
Thanks for your help.
I am using Mautic Landing Pages, so I understood I can not appply what your have described above if I am using Mautic Landing Pages.
I am running Mautic in my server.
I would like to implement this rule into the server. I have seeing the link you have sent but I did not understand how can I do that.
Could you please give me more details?
Thanks in advanced.
Alcides
Hello, i’m not sure the code that should be used as you mention “need to copy the following javascript code in to the landing page before the closing tag.” but without the code 