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.
Mobile Responsive Widget IssueAsked by julianl on May 20, 2015 at 06:58 PM
How are we today?
I have a problem with my responsive form (via responsive widget)
All of my text input boxes and text area boxes are becoming very wide in the desktop
view causing them to drop below the questions breaking my initial layout.
When I view the form in the preview (open in new tab) they are fine.
I have tried with out the widget, using the form layout (make this form responsive)
but it does the same thing.
When I embed them into dreamweaver via iframe is when the problems begin.
below is a link to my work in progress.
Any help would be awesome :)
Upon check, your form is working as it should. I have tested it Android device, as well as do some responsive tests, it is working fine here on our side. It's just some alignment issues of labels, I have fixed that.
For responsiveness, I recommend you to use "Responsive Form" option under (Preferences -> General Setting), I removed Mobile Responsive Widget, also unchecked Make this form responsive option from form designer. Please review the following screenshots.
You can clone this form; http://form.jotformpro.com/form/51398216265964
I hope this helps, please let us know if you need further assistance, we would be happy to assist you.
It is still reverting to about 400 px in width in desktop view.
I have made the form 700 px wide since cloning it.
When it gets to the tablet layout it goes to the desired
size and the text boxes aren't massive anymore (which is great)
but desktop still wont change. It works fine in preview, it is
after I embed it via iframe into dreamweaver when the problem
Let me clear this issue a bit more.
"It is still reverting to about 400 px in width in desktop view."
I am not sure, are you testing your form for mobile devices from your computer browser, JotForm allow forms to be responsive by default. If you would like to view your form as it displays on desktop, let me know, CSS Media Queries already inserted for mobile devices, we will need to remove in order to display form as it look in desktop view (fixed width). The screenshots above I provided, they are basically two views of mobile devices, first one is for Android Devices, and second is for smart phones.
Also for Adobe Dreamweaver issue, we've different views like Split View, which is resizable, meaning responsive option would work, because of media queries.
Let us know, if you want to keep fixed width of your form fields. We'll be trying to remove some media queries, to look fixed.
I am rescaling the responsive page in my desktop browser through the preview in dreamweaver. It is ok, I can work with what I've got. I made a coupe more changes and I am happy with it now. Thanks for your help it changed the text box inputs, which was my main concern! Thanks :)
You're welcome. Do let us know if you need further assistance in any way :)