- magicboundAsked on January 24, 2017 at 10:56 PM
I'm using the Jotform app in Weebly, which works perfectly for the first page on my iPhone but does not respond to the mobile sizing when I go to the second page. Tried many solutions, but haven't been successful. PS - Went to Weebly and they said go to you. :)
- IanAnswered on January 25, 2017 at 12:58 AM
You can add "Mobile Responsive Widget" to the form to make the form responsive.
Let us know if that fixes the issue.
- magicboundAnswered on January 26, 2017 at 08:25 AM
I've tried using the responsive widget and the responsive CSS checkbox code, but it's still not working beyond the first page.
- JotForm SupportMike_GAnswered on January 26, 2017 at 09:37 AM
It seems that the issue is within the form itself since the issue is also present if you view the form (not embedded) on mobile.
I see that on page 2 of your form there is a Configurable List widget that stretches to the right and is not cut off on narrow screens.
I would suggest you add a custom CSS code to the widget to fix the issue.
Make sure that the CSS codes only apply to device screens so the form, when viewed in desktop/computers, will not be affected
I hope this helps. If need any further assistance, please feel free to contact us again anytime.
- magicboundAnswered on January 26, 2017 at 02:39 PM
Tried pasting the CSS code for both my Check-in & Check-out widget and the first configurable list, both of which have given me the most trouble.
Good news - looks great when I use the link on the iPhone without going through Weebly.
Bad news - still not formatting correctly when it goes through Weebly (using the JotForm integration) as it's still too wide.
thanks for following up and helping me with this!
- JotForm SupportMike_GAnswered on January 26, 2017 at 03:17 PM
I see that you did not embed your form to your Weebly website through the Jotform app available for Weebly.
And from what I understand, you followed the instruction shown in the image below to embed your form to your Weebly website.
Although this is just similar to what's described in the image above, can you try to follow the instructions in the guide below to embed your form to your Weebly website, please?
However, instead of copying the entire <iframe> code with its <script> to the Weebly's Custom HTML, just copy the <iframe> part and leave the <script> then test your website again on your phone.
- magicboundAnswered on January 26, 2017 at 04:43 PM
This is what I've done, but nothing has been fully functional:
1 - Used the integrated Jotform app within Weebly. Still too wide on the iphone
2. Pasted the whole iFrame code from JotForm using the Weebly produced code. Still to wide on the iphone with the second page.
3. Pasted just the <iframe> code without the <script>. Cut the page short, so I couldn't get to the second page from all platforms, desktop and mobile.
4. Just used the standard embeded code, not for Weebly, and pasted it into Weebly. Still not wide enough on the second page.
Didn't know it was going to be this hard for such a simple form. Any more suggestions? Thanks for your help!
- JotForm SupportEltonCrisAnswered on January 26, 2017 at 05:54 PM
The form itself is already mobile responsive and there's also no cut off.
On your Weebly page, I can see that the form responds well on mobile but it is cut off at the bottom section.
Could you please restore it to the version where there is no cut-off so we can inspect it again?
It could be a container issue on the Weebly page.
- magicboundAnswered on January 26, 2017 at 08:37 PM
I restored using Jotforms 3rd party publish options for Weebly. The first page of the form looks perfect on the Weebly website, but he second page is still too wide for mobile use. Here's the link:
- IanAnswered on January 26, 2017 at 11:17 PM
I figured that the mobile responsive widget isn't programmed to work with widgets. It's not possible, since widgets like this are loaded in a separate inline frame. However, I would still recommend using mobile responsive widget so all your form fields (except framed widgets) would render properly on mobile.
I found the responsiveness issue in the Configurable list
The discussion on how to make configurable list responsive is discussed in the thread : https://www.jotform.com/answers/416834-Configurable-list-widget-on-mobile-devices
Hope this helps.
Let us know if you have more questions.