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 Jotform not mobile responsive in Squarespace

    Asked by aaronwatts on January 05, 2017 at 05:07 PM

    I have this page:

    http://jserve.org/2017projectregistration-nashville

    I embedded it in Squarespace following the instructions given in Jot forms.

     

    When i look at it on my phone, it's not responsive. I am using the mobile responsive widget, and I specified the form should be responsive in the design section.

    Any ideas?

    Page URL:
    http://jserve.org/2017projectregistration-nashville

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 05, 2017 at 08:12 PM

    I have checked your form and I can see it displays fine when viewing it in a mobile device, here's a screenshot as an example: 

    Is the form getting cut off at the bottom or at the side? 

    This is the most common conflict that happens when embedding a form and loading it through a mobile device. 

    Also, could you provide us the details about the device where you tested your form? 

    I have tested on my end on an iPhone 6S Plus device, knowing the device where you tested we will also test in a similar and will try to replicate the problem and provide with the instructions to resolve it. 

    We'll wait for your response. 

  • Profile Image

    Answered by aaronwatts on January 05, 2017 at 10:27 PM

    I'm using a iphone 6s as well. The form is not cut off. I see the whole form. It's just smaill, like its non responsive. Im stumped.

    What do you mean about loading through a mobile device? Why is that a conflict?

  • Profile Image
    JotForm Support

    Answered by candy on January 06, 2017 at 01:27 AM

    Hello,

    I have tested your website on iPhone 6s Plus testing environment and everything seems okay as you can see the screen below:

    I did not see any issue about being responsive.

    Sometimes, our users have a problem with embedding form into their websites. So, we always advise them an embedding way to make their form work properly. However, as I have seen there is no conflict in your form.

    If you have any doubt, please let us know.

    Thanks.

  • Profile Image

    Answered by aaronwatts on January 06, 2017 at 10:29 AM

    When you look at your emulator - do you see a differnece in the following links?

    http://jserve.org/2017projectregistration-nashville

    https://form.jotform.com/70045711107141

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 06, 2017 at 11:40 AM

    I have tested both links and I can see what you're referring to, when loading the link to the embedded form it looks like this: 

    And when loading the direct link the form looks like this: 

    I have copied the iFrame code of your form and noticed the form displays fine on my end, could you please try re-embedding your form? 

    If it still displays the same, please try injecting this CSS code to your form that will help you with displaying the fields properly on mobile devices: 

    @media screen and (max-width: 480px){

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0;

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

     

    .form-label-left, .form-label-right{

    width: auto !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

    }

    This guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Do let us know how it goes. 

  • Profile Image

    Answered by aaronwatts on January 06, 2017 at 11:52 AM

    It looks the same on my end.  I added the CSS and re-embedded the iframe code.

    How does it look on your end?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 06, 2017 at 12:32 PM

    I checked your form and noticed you have injected the CSS code, it looks the same. 

    Please try with this code: 

    @media only screen and (max-device-width: 550px){

        .form-all {

            font-size : 14px !important;

        }

        

        .form-label, .form-submit-button {

            font-size: 38px !important;

        }

        

        .form-sub-label, strong{

            font-size: 23px !important;

        }

        

        

        .form-checkbox-item label, .form-radio-item label {

            font-size: 35px !important;

        }

    }

    I have injected it on a cloned form of yours and here is the link so you can take a look: https://shots.jotform.com/kevin/Content/Samples/1026951/ 

    Hope this helps.