Embedded form is not responsive

  • Profile Image
    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.

     

  • Profile Image
    Charlie
    Answered on August 19, 2016 at 01: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.

  • Profile Image
    catchjorge
    Answered 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!

  • Profile Image
    Jan
    Answered 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!