Embedded Jotform not mobile responsive in Squarespace

  • Profile Image
    aaronwatts
    Asked 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?

  • Profile Image
    Kevin_G
    Answered 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
    aaronwatts
    Answered 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
    candy
    Answered 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
    aaronwatts
    Answered 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
    Kevin_G
    Answered 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
    aaronwatts
    Answered 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
    Kevin_G
    Answered 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.