[Tutorial] Adding a smooth scroll animation to your forms « HTML Form Builder Online , PHP Form Creator

This forum is no longer open and is for reading/searching only.

Please use our new MachForm Community Forum instead.

MachForm Community Forums » MachForm 4

[Tutorial] Adding a smooth scroll animation to your forms

Started 8 years ago by Markstein | 4 posts |

Markstein
Member
You've most likely seen this effect used on many websites. Perhaps a button at the bottom of a page that, when clicked on, makes the page scroll to the top of the page using a nice scrolling animation.

This tutorial will show you how to add a "smooth scroll" animation to your forms Submit and Continue buttons. When your forms button is clicked, the page will "glide" to the top of your form instead of "jumping" straight to it. This tutorial will assume the following:

► You are embedding your forms using the Form Code Type "Javascript Code (Recommended)". Using other types of embed codes available are not tested and will most likely fail due to different code being needed.

► You are using MachForm version 4.0 or newer. MachForm versions 2 and 3 are not tested and have a different coding structure.

► You understand that when you update to a newer version of MachForm in the future you will most likely need to reinsert your code modifications.

This tutorial has 4 sections:

Section 1 • Adding the smooth scroll animation to MachForm versions 4.0 to 4.6
Section 2 • Adding the smooth scroll animation to MachForm versions 4.7 and newer
Section 3 • Adding different easing functions to the animation using the jQuery UI library
Section 4 • Applying different speeds and easing functions for individual forms

Let's get started!

Section 1 • Adding the smooth scroll animation to MachForm versions 4.0 to 4.6

• Step 1 • Open up your forms installation directory then navigate into the directory titled js. In this directory is a file named machform_loader.js. Make a copy of this file before anything so you have a backup in case you run into problems and need to revert back.

• Step 2 • Open machform_loader.js and at line 17 you will see the following code:
```
var mf_iframe = $('<iframe id="mf_iframe" onload="javascript:parent.scrollTo(0,0);" height="' + __machform_height + '" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="'+ __machform_url +'"><a href="'+ __machform_url +'">View Form</a></iframe>');
```
Replace with the following code:
```
var mf_iframe = $('<iframe id="mf_iframe" height="' + __machform_height + '" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="'+ __machform_url +'"><a href="'+ __machform_url +'">View Form</a></iframe>');
```
• Step 3 • Starting at Line 39 you will see the following:
```
}
       }

    });
});
```
Replace with the following code:
```
}
      }

    });

	 //scroll to the top of iframe upon submissions
    $("#mf_iframe").bind('load',function(){
		var form_id = __machform_url.split("=")[1];

        if($(this).data("first_loaded") === undefined){
          $(this).data("first_loaded",true);
        }else{
		//the default animation behaviour for all forms
          $('html, body').animate({scrollTop: $("#mf_iframe").offset().top-100}, 150, 'swing');
        }
    });
});
```
There are 3 things you should modify in the code above to achieve your desired result.

-100 is the amount of space the page will scroll past the top of your form.
150 is the duration in seconds in which the scroll animation occurs. (1000 = 1 second)
swing is the easing function of the animation. Easing controls how an animation progresses over time by manipulating its acceleration. jQuery has two built-in easing methods: linear and swing.

That's it! Now all of your forms buttons will trigger a smooth scroll animation on the page to the top of your forms when clicked.

Section 2 • Adding the smooth scroll animation to MachForm versions 4.7 and newer

This section will be completed once MachForm version 4.7 is released as it will contain some code changes.

Section 3 • Adding different easing functions to the animation using the jQuery UI library

Easing describes the manner in which an animation occurs such as whether the rate of change is steady or varies over the duration of the animation. jQuery includes only two methods of easing: swing and linear. If you want more natural (or even some funky) transitions in your scrolling animations you can include the jQuery UI library which will allow you to pick from 32 easing functions rather than the 2 that are included by default.

First you need to include the jQuery UI library. This is simple and Google already has it hosted for you for free. You just need to include a link to it when you are embedding your form. So, for example, if your Javascript embed code is:
```
<div id="mf_placeholder"
     data-formurl="http://yourdomain.com/machform/embed.php?id=10907"
     data-formheight="2031"
     data-paddingbottom="10">
</div>
<script type="text/javascript" src="http://yourdomain.com/machform/js/jquery.min.js"></script>
<script type="text/javascript" src="http://yourdomain.com/machform/js/jquery.ba-postmessage.min.js"></script>
<script type="text/javascript" src="http://yourdomain.com/machform/js/machform_loader.js"></script>
```
Simply add the following line to the bottom of that code:
```
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
```
Now head on over to http://jqueryui.com/easing/ to see the different easing functions you can apply to the scrolling animation. Once you find one you like, go back to your modified machform_loader.js file and change the easing from 'swing' to the easing of your choice. For example, change 'swing' to 'easeOutQuint'.

Section 4 • Applying different speeds and easing functions for individual forms

So now you want to have one forms animation slower than on another form? Or perhaps you want to use one easing function such as 'easeOutBounce' on one form but use 'easeOutExpo' on another form. You will need to edit your modified machform_loader.js file again.

Starting at line 39 you will see the code you entered before:
```
}
      }

    });

	 //scroll to the top of iframe upon submissions
    $("#mf_iframe").bind('load',function(){
		var form_id = __machform_url.split("=")[1];

        if($(this).data("first_loaded") === undefined){
          $(this).data("first_loaded",true);
        }else{
		//the default animation behaviour for all forms
          $('html, body').animate({scrollTop: $("#mf_iframe").offset().top-100}, 150, 'swing');
        }
    });
});
```
Replace with the following code:
```
}
      }

    });

    //scroll to the top of iframe upon submissions
    $("#mf_iframe").bind('load',function(){
        var form_id = __machform_url.split("=")[1];

        if($(this).data("first_loaded") === undefined){
          $(this).data("first_loaded",true);
        }else{
          //do custom animation or not, based on form id numbers
          if(form_id == '10085'){
            $('html, body').animate({scrollTop: $("#mf_iframe").offset().top-100}, 150, 'swing');
          }else if(form_id == '22790'){
            $('html, body').animate({scrollTop: $("#mf_iframe").offset().top-100}, 150, 'swing');
          }else{
            //the default animation behaviour for all forms
			$('html, body').animate({scrollTop: $("#mf_iframe").offset().top-100}, 150, 'swing');
          }
        }
    });
});
```
Of course you will have to change form_id == '10085' and form_id == '22790' to your forms ID numbers. Now you can modify the options (-100, 150 and swing) for each of your forms. If you need to add more form ID's to the code, then copy the else if statement and paste it under the one already there. For example:
```
}else if(form_id == '22790'){
$('html, body').animate({scrollTop: $("#mf_iframe").offset().top-100}, 350, 'swing');
}else if(form_id == '14350'){
$'html, body').animate({scrollTop: $("#mf_iframe").offset().top-200}, 500, 'linear');
}else if(form_id == '19170'){
$('html, body').animate({scrollTop: $("#mf_iframe").offset().top-145}, 200, 'swing');
```
That's the end of this tutorial. Hopefully I have covered everything and hope you enjoy adding some animation to your forms! Special thanks to Yuniar. Without his help I don't think I'd have any hair left as I was pulling it out trying to get things to work correctly!
Posted 8 years ago #
yuniar

Wow! This is very thorough tutorial!

Thanks so much for your time and effort to write this tutorial Mark!
MachForm Founder

Posted 8 years ago #
Markstein
Member

My pleasure Yuniar! And thank you for your time helping with the questions I had as well.

Posted 8 years ago #
sunriseal
Member

Hi,

Would there be an update to Section 2 now that 4.7 has been released?

Thanks

Al

Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.