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

  • wood2stock
    Asked on March 28, 2016 at 3: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!

    Thx.

  • Welvin Support Team Lead
    Replied on March 28, 2016 at 5:35 PM

    The best way I think would be to setup a multipage form using our page break: https://www.jotform.com/help/119-How-to-Create-Multi-Page-Forms. 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:

    https://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive 

    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.

  • wood2stock
    Replied on March 29, 2016 at 3: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).

  • mert JotForm UI Developer
    Replied on March 29, 2016 at 4: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:

    multi page form, mobile phone, carousel like navigation interface? Image 1 Screenshot 20

     

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

    http://www.jotform.com/help/322-How-To-Make-Mobile-Friendly-Forms-on-JotForm

     

    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.

     

    Regards.