What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Embedded form is not responsive

    Asked by catchjorge 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/

    not responsive JotForm style size uploads
  • Profile Image
    JotForm Support

    Answered by Charlie 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

    Answered by catchjorge 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
    JotForm Support

    Answered by Jan 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!