Dynamic Newsletter Signup Form with jQuery Animations

Landing pages are some of the toughest website layouts to put together. You need to converge with a series of different techniques for attracting your visitor’s attention and getting them interested enough to perform some action. In this tutorial we will create a simple newsletter signup page which is advertising a new iOS application.

The dynamic form effects will be handled in jQuery with some additional CSS3 properties as well. I haven’t connected any backend script into the form. But there are methods for situating a full registration form, such as MailChimp or even your own custom storage. This layout is a fantastic example of what can be accomplished using just a little bit of HTML5/CSS3 and JavaScript techniques.

Live Demo PreviewDownload Source Code

Starting the HTML

To first get started make a new directory which we can store our project files inside. I am going to make 3 blank documents named index.html, styles.css, and signup.js. Let’s start inside the index file where our core page content will be found.

<!doctype html>  <html lang="en-US">  <head>    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    <title>Animated Newsletter Signup Form</title>    <meta name="author" content="Jake Rocheleau">    <link rel="shortcut icon" href="http://designwoop.com/favicon.ico">    <link rel="icon" href="http://designwoop.com/favicon.ico">    <link rel="stylesheet" type="text/css" href="styles.css">    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lemon">    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    <script type="text/javascript" language="javascript" charset="utf-8" src="signup.js"></script>  <!--[if lt IE 9]>    <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]-->  </head>

The document is written in HTML5 doctype with a few external script libraries. These include the most recent version of jQuery 1.8.3 along with the html5shiv document. We are not using many HTML5 elements within the document, but it is still a nice addition for supporting older web browsers.

Now the internal page body contains just a few headers, along with a small form div. Each heading will contain some text advertising this new iOS app, and we split them up via HTML line breaks.

<div id="w">  	<h1 id="title">SnesApp for iOS</h1>  	<br>  	<h3>We are publishing to the App Store soon!</h3>  	<br>  	<h4>Sign up below to register for a chance at early beta testing.</h4>  	  	<div id="signup">  	  <input type="email" name="email" id="email" placeholder="me@email.com" tabindex="1">  	  <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">  	</div>  </div>

I have not wrapped the input fields inside an HTML5 form element to stop all the default submission behavior. However if you have a specific backend script to use then you may setup a form element and point towards the action attribute. This should behave as a fallback if the Ajax/jQuery methods are disabled or malfunction.

But using these simple input fields as an example will work much better in this tutorial. We target whenever the user is trying to submit the form by clicking the #submitbtn object. Before delving too far into the animation effects, let’s first clear up a few CSS styles.

Webpage Design Styles

One of the first effects you will notice is my use of fullscreen imagery. I was searching through Flickr on Creative Commons photos and found this astounding shot of a Super Nintendo console. This fits perfectly into the background since we can save the image at very large resolutions (up to 2048×1367).

Now to get this image fitted properly into the background we need to use some newer CSS3 effects. Just Google for tutorials on “full CSS image backgrounds” and you can find tons of related examples. Here is my CSS code applied to the page html element.

html {     height: 101%;     background: url('images/bg.jpg') no-repeat center center fixed;     -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";  }

The background-size cover value will force any background image to fit into the entire screen – even when being resized! Some older browsers do not support this method, which is why I have also included a few proprietary Microsoft Internet Explorer solutions. Unfortunately this still doesn’t cover everything but it’s definitely good for all modern browsers.

Signup Form & Submit Button

The two input field elements also have a decent chunk of CSS styles. Many of these properties are only for aesthetic purposes, but we also need to consider the jQuery effects as well.

/* signup form */  #signup { display: block; }    #email {     width: 160px;     outline: none;    color: #fff;    opacity: 0.75;    padding: 10px 14px;    font-size: 1.4em;    font-weight: normal;    border: 1px solid #0c0e0f;    background-color: #282a2c;    background-image: -webkit-gradient(linear, left top, left bottom, from(#282a2c), to(#181a1c));    background-image: -webkit-linear-gradient(top, #282a2c, #181a1c);    background-image: -moz-linear-gradient(top, #282a2c, #181a1c);    background-image: -ms-linear-gradient(top, #282a2c, #181a1c);    background-image: -o-linear-gradient(top, #282a2c, #181a1c);    background-image: linear-gradient(top, #282a2c, #181a1c);    -webkit-border-radius: 6px;    -moz-border-radius: 6px;    border-radius: 6px;  }    #submitbtn {    display: none;    position: relative;    left: -70px;    cursor: pointer;    font-size: 1.2em;    padding: 4px 9px;    border: 1px solid #bcbcbc;    background-color: #f0eded;    text-shadow: 0 1px rgba(255, 255, 255, 0.9);    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfafb), to(#f0eded), color-stop(0.5, #f9f7f7), color-stop(0.5, #F6F3F4));    background-image: -moz-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded);    background-image: -o-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded);    background-image: -webkit-linear-gradient(top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded);    color: #524d4d;    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfafb', endColorstr='#f0eded');    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;  }  #submitbtn:active {    background: #e0e0e0;    color: #403c3c;  }

The whole container div displays as a block element, but we can’t have the input field at a full 100% width. Instead I have limited the initial display at 180px which will extended wider as the user grants focus onto the element. We are also using a few custom CSS3 background gradients and rounded borders.

Another really interesting effect is to hide the input field button right when the page loads. Then we only display this button after the user has focused on the text input field. Regardless of whether the e-mail is supplied or not, we give the user a chance to access the form element. However using jQuery we can limit the click event handler to stop our fading animation if the user is about to submit content.

Dynamic jQuery Effects

We should now move on into the signup.js file which holds the core of our website animation. I have created a variable mousedownHappened which is initially set to false. This will be set to true after the user clicks on our submit button – then we preserve the field and do not fade anything off the page.

$(document).ready(function(){    var mousedownHappened = false;      $("#submitbtn").mousedown(function() {      mousedownHappened = true;    });      $("#email").focus(function(){      $(this).animate({        opacity: 1.0,        width: '+=240px'      }, 350, function(){        // callback method empty      });        // display submit button      $("#submitbtn").fadeIn(350);    });

When the user focuses on our email input field we animate a couple of elements. First the input field itself will grow longer and increase to 100% opacity. Also the submit button will use the jquery .fadeIn() method which is a simplified way of calling animate. Now when the user clicks on the submit button we need to stop any other fading effects indefinitely, and also reset the variable until they click again.

$("#submitbtn").on("click", function(e){      e.stopImmediatePropagation();      $("#signup").fadeOut(280, function(){        // callback method to display new text        // setup other codes here to store the e-mail address        $(this).after('</pre>  <p id="success">Thanks! We will keep in touch.</p>    <pre>');      });    });      $("#email").blur(function(){      if(mousedownHappened) {        // reset mousedown and cancel fading effect        mousedownHappened = false;        } else {        $("#email").animate({          opacity: 0.75,          width: '-=240px'        }, 500, function(){          // callback method empty        });          // hide submit button        $("#submitbtn").fadeOut(400);      }    });  });

When the user clicks our submit button we need to stop all other events from happening. You can read a bit more about stopImmediatePropagation() from the jQuery documentation page. But also we call a fadeout of the signup container div, and inside the callback method there is room for any custom functionality you need. This would be the place to submit the user’s e-mail address into your own custom backend script, or into a 3rd party resource such as Campaign Monitor or MailChimp.

The blur event off the input field does look very confusing at first. But it is actually simple once you understand the syntax. We have an if/else logic check to see if the mousedownHappened variable is set to true. If so, then we know the user is currently clicking the button and we need to hold off on the fading effects. Otherwise the user is simply de-selecting the field, and in this case we animate back to the original smaller box width and using a decreased 75% opacity.

Live Demo PreviewDownload Source Code

Final Thoughts

I do hope you have enjoyed this tutorial and can learn a few interesting tricks. Web developers will be especially interested when it comes to form effects, since you can apply many of these skills into other website layouts.

Please check out my live demo example and also feel free to download a copy of my project source code. You are free to edit this code and use it anywhere on your own website projects as needed. If you have the spare time, spend a few hours tinkering away at the codes to see what you can build. This is an excellent landing page script for customization and to function as your own sole entity.

DesignWoop Newsletter

Sign up to the DW newsletter, occasionally we send design & development related freebies, offers and exclusive deals.

1 Comment

Comments are now closed.