- riverinatradiesAsked on March 04, 2015 at 01:02 AM
The following form has several set conditions which hide/show certain fields depending on selections made. Initially this form was embedded via the normal embed method which was ideal in that the form height was automatically adjusted according to the viewing device etc however the conditions didn't seem to work consistently across all browsers and some users were able to see fields that should have been hidden.
So I switched to the ifame embed which seems to have solved the conditions problem, however as the height is fixed and needs to be quite large to accommodate when viewing on a mobile device there ends up being a huge empty space underneath the form when viewing on a desktop.
Furthermore, I have been using the new designer feature and have selected "make this form responsive" however the form is only responsive to a certain point. When testing the form on my mobile, it wasn't full shrunk to fit the screen.
- raulAnswered on March 04, 2015 at 08:04 AM
This is how the form looks on my phone when I viewed it using Firefox for Android.
Does it look like this when you view it on your phone? If not, could you provide a screenshot of how it looks? Also, please let us know which device/browser are you using to test?
We'll wait for your response.
- riverinatradiesAnswered on March 04, 2015 at 09:55 PM
Doesn't look like that on my iphone via safari.
What about the first part of my question, any solution?
- riverinatradiesAnswered on March 04, 2015 at 10:01 PM
- CharlieAnswered on March 05, 2015 at 04:24 AM
Could you try setting the "Responsive Form" under Preferences to "Yes", see if that helps the form to be more responsive.
Regarding the iFrame having an empty space at the bottom, this is because when embedding using this code, you will need to set a fixed height. Could you try adding a min-height attribute in the iFrame with "!important" and see if that fixes the problem, you can adjust it to cover the whole form.
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50631897725969" frameborder="0" style="width:100%; min-height:500px !important; border:none;" scrolling="no"></iframe>
Do let us know if this works.
- riverinatradiesAnswered on March 05, 2015 at 04:37 PM
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/50618153997869" frameborder="0" style="width:100%; height:2856px; border:none;" scrolling="no"></iframe>
- raulAnswered on March 05, 2015 at 05:25 PM
The script portion of the iframe is included to resize its height automatically, so it will automatically increase/decrease its height depending on the content that is shown in your form.
I've checked your site again using Chrome for Android this time and I'm still able to see it correctly.
So, I think that this issue might be specific to Safari.
Do you have another phone to test with? Or a tablet?
- riverinatradiesAnswered on March 05, 2015 at 07:40 PM
But it doesn't resize automatically, and if the problem is related to safari I still need a solution considering how many people use safari
- raulAnswered on March 05, 2015 at 07:54 PM
I did a little research and found this link: http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari#23083463
Could you please try the workaround provided there?
Let us know if this helps.
- riverinatradiesAnswered on March 05, 2015 at 08:16 PM
So I put the following code into my custom CSS but still no change:
- riverinatradiesAnswered on March 05, 2015 at 08:35 PM
From what I can see the problem seems to be with screen resolutions smaller than around the 400px mark as it works on my iphone 6 when in landscape mode but not in portrait mode.
Furthermore, I just copied the custom CSS from one of my other forms that IS working correctly and responsively (link below) and pasted it into a clone of the above form and the problem still remains. As the custom CSS is the same, the only difference with these forms is that this one has a lot of conditions that hide/show certain fields so perhaps that is where the problem lies? Perhaps there's a conflict making the responsive elements in the custom CSS not work properly ??
- riverinatradiesAnswered on March 05, 2015 at 08:59 PM
With regard to the above I actually tried the form with ALL conditions removed and it has the same CSS as another form that is working fine, yet STILL the same problem, it makes no sense, there is no consistency!
This is doing my head in :-(
- riverinatradiesAnswered on March 05, 2015 at 10:43 PM
So I seem to have figured this out by myself. The radio fields which had text longer than a certain point (of which I am unable to determine) seemed to be causing the problem, as once I shorted these fields the form was responding correctly. In the screen shot below for example, I changed the options to just "Full upfront payment" and "monthly repayment plan"
- riverinatradiesAnswered on March 05, 2015 at 11:35 PM
In addition to the above, I just realised the form below also has radio fields where the text is quite long, yet it seems to be working fine.
These problems with jotform are so inconsistent it makes it near impossible to get a definitive answer on what the problems are and how to fox them, so while my form above seems to be working correctly for now, who knows ?!?!
- JotForm SupportJanAnswered on March 06, 2015 at 07:08 AM
We're glad to hear that you were able to found a solution to your issue and that is by shortening the radio fields. Your form should be working properly since your shortened the fields. Just like what you said, this issue happens in Safari only.
Let us know if you need any more help.
Thank you very much for your patience.
- riverinatradiesAnswered on March 06, 2015 at 07:11 PM
Did you not read my last post though, shortening the radio fields on this form solved my issue but on another form I have very long radio fields and it works just fine.
There seems to be no consistency with jotform forms and it makes it difficult each time I need to create or edit one !?!
- BenAnswered on March 07, 2015 at 04:24 AM
Please note that the difference might be as much as a single CSS entry - since there are several CSS codes running, ones that are added manually by us, those added by Form Designer and those that are there either by some widgets or by a theme.
Now I understand the confusion and usually you will get the same experience if setting the forms in the same way, so we would be happy to assist you if you want to find what might be the difference.
Could you just confirm which field was not working properly on jotform here: http://www.riverinatradies.com.au/list-your-business-wagga2 and is working on this page: http://www.riverinatradies.com.au/get-a-website-form?
- riverinatradiesAnswered on March 09, 2015 at 08:57 PM
For the form on this page: http://www.riverinatradies.com.au/list-your-business-wagga2
The fields that had check boxes we causing the form to not be responsive, once I shortened the text however, it seemed to resolve the issue.
However, on this form: http://www.riverinatradies.com.au/get-a-website-form
There are check box fields which have text that is quite long, for example "Upfront Payment - 25% deposit + remaining balance due on completion of website" - yet it seems to be functioning just fine.
- CharlieAnswered on March 09, 2015 at 10:19 PM
I saw the forms embedded in both web page, but I'm currently getting a "404 Not Found" error, it seems that you are currently setting up your forms in your website?
If everything seems to be working as expected and the difference is that the check boxes in both form displays differently, then it might be a code conflict related to pre-loaded CSS style sheets, just what my colleagues have mentioned. The first webpage may have a better CSS styling that directly affects your form, while the second webpage has a different one. Although, most of the time the styling on one page are the same unless you loaded your own.
If you have finalized the setting of your web page and you are still getting problems, do let us know.
- iStoreAnswered on June 06, 2016 at 11:07 PMI had the same problem with my form cutting off the right side in portrait mode on iphone 6. The cause was that I was using a Scale Rating survey scale of 1-10 using labels for 'Worst Text' and "Best Text". If I removed the 'worst' text and 'best' text, the form showed correctly. I was able to figure this out because of you figuring out the radio button issue. Thanks and I hope this helps someone in the future and helps Jotform fix the code.
- JotForm SupportliyamAnswered on June 06, 2016 at 11:21 PM
I have moved your question on a different thread. We'll handle your concern there.