I’m a long time user of HostPay, and while I appreciate its reliability and easy integration with Heart Internet’s services, I decided to create a bit of code to ask a user for their contact information before choosing a domain, hosting and add-ons.<\/p>\n
I put together a simple bit of JavaScript to take the user’s email address before they enter anything else. This then sends an email to me, which I can forward to the user to see if they need any help if they haven’t signed up after an hour or so.<\/p>\n
This tutorial will show you how I did it. Feel free to improve on my code and make changes as you wish. Warning – I’m assuming a reasonable familiarity with Javascript and PHP code, although you can just copy and paste.<\/p>\n
First, edit the domain-needed file and put in the following code just before the line<\/p>\n
\n<div id='t-package-chooser'><\/code><\/pre>\nIf you don’t use the domain-needed page, you should put the code in the first page your customer comes to in the sign up process.<\/p>\n
\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\" type=\"text\/javascript\"><\/script><!-- you dont need etc. -->
<div id='getemail' style='display:none'>
<h2>Enter Your Email Address<\/h2>
<p>Start by entering your email address in the box below:<\/p>
<form accept-charset='utf-8' id='target' method='post'>
<p>Your email address: <input type='email' size='30' name='email' id='emailval' pattern=\"((([a-z]|d|[!#$%&'*+-\/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-\/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?\"\/><\/p>
<p><input type='submit' value='Continue'\/><\/p>
<\/form>
<\/div>
<\/pre>\nStep 2<\/strong><\/h3>\nNow we have the form, we need some jQuery to process the data. The code below should go toward the bottom of your HTML. It does the following things:<\/p>\n
\n- Checks local storage for the email, and if present hides the email request form.<\/li>\n
- Creates a function which runs when the form is submitted, which firstly checks for a valid email address and then calls newemail.php to send the details to you.<\/li>\n
- When the email has been sent, the normal domain purchase page will be displayed, with the user’s email address already filled in. You’ll need to add an
id='username'<\/code> tag to the email field to make this work.<\/li>\n<\/ul>\n<script type=\"text\/javascript\">
if (window.localStorage && (!localStorage.isNewUntil || new Date(localStorage.isNewUntil) < new Date())) { $('#getemail').show(); $('#t-package-chooser').hide() };
$('#target').submit(function() {
var new_username = $('#emailval').val();
if (new_username=='') {
alert('An email address is required');
return false;
}
if( !new_username.match( new RegExp( $('#emailval').attr(\"pattern\") ) ) ) {
alert('Your email address is not valid - please re-enter it');
return false;
}
$.post(\"newemail.php\", {email: new_username}, function(data) {
$('input[name=\"username\"]').val( new_username );
$('#getemail').hide(); $('#t-package-chooser').show();
localStorage.isNewUntil = new Date(new Date().getTime() + 21 * 86400 * 1000);
localStorage.newEmail = new_username;
});
return false;
});
<\/script><\/code><\/p>\nStep 3<\/strong><\/h3>\nAlmost there now! We need to create newemail.php<\/strong> and add the code below which simply sends you an email. You should edit this email as you can then forward it directly to the customer.<\/p>\n<?php
if ($_POST['email'] && preg_match(\"\/^[[:alnum:].'-]+@[[:alnum:].-]+$\/\", $_POST['email'])) {
\/\/ You could add a function here to check if the email address is already on your system
$headers = 'From: '.$_POST['email'] . \"rn\" .
'Reply-To: '.$_POST['email'] . \"rn\" .
'X-Mailer: PHP\/' . phpversion();
if (mail(\"YOUR@EMAIL.ADDRESS\", 'Web Hosting Signup', \"Dear Sir\/Madam,
I notice that you started signing up for a package but didn't complete the process. Is there any information I can provide you with, or would you like me to give you a call?
Yours sincerely,<\/code><\/p>\n \", $headers)) echo 1; else echo 2;
} else {
\/\/ did not get email
}
?><\/code><\/p>\nThe AJAX call from the previous script will read the result of this and continue with the order process.<\/p>\n
Step 4<\/strong><\/h3>\nFinally, edit the login reminder page and add the code below at the bottom. This will look for a cookie for the email address and use it to fill in the email in the form if present. Again, you’ll need to add an id='username'<\/code> tag to the email field.<\/p>\n<script><\/code><\/p>\nif(window.localStorage && localStorage.newEmail!=null) {<\/code><\/p>\n $('#username').val(localStorage.newEmail); };<\/code><\/p>\n<\/script><\/code><\/p>\nI hope this helps – it definitely works well for me. Any recommendations or feedback, let me know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’m a long time user of HostPay, and while I appreciate its reliability and easy integration with Heart Internet’s services, I decided to create a bit of code to ask a user for their contact information before choosing a domain, hosting and add-ons.<\/p>\n","protected":false},"author":2,"featured_media":8186,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-7495","post","type-post","status-publish","format-standard","has-post-thumbnail","category-reseller-hosting"],"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/7495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=7495"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/7495\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/8186"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=7495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=7495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=7495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}