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 Any Option to Slide Form?

    Asked by Rajesh  on December 18, 2014 at 05:44 AM

    Is there any option to slide form?

    ie plugins like jformslider(jformslider.com)

    slide
  • Profile Image
    JotForm Support

    Answered by Charlie on December 18, 2014 at 09:50 AM

    Hi Rajesh,

    I'm not sure if I understood your question correctly. Are you referring on how to make a form have a slide effect animation when it is loaded? Or are you looking into an image slider widget into your form?

    The following should help you proceed:

    1. Slider related widgets:

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

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

     

    2. Use a custom CSS3 animation effect and add it under the CSS tab of Form Designer.

    W3Schools CSS3 Animations

     

    I hope this helps. Let us know if you need more information on this.

    Thank you.

  • Profile Image

    Answered by Rajesh  on December 18, 2014 at 12:10 PM

    Hi

    Thanks for suggestion

    But what i want is like

    http://jformslider.com/demo

    i want sliding form 

    my form has many questions so so in first page i want 3-4 questions

    then onclicking button next questions like that

  • Profile Image
    JotForm Support

    Answered by Charlie on December 18, 2014 at 01:49 PM

    Hi,

    Unfortunately, we do not have a plugin or a widget that let's you add animation transitions on your forms. But, as I've mentioned on my above post, you can do this by using CSS3 animations. Although, with this case, we will first use Page Breaks to divide your form into multiple pages. See screenshots below.

    1. Add "Page Breaks" to divide your form into multiple pages.

    2. Navigate to Form Style->Form Designer

    3. Under CSS tab, add the custom CSS code animation. Here's mine:

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

    }

     

    You can find the live form demo here: https://www.jotform.com/form/43514812962961 

     

    You can, however, use the jformslider code in your JotForm form by inserting it directly to the form's full source code. Please do take note that you will need to embed the form's full source code to your website to make it work.

     

    I hope this helps. Let us know if you need more information on this.

    Thank you.