Multiple Steps Form Animation Using JQuery & CSS3

- - Tutorials

Forms are an important element in any website, it’s very essential to have a easy form with a good user experience in order to attract and make it easy for your users to fill up a long a form in you website, so in this tutorial i will show you how to create a multiple steps form with cool animations, we will be using JQuery with the help of some javascript libraries like velocity.js and snap.js to animate the SVG icons and add smooth animation to the buttons, this great idea is originally created by Alexis Doreau, you can see his animation on dribbble.

multiple form steps navigation states

HTML Markup :

The html markup is pretty basic, as you can see in the code bellow, it consist of a <div> wrapper with the class and id “steps”, inside it we added a from form with a list, each list item <li> represent a step and it contains only a text input, the <span> with “step_nb” class it’s a progress indicator, it will contain the current step number it will be generated automatically using javascript and it will be visible only on small screen devices.

The CSS Styling :

Now let’s start styling our form elements, we want to make the steps container look like a bubble with a little arrow at the bottom, and it’s exactly what we did in the code below, we used the “:after” pseudo class to add the little arrow at the bottom center.

For the list items which represent the multiple form steps, we floated them to the left, hided them and we set their width to 100%, we only want to show step by step, for that we used “current_step” class to only show the current step, then we added the style for the form inputs, we set the inputs width to 60% with a light gray border, a white background and border radius of 2px.

Bellow we used “.error” class to indicate an error if the form inputs are not filled correctly.

Now let’s move to the steps navigation buttons, we started by floating the list items <li> to the left with a 10px margin between each item, and a top margin of 14px to center it vertically with the big next step button, we also set the border radius to 100px to make them look like a circle with a light gray background color.

The next step pagination button is bigger than the other pagination buttons, for that we used a different width, height and a green for the background color.

We will use the ‘valid’ class to differentiate the validated steps from the non-validated steps, and the “error” class to show the error state in the next step pagination button by changing the background color from green to red, we also applied the bounce animation effect on the button.

We used the “animate” class to trigger the bounce effect using JQuery when the user press “Enter” key or “click” the next step pagination button, the “icon” class is used to center the svg icon within it’s container, and the “arrow” class is used to show and hide the SVG arrow inside the other small steps navigation buttons.

The span with the class ‘step_nb’ it’s a progress indicator for the multiple steps it will be shown only on small screen devices, it will contain the current step number, we hided it in the CSS below but we will add a CSS media query later to show it on screen with a size smaller than 750px.

Last but not least we will use the keyframes to add a nice bounce effect when the user click the next step navigation button or hit “Enter” key, we used the scale function to achieve the bounce effect.

Last but not least, we want only to show the big green steps navigation button and hide all the other small buttons on devices with a screens smaller than 750px, we also want to show the steps progress indicators this way the user can know how many step he need to finish.

The Javascript :

Time to write aniamte and add interaction to our multiple form steps, we will be using a couple of javascript libraries to achieve the result we want, we will be using the Snap SVG library to animate the svg icon in the navigation button and velocity.js to add smooth animations along with the JQuery library.

We need first to define some variable, that we will need in our script.

From this point i will explain function by function so you can understand the script easily.

The init() function is the first function we called in our script, inside it we call a couple of other function the first one is the add_pagination() function to generate the HTML markup for the steps navigation and inject it into the html markup, after that we calculate the position of the steps navigation buttons based on it’s parent container width and the width of the green navigation button, then we call the step_nb_count() and focus_inupt() functions to initialize the step progress indicator for small screen devices and focus on the first form input.

The HTML markup generated by the add_navigation() function will look like the code below.

When the user “Click” the steps navigation button or press “Enter” key, the execute_event() function is called immediately as you can see below.

After the user click the navigation button or press “Enter” the execute_event() function is called to clear errors if there is any error, verify the current input field is valid and to calculate the new steps navigation buttons position and also to call the animate_navigation() function to start the steps navigation animations.

The validate_form() function is for validating the form input, it takes one parameter the step(li) index, this function only make sure that the current step input is not empty, it returns a boolean, true if the input is valid and false if it’s not valid, you can enhance the validation process by using the validate.js library.

The show_error() and clear_error() functions, are used to show and hide errors in the inputs and the steps navigation buttons if the inputs are not filled or not valid.

The update_nav_position() function is responsible for positioning the steps navigation buttons, we also use it to update the steps navigation buttons, and to call the next_step() function to navigate between the multiple form steps.

The focus_inupt() function is only used to trigger the focus event on the current step form input.

We use the next_step() function to navigate through the multiple form steps, and also to update the progress indicator number by calling the step_nb_count() function.

The step_nb_count() function updates the steps number/progress indicator, as we mentioned before the progress indicator will be shown only on small screen devices.

The form_ready() function shows a success message or it can also set to send the form after all the inputs are completed.

Finally, we use the animate_pagination() function to animate the next steps navigation button and the SVG icon, we first add the ‘animate’ class to trigger the bounce effect that we styled previously using CSS keyframes, then we animate the SVG points icon inside the button and transform the icon using the Snap SVG animate() method from an arrow to a check mark, at the end of the function we check if the clicked navigation button is the last one, which means that the user successfully filled the form and it’s ready to be sent or to show a message, in our case we only show a message by calling the form_ready() function.

And we are done, we hope you enjoyed this tutorial, if you have any questions don’t hesitate to ask us in the comment section below.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.

  • pfletcher7

    Awesome! Thanks!

    • You are welcome @pfletcher7:disqus

  • Abdullah Amir

    hmmm where do we add our email so they can receive the mail from us

  • Павел

    Great! But input should be focused when validation fails

    • @disqus_5y2zAvzncI:disqus Thanks for your comment, we will fix it.

  • Would be great with a proper validation

    • Hi @razikantorpweglin:disqus , as we mentioned in the article you can use jqueryvalidation.org to validate the inputs.

  • great work!
    It also be nice if there is a back to last step button. how it can be possible?

    • @spostad7:disqus Yes it’s possible to add it, we just want to keep the tutorial simple.

      • Rej

        Would be nice to have a “ready to use” go back function in JS 🙂

  • Maltē Fìscheř

    Hey,

    great form, but unfortunately I get this error after the first step :

    Uncaught TypeError: $(…).velocity is not a function

    (anonymous function) @ main.js:81
    (anonymous function) @ snap_svg.js:18
    m.once.c @ snap_svg.js:18
    m @ snap_svg.js:18
    (anonymous function) @ snap_svg.js:18

    I just took the snippet out of the index file, which by the way still works, so I have no idea, whats going on. Please get back to me

    • Hi @maltfsche:disqus , i think you are not including the js files correctly, or it might be a JQuery conflict.

  • Shivani Shivi Verma

    hi, can you tell me what would be the function to go to previous step

  • Chihab

    hi

    i have problem when i add input like this not work:

    help please

  • Vaibhav Rai

    How to add fields other than text?

  • singlemamaco

    This is incredibly well written and clear instruction. As a designer it is easily transferable knowledge. Thank you so much for your resources!

    • @singlemamaco:disqus We’re glad to hear that, thanks for you comment 🙂