Recently, I saw quite useful jQuery plugin which was introduced on the Japanese Geek website, aka Gigazine.
It says, it could reduced 50% of returned email because of typo or wrong email address which visitor registered in user registration form.
Kicksend/mailcheck · GitHub
https://github.com/Kicksend/mailcheck
How we decreased sign up confirmation email bounces by 50% – The Kicksend Blog
http://blog.kicksend.com/how-we-decreased-sign-up-confirmation-email-bounces-by-50/
Because I love to try to integrate any kind of useful jQuery plugin into DSMX, so let me share how you can do it at here.
mailcheck.js
The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.
Example on DSMX
Just try to type ‘test@hotmai.con’ or ‘test@gmai.com’. It will suggest you most close actual domain name.
OK, now here is how to integrate it into DSMX.
1. Upload .js file
2. Load .js in the page
Please replace server domain, campaign name, account ID according to your setting.
3. Add class name or ID to the input element
4.Place div element where it should display suggestion
5. Place Javascript.
Here is my script.
You can add any domain or topLevelDomains in the array. Or simply comment it out, then it will take default value from .js file.
var domains = ['hotmail.com', 'gmail.com', 'aol.com','directsmile.com']; var topLevelDomains = ["com", "net", "org"]; $('.email').on('blur', function() { $(this).mailcheck({ domains: domains, // optional topLevelDomains: topLevelDomains, // optional // distanceFunction: superStringDistance, // optional suggested: function(element, suggestion) { // callback code var suggestion = '<table> <tbody> <tr> <td width="80" valign="top" align="left" style=""> <img width="80" height="147" src="template_image/man with query.png" /> </td> <td valign="top" align="left" style=""> <p>Did you mean</p><p class="sug">'+suggestion.full+' ?</p></tr> </tbody> </table>'; $('#hint').html(suggestion).fadeIn(150) }, empty: function(element) { // callback code var suggestion = '<table> <tbody> <tr> <td width="80" valign="top" align="left" style=""> <img width="80" src="template_image/serving document.PNG" /> </td> <td valign="top" align="left" style=""> <p>Looks like your email address is valid!</p></p></tr></tbody></table>'; $('#hint').html(suggestion).fadeIn(150) } }); });
Have a fun!! 🙂
Hi nog.
great blog! 🙂
im wondering how I could make this script write to database and also go to a “thank you.html” ?
i did try to remove the “empty: function” but that didn’t do it.
Any suggestions to point me in the right direction?
Hi Håkan,
Thank you for your comment!
Since I’d like to show how this Mailchecker work, I didn’t make it to be able to register. To be able to regiser, please change your script like in below.
To call it by name attribute of input element is for Ver5 compatible.
Morning Nog.
I´m afraid this didn´t do it.
I also tried to remove the email-validation as I thought this might complicate it.
But it still doesn´t write to DB or passes me through to my “thankyou page”.
I confirmed that my script work on Ver5 DSMX system even if you enabled build-in validation for the input field as well.
Please try to make new campaign, and just follow the instruction. I used the latest version of release of this .js file.
Ok.
It worked when I created a new campaign. Why is this? Weird.
But, it now creates a new record even if it´s not a complete emailaddress. Like for example: hello@gmail.c
Regards Håkan
Hi,
You need to understand what this “MailChecker” does. It will check the entered value, and suggest most closest possible top domain or domain name.
And the combination with build-in email validation, you can avoid customer enter non-email looks address.
However, xxx@gmail.c would be recognized as possible correct domain name. If you’d like to reject such value, then you need to modify javascript and add additional validation by yourself.
Again, it does not validate the input value. It only suggest you possible top domain or domain name from your list. 🙂
Nobuaki, this I understand and know that it only suggests the input value.
But, it is useless if you can´t use this “input field” with a campaign in DSMX. I think it absolutely should be able to:
#1 Suggest the correct E-mail address -Check
#2 When I/User has corrected the E-mail address they should be able to proceed to next page -No Check 😦
#3 If this “input field” has the function of “write to database” then it should. -No check 😦
So, for my campaign the only thing that is working is the actual “mailCheck”-function, which is neat. But since the rest isn´t working or can´t be implemented to an actual campaign then I don´t think it is actually a script/function that is applied to DSMX.
Hi Håkan,
Good question. So let me answer for all.
#1 –> Good to hear! That’s all what I want to tell at this tip. 🙂
#2 –> To control page transition by input value, and if you’d like to have such restricted validation for email address, then I recommend you to use “regEx (Regular Expression)”. With combination of regEx for input field, you can easily get big advantage from all tips on the internet. For example here
Furthermore, you can set your regEx by selecting “Regex” from dropdown menu for validation type in DSMX. As you know, Crossmedia made Easy 🙂
#3 –> my script call this function by checking “blur” event on the input field. How about to change a selector calling method? So you can specify which input should have this “mailcheck” 🙂
It would be great if this tip become a part of your campaign!!