Embedding in Web Site and Tablet/Smart Phone Discrepency

Hello, 

 

  I have created a beautiful form and embedded it on my site. I used the embed file supplied by JOTFORM, however it was only showing 1/5 of the full form length. 

  In order to rectify this, I had to MANUALLY change the HTML coding on my side to 2800 pixels high. So, the coding you guys supplied was fine, just wasn't showing the complete form.

  Of course, in doing this, now that has royally messed up the tablet/phone interface.

 

  Is there a SOLUTION whereby I can see the COMPLETE FORM on my site and then have it show properly on tablets/phones? I used the "iframe". 

 

 Here is the link for testing purposes: http://www.fallsafetysolutions.com/rooftop-guardrail-calculator

 

Thanks! Great product, almost there with this form! 

I'm not sure if you are using the latest embed code. I see the iframe you are using is different from our default iframe.

Could you try getting a fresh copy of your iframe embed code under the "Publish" wizard. Here's a guide that you can follow:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. Make sure to remove the old embed code before re-embedding the new and freshly copied one.

Our developers have updated the script in the iFrame to be mobile responsive.

You will also need to make the form mobile responsive itself, you can do that by following this guide: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive 

 

If the iFrame does not work, you could try embedding using the default embed code.

 

I am also getting this error in your website:

 

I hope that helps.

I have tried both options, neither were successful on phones or tablets.
Please try the link on your end.
...

I checked it on my mobile devices. Here are my findings:

1. In Android device, it looks good:

 

 

 

2. In iPhone 6, it also looks good.

 

3. However, in iPad or a tablet view, the layout is quite not friendly. This is the same when viewing your form using the direct link.

 

 

I see there are custom CSS codes in your form, I'll investigate it further to see if I can find the one causing this layout in tablet view. I'll get back to you as soon as I found a fix.

Apologies for the inconvenience.

I cloned your form and made edits in my end. Could you check if this test form displays properly in your mobile devices (tablet, iPad, mobile phones)? Here's my cloned form: https://form.jotform.com/53446120550951?. You can clone it and see how I set it up. If you want apply my changes in your form, just copy the all the CSS code found in my CSS tab in your Form Designer Tool.

For a quick reference, here's my complete CSS code here: http://pastebin.com/V4BUujYP. You can copy it there and paste it in your end.

I hope that helps.

This looks fantastic on iPads, not “bad” on phones. Ill take it!
Thanks for your support.
...

Sorry, all the images are now missing which is a huge problem.
...

Are you referring to images inside of Image Slider widget? 

I have inspected your website and all images are shown on my end. 

However I saw that they are not shown on cloned form of my colleague. They are not shown because form is https and URL of images inside of that form are http. So if the form is https, URL's of images inside of Image Slider widget must also be https.

Hope this will help. Let us know if you need further assistance. 

I tested the url (that was created for me, by you guys) on my iPhone and iPad, I didn’t change it on my site as of yet.
...

I have cloned form of my colleague and changed URL of the images to HTTPS. Inside of this guide you can find out how to display images on Secure Forms:

http://www.jotform.com/help/172-How-to-Display-Images-on-Secure-Forms 

Here is my cloned form: https://form.jotform.com/53495397194975? 

Feel free to clone it.

Hope this will help. Let us know if you need further assistance.