It's always challenging to push a user to subscribe to your website newsletter. The real key is where you position the call-to-action form IMO. Then there's the UI and UX of the form itself. When the user decides to subscribe, we need to make sure the process is smooth and simple.

Our approach to this resource was: how can we create the most minimal form possible? Finally we went with a bare bone starting structure (big email input field and a small title), then we started experimenting with some subtle CSS3 animations to enrich the form while the user is interacting with it.

Here is a quick animation we put together to show the whole process:

Creating the structure

The HTML structure is pretty basic: labels and input fields are wrapped inside the <form>, notification messages are 3 separate divs. You may notice we used a <label> element for the title. It's not semantically correct, the <label> should describe what the <input> is about. Since the title is inside the input field tough, by using a <label> element we make sure that if the user taps/clicks on the title, the email input becomes focused too.

The empty .cd-loading element is used to create the animated loading bar.

<div class="cd-form-wrapper cd-container">
   <form class="cd-form">
      <label class="cd-label" for="cd-email">Newsletter</label>
      <input type="email" id="cd-email" class="cd-email" name="cd-email" placeholder="Enter your email address">
      <input type="submit" class="cd-submit" value="Submit">
      <div class="cd-loading"></div>
   </form>

   <div data-type="message" class="cd-response cd-response-error">Ops! Error message here</div>
   <div data-type="message" class="cd-response-success"><p>Great! Success message here</p></div>
   <div data-type="message" class="cd-response cd-response-notification">Hey! Notification message here</div>
</div>

Adding style

Below are some highlights about how we created the animations in CSS. It's mostly based on CSS3 Transitions, i.e. the .cd-email element (the email input field) takes the full form size at the beginning. While the user is typing the email address, we use jQuery to add the class .is-active to the form, and we change the bottom value for the .cd-email element from 0 to 50%. The transition applied to the bottom property makes the movement smooth.

We used a CSS3 Animation for the .cd-submit element only (submit button), in order to achieve the bounce effect. If that's too much, feel free to use a transition instead.

.cd-form {
  position: relative;
}

.cd-form .cd-loading {
  /* loading bar */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  visibility: hidden;
  transition: transform 3s;
}

.cd-form.is-submitted .cd-loading {
  visibility: visible;
  transform: scaleX(1);
}

.cd-email {
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  transition: bottom 0.3s, background-color 0.3s;
  z-index: 1;
}

.is-active .cd-email {
  bottom: 50%;
}

.cd-submit {
  top: 50%;
  /* hidden by default */
  display: none;
  transition: background-color 0.2s;
  z-index: 2;
}

.is-active .cd-submit {
  display: block;
  animation: cd-bounce-in ease-out 0.4s;
}

@keyframes cd-bounce-in {
  0% {
    top: 100%;
  }

  60% {
    top: 45%;
  }

  100% {
    top: 50%;
  }
}

Events Handling

We use the keyup() event to check what value user is entering in the email <input> field: if he has typed a '@' followed by a dot, we show the submit button giving the .is-active class to the <form> element.

$('.cd-form .cd-email').keyup(function(event){	
   var emailInput = $(this),
       insertedEmail = emailInput.val(),
       atPosition = insertedEmail.indexOf("@");
   dotPosition = insertedEmail.lastIndexOf(".");
   //check if user has inserted a "@" and a dot
   if (atPosition< 1 || dotPosition<atPosition+2 ) {
      //if he hasn't..
      //hide the submit button
      $('.cd-form').removeClass('is-active').find('.cd-loading').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
   } else {
      //if he has..
      //show the submit button
      $('.cd-form').addClass('is-active');
   }
});

When user submits the form, we add the .is-submitted class to show the loading bar and wait for the end of the transition to show the success/error message.

When integrating your email service provider code, though, you should replace this function with an ajax call, using, for example, the beforeSend function to show the loading bar and the success and error function to show the success/error/notification message.