How can I put a transition effect between pages in form?

  • Profile Image
    corporatevents
    Asked on July 06, 2018 at 11:43 AM

    My second question : how can I put a transition effect between two pages in form

    (a slide on the left for example)

  • Profile Image
    Benny_W
    Answered on July 06, 2018 at 11:48 AM

    You can put a transition effect between two pages in a form by adding some CSS code. Here is how to do it.

    First, go to the CSS editor:

    Then, paste this code:
    .form-section {
        margin-top: 25px;
        font-size: 21px;
        text-align: center;
        -webkit-animation: fadein 2s; /* 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;
    }
    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* Firefox < 16 */
    @-moz-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* Internet Explorer */
    @-ms-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }


    Useful articles:

    - https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
    - https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load

    I have created a demo form: https://www.jotform.com/81864422676970
    Feel free to clone it: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    I hope that helps.

  • Profile Image
    corporatevents
    Answered on July 11, 2018 at 09:40 AM

    Hi Benny,

    Thank you soo much I'm going to test that immediately :-)

  • Profile Image
    corporatevents
    Answered on July 11, 2018 at 09:45 AM

    Hi again Benny,

    Do you think you can adapt the code to have a sort of slide in effet (from the left side) ? I'm not an expert in css coding ?

    Thanks in advance for your precious help

    Gerard


  • Profile Image
    Benny_W
    Answered on July 11, 2018 at 11:38 AM

    Hi Gerard,

    Please try these codes:
    .form-section {
      -webkit-animation: slideIn 2s forwards;
      -moz-animation: slideIn 2s forwards;
      animation: slideIn 2s forwards;
    }

    @-webkit-keyframes slideIn {
      0% {
        transform: translateX(-900px);
      }
      100% {
        transform: translateX(0);
      }
    }

    @-moz-keyframes slideIn {
      0% {
        transform: translateX(-900px);
      }
      100% {
        transform: translateX(0);
      }
    }

    @keyframes slideIn {
      0% {
        transform: translateX(-900px);
      }
      100% {
        transform: translateX(0);
      }
    }


    I have also created a new demo form for you: https://www.jotform.com/81914630595967
    Feel free to try and clone it.

    I hope that helps.

  • Profile Image
    marsvdb
    Answered on July 12, 2018 at 03:24 AM

    Hi Benny,

    Really cool, and a last request, can you apply the effect on the white background, we will then have the impression that the complete page come from the left side and not only the fields?

    Thank you so much for your help

    Gerard

  • Profile Image
    BJoanna
    Answered on July 12, 2018 at 05:09 AM

    I tried but unfortunately, I was not able to move the background along with the form fields. I will check with my colleague if he has a solution. 

    I would also suggest you to check our Card Forms

  • Profile Image
    corporatevents
    Answered on July 12, 2018 at 06:01 AM

    Thanks for your help Joanna,

    The problem with the card form is that (in my case) you cannot hide the submit button for example (you can only disable but not hidden), or if you want to hide complety your form and only show a picture (which simulate a 404 error page in order "to hide" your form from the search engines) or in the case of a multilingual you cannot (function of the selected language) personalize the "thank

    you page" and other small bugs I saw, but I found the card form very sexy, but still need some improvements. That why I try to recreate something sexy (with also the animat
    ion effect that you put on the card form that's the idea :-)


  • Profile Image
    nelly
    Answered on July 12, 2018 at 07:13 AM

    Hi,

    I have moved your last response as a new thread. You can follow via this link:

    -https://www.jotform.com/answers/1522760


  • Profile Image
    Benny_W
    Answered on July 12, 2018 at 08:55 AM

    Hi Gerard,

    Is this what you want?
    1531399383Peek 2018-07-12 19-40.gif

    If so, unfortunately, it will only slide when the web page is loaded/refreshed. The next/back button won't slide the transition.

    I have created a new demo form: https://www.jotform.com/81923618195969
    In this form, I set the background to white and remove the box shadow. Maybe you could consider this solution.

    Thanks.

  • Profile Image
    marsvdb
    Answered on July 12, 2018 at 11:11 AM

    Hi Benny,

    Unfortunelaty, I will place an image in the background and a white background won't be usefull. Thanks anyway for your help