Is it possible to apply a transition time to the next question/page.

2) A smoother transition (applying a transition time?) to the next question/page.

If I understand your question correctly, you want to add a timer for every page. You can use our Global Countdown Widget.

If you want to track how long someone has filled your form, you can use the following widgets:

http://widgets.jotform.com/widget/timer

http://widgets.jotform.com/widget/time_tracker

http://widgets.jotform.com/widget/fancy_timer

 

If this doesn't answer your question, please explain further and/or add more details about it so we can assist you properly.

Sorry my question was not clear.

What I wanted was a smooth (fade out fade in) interaction to the next question.

Can this be done?

Yes you can also add transition effect like fade out/in on your form fields. You will need to use specific CSS codes for such transition effects.

Here is an example form that loads with transition effect https://form.jotformpro.com/form/42876779780981 A colleague had this solution came from here.

Can you please confirm if transition effect is what you were looking for.

It will also help us come up with a better suggestion if you share to us your form you want to apply the effects and describe more how you wanted it to happen. If you have example resource you can share to us it should help.

Thanks.

Thanks! 

Yes, that is exactly what I wanted.

I copy & pasted the source code of the example you sent me. Although it seems to be working, can you take a look and see if I haven't added anything unnecessary? I want to keep the code as clean as possible.

https://form.jotform.me/62449047771462

When I've checked your form I didn't see the CSS code that my colleague was provided. Did you paste the CSS code below:

.form-section {

    -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; }

}

 

@-moz-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}

 

@-webkit-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}

 

@-ms-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}

 

@-o-keyframes fadein {

    from { opacity: 0; }

    to   { opacity: 1; }

}

 

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

This is strange.

I injected the code here but it seemed to have disappeared.. But the transition seems to be working. Why is this happening..?

Hello miohonda,

I also did check your form and I was not able to see the injected custom css code which was shared by my colleague. I have gone ahead and injected the css code again. I would suggest you to please check your form again and see if you are able to see the injected css code.

Thank you!