responsive newsletter form
August 14, 2014 | 27 Feedbacks

Responsive Newsletter Form

A minimal and responsive newsletter form with the addition of some subtle CSS3 animations to enrich the user experience.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

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:

newsletter animation

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.

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.

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.

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.


June 02, 2015
  • Set a line-height for the submit button
Aug 14, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Md Abdul Momin

    Nice! Inspirational…..

  • Igor Baia

    Loved the flat look and it’s soooo smooth, great work!

  • Bryan Fillmer

    Regarding the semantics of using the , that bugged me a bit so I put together this workaround:

    Some pros and cons here, like any CSS workaround, but this allows the text within the label to accurately reflect what the input should contain, while displaying whatever text we want visually.

  • Chuck

    Great, but I think it can be a little bit confusing to not have any submit button before we type a correct email. I understand that the purpose is to validate the email, but it would maybe be better with a disabled style button or any other indication.

    Otherwise it’s nice and fresh, I like it!

    • Claudia Romano

      Hi Chuck, I can see your point and for sure we should run some tests to understand if this approach confuses users or not. We have used a label (and the placeholder) to make it clear, but of course it should be tested.

    • Ahsan Idrisi

      I agree with Chuck that i was expecting as normal user to have a submit button, for some time i just keep on clicking the upper three success, error buttons….From UX point of view, there must be a submit button here so users know that what will be the result of their action…

  • Daniel

    Hi ! Great tutorial / tutorials ! But I have one question. I have saw that in some tutorials for media queries you use 768px, 992px, 1200px and in other 768px, 970px and 1170px. Why this difference ?

    • Claudia Romano

      Hi Daniel,
      you are free to set your media queries so you can change them if required by your resource/design.

  • chsweb

    Back in the day, when IE6 & 7 demanded attention, we were able to make this a pretty easy task by wrapping the LABEL around the INPUT. It’s worth a look and perhaps a follow up most.

  • krishnachaitanya

    really great way to invite the user to signup for newsletter. how can i change this to working ajax email signup.
    sorry if i asked any basic question, I’m new to code.

    • Claudia Romano

      Glad you like it! If you’re not experienced, I would suggest you to use a newsletter service, like MailChimp.

  • Ahmad Awais

    Can you hint me for Mailchimp integration in it? Cool!

  • PostAdviser

    Great stuff!

  • Shima Mahat

    Great stuff!

  • Steve Ninh Nguyen


  • Furkanicus

    Love it! Thanks

  • Benergy sam

    Very useful thanks. for other jquery plugins

  • paralellos

    I’m trying to re-work this so instead of checking for email verification it check the inputed postcode matches the excepted range. If it does the user is informed that the business does service their area. I also don’t want the selection arrows that come from using range: [3023, 3392]. any thoughts, I’m still an absolute rookie at js. Thanks :)

    Oh and no type=”number” min=”3023″ max=”3392″ it doesn’t have good enough browser support


    where to put our mail?

  • i1m3a7n92

    Sorrily , it has conflict with Mailchimp !
    When you integrate mailchimp , the button does not redirect you to mailchimp …
    any hints ?!!

  • kate

    how to install this awesome template to wordpress (+flatsome theme) website?
    thank you in advance for your answer.

  • sancoLgates

    awesome tut’s, love it

  • archie

    Does anyone have a an example of how they integrated this with mail chimp? Would be much appreciated.

    • Hector E. Meza

      Did anybody ever come back to you with a solution?

  • srhzaidi

    Where do I put my email address in this form? How will the form know where to send in my subscription? Is PHP needed here?

  • uuche

    cool stuff