-
kayfelixAsked on August 11, 2016 at 3:38 PM
Hi,
My form was working fine (fields displaying exactly as on desktop and transparent background) until I clicked the designer button to make my form into 2 columns when elements are shrunk.
After saving the form did not display correctly anymore, all fields on separate rows and stretched full width.
Very similar to the problem here:
https://www.jotform.com/answers/669013-Form-not-displaying-correctly-on-IpadHowever the instructions didn't help in my case, at least not completely (all fields still on separate lines).
Here is the form: https://form.jotformeu.com/62207038156350
To complicate matters further, it looks fine when I view the form by itself (direct) but when its in my WIX page through an iframe, it doesn't display anymore!
http://cindyfuller.wix.com/designs-direct#!design-brief-kay-edit/bzyoq
tested in Safari iOS, Chrome iOS and Desktop Chrome
Any help greatly appreciated.
-
BJoannaReplied on August 11, 2016 at 5:00 PM
Your form is displayed properly on my end on desktop. However when I tested your embedded form on my phone I noticed that form is cut off. After that I have tested your standalone form it was also cut off. Your form is not fully responsive.
You can make your form responsive by adding mobile responsive widget to your form.
How to Add a Widget to your Form?
Also please remove CSS code that you added to your form, from other thread.
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
input[type=text], input[type=email], input[type=tel], textarea {
width: initial !important;
}
Here is my cloned form: https://form.jotform.com/62236447565966
Feel free to test it and clone it.
Hope this will help. Let us know if you need further assistance.
-
kayfelixReplied on August 11, 2016 at 5:58 PM
Hi!
Thanks for the quick reply :)
Your cloned form looks great in the browser when viewed directly:
https://form.jotform.com/62236447565966but unfortunately as soon as its a WIX iframe it loses the formatting:
http://cindyfuller.wix.com/designsdirect-kay#!cloned-form/bvf0zI just don't understand what is creating this behavior?
-
kayfelixReplied on August 11, 2016 at 6:18 PM
here is a better view of the cloned form displaying within the wix iframe on ipad air 2 running ios 9.3 using chrome browser:
its the same problem on the iphone, i tested it on the SE model running 9.3
the thing is, I originally copied the registration form template and built my form from that.
here is the reg form:
but here is the cloned form you made:
-
Chriistian Jotform SupportReplied on August 11, 2016 at 11:16 PM
Can you please try using the Jotform iFrame embed code to embed the form to your page instead of the wix iframe? You can get the iframe code from this guide: Getting the form iFrame code
Just copy the iFrame part and not the script part. You can copy the example below:
<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62236447565966" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>
Just paste the iFrame code to the HTML block of Wix.
If the issue persists, please let us know.
Regards. -
kayfelixReplied on August 16, 2016 at 3:57 PM
Hi! Thank you for the answer and sorry for the late reply, I've been caught up in other things!
I copied the code over, and although it looks better it's only showing about half the page:
https://form.jotformeu.com/62207038156350
http://kayfelix.wix.com/dd-kay#!design-brief-final/y5x94
-
BJoannaReplied on August 16, 2016 at 4:18 PM
Please try to increase the height of your iFrame code from 539px to 1200px. You can also set scrolling to "yes" or "auto".
<iframe onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/62207038156350" frameborder="0" style="width:100%; height:1200px; border:none;" scrolling="auto"></iframe>
Hope this will help. Let us know if you need further assistance.
-
kayfelixReplied on August 16, 2016 at 4:25 PM
As soon as it's long enough, the styles go haywire again!
-
David JotForm Support ManagerReplied on August 16, 2016 at 6:18 PM
I see the fields expand when on portrait iPad view:
I cloned your form, and inspected all the inner CSS code the form had, in order to remove the code related to iPad view, so now it's set to default, here is how it is viewed now: https://form.jotform.co/62287319818870
You may clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
Then get the Iframe code and embed it in your site: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
Before you embed the code, paste it in a text editor like WordPad, you will notice two part of codes, only copy and embed the Iframe part in your webpage, example:
Let us know if you need more help, we will be glad to assist you.