Building an E-mail Request Invite Form with jQuery
Using jQuery we can build some incredible web-based applications. The animations and manipulation of DOM elements using jQuery are much more intuitive than coding regular JavaScript. Because the syntax is so minimalist it’s possible to scale a very complex idea within a few hours time.
In this tutorial I’ll demonstrate how we can build an HTML5 invite form and check the results through jQuery. I haven’t gone into any backend PHP as this isn’t always the best solution for an invitation system. You may want to tie into another e-mail campaign such as MailChimp or Campaign Monitor. But with this technique running the frontend you can quickly implement a backend language to manage the e-mail submissions.
Coding the Index
Start by creating a new index.html file and include a basic HTML5 template. I’ve used the skeleton found in Coda’s HTML clips, and I also duplicated the code below. Feel free to copy/paste into your own document and edit as needed:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>E-mail Invite Form Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> </body> </html>
One other thing to point out is that we’ll need the jQuery library included for our script later on. It would be easier to add this now – and we can even use the online Google CDN so we don’t need to host anything. Inside the header right underneath the stylesheet link add this line of code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And now we’re all set to build inside the body. All I’ve done is setup a wrapper div with some headings talking about the form. To spice up the layout I’ve also included a small envelope icon floating off to the right side.
E-mail Invitations
The purpose of our form is to grab the user’s e-mail address and somehow keep a list of interested users. We just need an HTML5 e-mail input along with a submit button to handle the verification.
<div id="completeform"> <span id="error"></span> <form id="inviteform" name="inviteform" method="post" action="#"> <input type="email" name="email" id="email" placeholder="E-mail address" autocomplete="off" autocorrect="off" autocapitalize="off"> <div id="btnwrap"><button name="sendbtn" id="sendbtn" type="submit" value="Send">Send</button></div> </form> </div>
I wrapped the form inside a div #completeform so that we can use animations later. Once the user successfully submits we want to drop the form opacity and display a success message. Also notice I have the form’s action set to a hash(#) because the submission process is taken over by jQuery. You could put a PHP or Ruby script in here – but for this scenario I’ve left it blank.
I’m also using a couple new attributes on the input field. First our type is set as “email” so that mobile browsers can display the appropriate keyboard. Chrome and some webkit browsers will use this to detect if the user hasn’t typed an appropriate address. The attributes autocorrect and autocapitalize are targeted specifically to mobile browsers. It can be a real pain typing on the iPhone/iPod Touch keyboard, and we want to make this signup easy as possible.
The span with an ID of #error is also important to the script. This is set to display: none; inside our CSS so that nothing appears at first. But if the user submits an invalid e-mail address we quickly display the error message.
Coding Gritty jQuery
There isn’t a whole lot to say about our page styles. The file contains very basic properties using some CSS3 linear gradients and box shadows for the form submit button. If you’re interested check out the source file from my live demo. Otherwise we can jump right into the jQuery.
Let’s start with a simple function checking for valid e-mail addresses. I have used a long string of Regular Expressions to verify if the text string matches a standard e-mail syntax. And because I’ve written this code in a function we can reuse it over and over again.
function isEmail(email) {
// pass regex for validating an e-mail address
var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
The other function block is called when we successfully match an e-mail address. Inside here you could add an ajax() call to pass the address into your database, a local .txt file, or even message yourself in an e-mail.
function completeInviteForm() {
setTimeout(function() {
$("#completeform").fadeOut(400, function(){
$(this).before('<span class="msg">All set! We will be in touch.</span>');
});
}, 1100);
}
Currently the function just fades #completeform out to 0% opacity over 400 milliseconds. Then inside the callback function(after the animation is complete) I’ve appended some HTML saying the invite request was successful. I’m using the setTimeout() function only for this example so you can see the animation unfold over time.
Handling the Form Submission
Right before our opening clause I have setup two variables pointing to page elements. This code gives us easier access to the submit button wrapper and the input text field. We need these elements to hide the submission button and pull the current e-mail value, respectively.
var erdiv = $("#error");
var btnwrap = $("#btnwrap");
$(document).ready(function(){
$("#sendbtn").live("click", function(e){
// once the send button is clicked we perform some functions
// and setup a few variables
e.preventDefault();
var emailval = $("#email").val();
The statement e.preventDefault(); is fairly common for live click events. This stops the default action from taking place, and we can then execute code without the page refreshing. Focusing on the emailval variable we can begin imposing logic on the e-mail address.
if(!isEmail(emailval)) {
erdiv.html("enter a full e-mail address!");
erdiv.css("display", "block");
}
if(isEmail(emailval)) { // email address looks good!
erdiv.css("color", "#719dc8");
erdiv.html("just a sec...");
btnwrap.html('<img src="img/loader.gif" alt="loading">');
completeInviteForm();
}
The first if() statement checks user input against our validation function as false. This means if the user’s input does not match the regex for a natural e-mail, we respond by setting the error HTML and display: block; style.
Now the second logic statement is executed only if the user’s e-mail passes our validation function. Then we know the string at least looks like an e-mail, so we can begin processing this data. If the error block is already displaying we update the inner text – but if it was never displayed the user does not ever see this message.
Finally we need to hide the submit button to prevent users from submitting twice. Our code replaces the inner HTML with a loading gif image instead. Then ultimately we reference completeInviteForm() which carries out the final bits of JavaScript.
Conclusion
I hope this tutorial can give you some insight towards coding municipal jQuery functions. The e-mail validation is an important aspect to managing web forms – but with so many startups around invitation systems are hard to come by. With this Ajax-style method you can even offer functionality without refreshing the page!
Feel free to download my demo source code and play around on your own. This is the best way to become familiar with HTML/CSS/JS and even port code into your own projects. If you have similar questions or feedback be sure to let us know in the comments discussion area.
