Embedded form is not responsive

catchjorge

Asked on August 19, 2016 at 11:34 AM

Hi Folks,

I'm working with this form, which on it's own is completely responsive:

https://form.jotformeu.com/form/62313037881352

However, embedded on my site, the form does not become responsive (viewing on iphone 5).

http://georgeguerra.com/application/

I read a previous thread that suggested updating the CSS with custom code, but that did not work for me. I'm copying the fix I attempted below, but this did not work for me:

Answered by david on October 30, 2015 at 04:14 PM

You can try adding mobile responsive CSS to the form:

http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

.form-all {

width: 320px !important;

}

.form-line {

padding-top: 0px !important;

padding-bottom: 0px !important;

padding-left: 3px !important;

}

img.form-image {

max-width: 100% !important;

height: auto !important;

}

#id_1.form-line {

padding-left: 36px !important;

padding-right: 36px !important;

}

}

And adjusting the the min/max widths to see if it will include the width of your phone. I tried on a few different devices though and each one the embedded form looked to be mobile responsive.

Page URL: http://georgeguerra.com/application/
Charlie

Replied on August 19, 2016 at 1:05 PM

Could you please try following the steps mentioned in this guide on how to make your form mobile responsive: https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm

For the website, I suggest re-embedding it using the iFrame embed code, here's how to get that code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code

If my suggestions did not work, please let us know.
catchjorge

Replied on August 22, 2016 at 10:32 AM

The iFrame method was just what I was looking for!!

I went into my wordpress page, copied the iFrame code into the "text" section of the editing area. And presto!

It works perfectly and is responsive. Thanks for your help!
Jan

Replied on August 22, 2016 at 11:06 AM

I've checked your form and I can see that it is now responsive. Glad to hear that the issue is now resolved. On behalf of Charlie, you are welcome. If you need any help or if you encounter any issues, please let us know. Thank you and have a nice day!