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

    Forms embedded on a website not showing properly on mobile devices

    Asked by ecolivingpest on October 12, 2015 at 05:22 PM

    I am having some issues. I have tried:

    1. Using the Mobile Responsive Widget

    2. Setting the Form to be Responsive in the Preferences.

    3. Extending the height of the form through HTML.

    4. I read that changing the width could possibly mess up the form with mobile viewing, so I left it the same, but then it views wrong on the web browser on the computer. (So, I currently have the width lowered for better desktop viewing.)

    I am currently Artisteer, and the form is being imported into the HTML page coding using the iFrame.

     

    Picture one:

    Source: http://ecolivingpest.com/free-quote.html

    Issue: On mobile viewing, the form cuts off.

     

    Picture two:

    Source: http://ecolivingpest.com/contact-us.html

    Issue: On mobile viewing, the form cuts off AND it doesn't sit right, hiding the text that was meant to go below the form.

    Picture three:

    Source: http://ecolivingpest.com/home.html

    Issue: On mobile viewing, the form cuts off.

     

    If there's a way to get these forms looking correct both on the desktop and via mobile, it would be great!

    Page URL:
    http://www.ecolivingpest.com

    Mobile mobile device JotForm source uploads height
  • Profile Image
    JotForm Support

    Answered by Mike_G on October 12, 2015 at 07:59 PM

    I would like to apologize for the inconvenience. I have checked your form on a mobile device and got the same result as you have. It seems that the container, <div>, where the forms are placed are not properly sized according to the size of the form. I've noticed this when I checked each of your forms separately through their link also on a mobile device. The forms look perfect when not embedded on a website. I understand that you embed your forms using the iframe and iframe tags specify an inline frame, meaning, it does not start on a new line and only takes up as much width as necessary, depending on where it resides. 

    I have inspected your website and found this on each page. Reason why your form overlaps with the other content of your website.

    You can change the value of position to "initial" like this: 

    .responsive .art-responsive-embed iframe, .responsive .art-responsive-embed object, .responsive .art-responsive-embed embed {

       position: initial;

       top: 0;

       left: 0;

       width: 100%;

       height: 100%;

    }

    Or, you can add this instead,

    iframe#JotFormIFrame {

       position: initial !important;

    }

    Another thing that I have found is this: 

    If you could change the height base on the form's height, that might fix the issue of your forms being cut off. I am seeing that on every page and your forms have different heights, you can create different id's depending on what form that is embedded, so you can have it changed differently. 

    Also, I'm seeing that you have changed the height to 75% for the forms on http://ecolivingpest.com/free-quote.html and http://ecolivingpest.com/contact-us.html

    Try updating those that have mentioned above and check the results.

    Kindly give us an update and let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by ecolivingpest on October 12, 2015 at 10:35 PM

    Thank you for your help. I played around with the pages for a bit, doing your suggestions, and it worked! The only other issue, in the form, on the http://ecolivingpest.com/free-quote.html page, there's only a few words that are cut off within the form. I'll shortening the wording where it cuts off and fixing it that way, because everything else works perfect. Thank you again for helping me with this.

  • Profile Image
    JotForm Support

    Answered by TitusN on October 12, 2015 at 11:44 PM

    On behalf of Mike - -You're welcome. 

    Let us know if you need additional assistance - happy to help.