Search on Pixelhint.com

Multiple Steps Form Animation Using JQuery & CSS3

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.

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.steps{

max-width:500px;

height:auto;

margin:0auto;

padding:70px0;

background:#ffffff;

border:1pxsolid#e1e8f2;

position:relative;

text-align:center;

}

.steps:after{

content:"";

display:block;

width:16px;

height:8px;

background:url('../img/arrow_icon.png')no-repeat;

position:absolute;

bottom:-8px;

left:50%;

margin-left:-8px;

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

.steps ulli{

width:100%;

list-style:none;

display:none;

float:left;

}

.steps ul li.current_step{

display:block;

}

.steps ul li.text_field{

display:block;

width:60%;

padding:15px20px;

border:1pxsolid#d0d7e1;

font-family:"opensans-regular",Helvetica,Arial,sans-serif;

font-size:13px;

color:#515860;

letter-spacing:1px;

background:#ffffff;

margin:0auto;

outline:none;

-webkit-border-radius:2px;

-moz-border-radius:2px;

-ms-border-radius:2px;

-o-border-radius:2px;

border-radius:2px;

-webkit-transition:all.2slinear;

-moz-transition:all.2slinear;

-ms-transition:all.2slinear;

-o-transition:all.2slinear;

transition:all.2slinear;

}

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

1

2

3

.steps ul li.error.text_field{

border:1pxsolid#E46B6B;

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

.navigation_container ul{

display:inline-block;

margin-top:50px;

}

.navigation_container li{

list-style:none;

position:relative;

display:block;

width:10px;

height:10px;

float:left;

margin:24px10px00;

background:#d8e0eb;

-webkit-border-radius:100px;

-moz-border-radius:100px;

-ms-border-radius:100px;

-o-border-radius:100px;

border-radius:100px;

-webkit-transition:all.2slinear;

-moz-transition:all.2slinear;

-ms-transition:all.2slinear;

-o-transition:all.2slinear;

transition:all.2slinear;

}

.navigation_container li:first-child{

margin-left:0;

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.navigation_container.current_nav{

width:60px;

height:60px;

position:relative;

margin:015px05px;

top:-1px;

background:#51c57e;

cursor:pointer;

-webkit-transition:all.2slinear;

-moz-transition:all.2slinear;

-ms-transition:all.2slinear;

-o-transition:all.2slinear;

transition:all.2slinear;

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

.navigation_container.valid{

background:#51c57e!important;

}

.navigation_container.error{

background:#eb3b3b!important;

-webkit-animation:bounce_btn.5slinear;

-moz-animation:bounce_btn.5slinear;

-ms-animation:bounce_btn.5slinear;

-o-animation:bounce_btn.5slinear;

animation:bounce_btn.5slinear;

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

.animate{

-webkit-animation:bounce_btn.5slinear;

-moz-animation:bounce_btn.5slinear;

-ms-animation:bounce_btn.5slinear;

-o-animation:bounce_btn.5slinear;

animation:bounce_btn.5slinear;

}

.icon{

position:absolute;

top:50%;

left:50%;

margin-left:-12px;

margin-top:-12px;

-webkit-transition:all.2slinear;

-moz-transition:all.2slinear;

-ms-transition:all.2slinear;

-o-transition:all.2slinear;

transition:all.2slinear;

}

.arrow{

opacity:0;

}

.current_nav.arrow{

opacity:1;

display:block!important;

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.step_nb{

display:none;

width:50px;

height:50px;

font-family:"opensans-regular",Helvetica,Arial,sans-serif;

font-size:14px;

letter-spacing:1px;

color:#515860;

background:#F5F5F5;

margin:0auto50pxauto;

line-height:50px;

-webkit-border-radius:100px;

-moz-border-radius:100px;

-ms-border-radius:100px;

-o-border-radius:100px;

border-radius:100px;

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

@-webkit-keyframesbounce_btn{

0%{

transform:scale(1);

-webkit-transform:scale(1);

}

30%{

transform:scale(1.2);

-webkit-transform:scale(1.2);

}

60%{

transform:scale(.95);

-webkit-transform:scale(.95);

}

100%{

transform:scale(1);

-webkit-transform:scale(1);

}

}

@keyframesbounce_btn{

0%{

transform:scale(1);

-webkit-transform:scale(1);

}

30%{

transform:scale(1.2);

-webkit-transform:scale(1.2);

}

60%{

transform:scale(.95);

-webkit-transform:scale(.95);

}

100%{

transform:scale(1);

-webkit-transform:scale(1);

}

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

@media(max-width:750px){

.navigation_container ul{

display:block;

text-align:center;

margin-left:0!important;

}

.navigation_container li{

display:none;

}

.navigation_container li.current_nav{

display:inline-block;

float:none;

margin:0;

}

.wrapper{

max-width:660px;

margin:50px20px;

}

.step_nb{

display:block;

}

}

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

//Ckech mark SVG icon point

varsvg_valid_icon="21.4,4.7...";

//Arrow SVG icon point

varsvg_arrow_icon="17.4,8.7...";

//Form steps number

varlist_elem_count=$("#steps li").length;

//Steps navigation position

varnavigation_pos;

//enable/Disable consecutive click/keypress event

varclickable_btn=true;

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.

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

1

2

3

4

5

6

7

8

9

10

11

$('#navigation li').on('click',function(e){

execute_event($(this).index());

});

$(document).on('keypress',function(e){

varkeyCode=e.keyCode||e.which

if(keyCode===13){

varcurrent_step_idx=$('#navigation li.current_nav').index();

execute_event(current_step_idx);

}

});

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.

1

2

3

4

5

6

7

functionvalidate_form(step_index){

if($('#steps li input').eq(step_index).val()!=''){

returntrue;

}else{

returnfalse;

}

}

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.

1

2

3

4

5

6

7

8

9

10

functionshow_error(index){

$('#navigation li').eq(index).addClass('error animate');

$('#steps li').eq(index).addClass('error');

}

functionclear_error(){

$('#navigation li').removeClass('error');

$('#steps li').removeClass('error');

}

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.

1

2

3

4

5

6

7

functionfocus_inupt(input_idx){

if($('#steps li input').length!=0){

$('#steps li input').eq(input_idx).focus();

}else{

returnfalse;

}

}

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.

1

2

3

4

5

functionnext_step(idx){

$('#steps li').eq(idx-1).removeClass('current_step');

$('#steps li').eq(idx).addClass('current_step');

update_progress(idx+1);

}

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.

1

2

3

functionupdate_progress(idx){

$('.step_nb').text(idx+'/'+list_elem_count);

}

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

1

2

3

functionform_ready(){

alert('Thank You We Will Get In Touch With You Soon!');

}

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.