JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
multi page form, mobile phone, 'carousel like' navigation interface?Asked by wood2stock 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!
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:
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.
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).
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.