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

    Is there a way to inject a CSS code for next page transition effects such as Smooth, fade in etc. Thank you

    Asked by Cnelson0409 on May 03, 2017 at 03:28 PM
  • Profile Image
    JotForm Support

    Answered by John_Benson on May 03, 2017 at 05:11 PM

    Unfortunately, this is not possible at this moment. However, you can download the source code and upload it to a server then inject custom animation CSS code to your form. Here's a guide: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    Thank you. 

     

  • Profile Image

    Answered by Cnelson0409 on May 03, 2017 at 05:25 PM

    Maybe I did a poor job at conveying my concern, but it appears the following template has the transition I'm referring to: Modern Hotel Booking Form - Mobile Responsive. Please let me know if this helps. Thanks

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 03, 2017 at 07:23 PM

    The code used for the transition is the following:

    ul.form-section {

        -webkit-animation : animShowNext 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;

        -moz-animation : animShowNext 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;

        animation : animShowNext 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;

    }

    @-webkit-keyframes animShowNext {

    from {

    opacity: 0; 

     -webkit-transform: translate3d(-100px,0,0);

    transform: translate3d(-100px,0,0);

    }

    }

     

    @-moz-keyframes animShowNext {

    from { 

      opacity: 0; 

      -moz-transform: translate3d(-100px,0,0);

    transform: translate3d(-100px,0,0);

    }

    }

     

    @keyframes animShowNext {

    from { opacity: 0;

    -webkit-transform: translate3d(-100px,0,0);

    -moz-transform: translate3d(-100px,0,0);

    transform: translate3d(-100px,0,0);

    }

    }

    You could just inject the given code and it should have the same effect on your form. 

    Here's an example with all the other code removed and just this one applied: https://form.jotformpro.com/71227664209962 

    Hope this helps.