multi page form, mobile phone, 'carousel like' navigation interface?

  • Profile Image
    Asked on March 28, 2016 at 03:55 PM

    First I am new to JotForm but what I have seen en tested so far is great (and above all: easy and logic).

    My application is to build a kind of 'intelligent' product 'configurator' in a JotForm form & embed it in Wordpress. First priority is support for mobile phones/platforms. The configurator exists of multiple pages (max 6) with a submit at the last page.

    My main question is: what is the best way to set up navigation on mobile platform to move from page to page in this case. A 'tabbed' interface does work well on PC but on mobile it does not look and work well. I know the 'next' and 'back' buttons work ok, but maybe there are other ideas and/ or implementations. I was more or less thinking about a kind of 'carousel' (the 'dots') style interface as a concept.

    Ideas or resources to read/view that give direction on this topic are welcome!


  • Profile Image
    Answered on March 28, 2016 at 05:35 PM

    The best way I think would be to setup a multipage form using our page break: This is the only way you can do this aside from the form tabs widget.

    You can then turn on the responsive option in the form: 

    Our forms are not mobile responsive by default. But if something goes off, try to enable this in the form and see if that fixes it. If not, let us know and send us the form link so we can check it for you.

    Note that our form is very customizable. You can style the page break and mimic a dot and align it to your preference. We can help you with this, you can give us an example.

  • Profile Image
    Answered on March 29, 2016 at 03:38 AM

    Ok, did al that! prototype forms are set up like this. How can I give you a example to help with mimic the carousel?

    Genaral questions: what is the best/most used approach when making a form for usage on both 'mobile' and 'desktop'?

    (1): develop one form and make it responsive?

    (2) develop two seperate forms, one for mobile (with specific form pixel dimensions) and another one for desktop (with larger settings for pixel dimensions)? Problem here is that the right form must be triggerd depending on screen size (media query).

  • Profile Image
    Answered on March 29, 2016 at 04:47 AM

    In addition to what my colleague has already said, you can use the widget called "Form Tabs" to divide your form pages into tabs, this approach will be mobile friendly to your users.

    Please, see the example look from the below:


    As it is mentioned, there are several methods to make your form responsive. Below, you can find the methods:


    In addition, you can add media queries to determine the reaction of your form in different resolutions by injecting some custom CSS to your form. For more information about this issues, please do let us know.