What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Sliding animation on the form

    Asked by bibo1989 on March 22, 2015 at 03:49 AM

    Hi, how can I make a sliding form like this one:

    http://www.jotformpro.com/form/43514812962961

     

    Thanks

    Page URL:
    http://www.jotformpro.com/form/43514812962961

    animation sliding transition slide
  • Profile Image
    JotForm Support

    Answered by Jan on March 22, 2015 at 10:12 AM

    Hello there,

    In order to use this kind of animation or transition, you need to add these custom CSS code on your form.

    .form-section {
    position : relative;
    left : 120%;

    /* Safari, Chrome and Opera > 12.1 */

    -moz-animation : fadein 2s;

    /* Firefox <16 */

    -ms-animation : fadein 2s;
    /* Internet Explorer */

    -o-animation : fadein 2s;
    /* Opera <12.1 */

    animation : fadein 2s;
    -webkit-animation : fadein 0.5s forwards;
    animation : slide 0.5s forwards;
    }

    @keyframes fadein {
    100% { left: 0; }
    }

    @-moz-keyframes fadein {
    100% { left: 0; }
    }

    @-webkit-keyframes fadein {
    100% { left: 0; }
    }

    Here's a  guide on how to inject custom CSS code. Hope this works. Let us know if you need any help.

    Thank you.