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.

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.

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.

Step 1

First, edit the domain-needed file and put in the following code just before the line

<div id='t-package-chooser'>

If 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.

<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|[!#$%&amp;'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&amp;'*+-/=?^_`{|}~]|[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>

Step 2

Now 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:

• Checks local storage for the email, and if present hides the email request form.
• 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.
• 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' tag to the email field to make this work.

<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>

Step 3

Almost there now! We need to create newemail.php 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.

<?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("[email protected]", '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,

    ", $headers)) echo 1; else echo 2;
  } else {
    // did not get email
  }
?>

The AJAX call from the previous script will read the result of this and continue with the order process.

Step 4

Finally, 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' tag to the email field.

<script>

if(window.localStorage && localStorage.newEmail!=null) {

  $('#username').val(localStorage.newEmail); };

</script>

I hope this helps – it definitely works well for me. Any recommendations or feedback, let me know in the comments.