Squarespace embedded form is not mobile responsive

  • Profile Image
    jw311
    Asked on March 08, 2019 at 09:13 AM

    Hi team-


    So I have a squarespace site...    www.sunfoundry.com/testjot  where I have an iframe I have succcessfully made responsive with css as it goes from desktop to mobile.   This allows me to successfull embed responsive jotform in my squarespace site.


    However I'm having problems displaying the height of the iframe of the form url


    Please see my code here.


    div class="resp-container">

        <iframe class="resp-iframe" src="https://form.jotform.com/jw311/demo" gesture="media"  allow="encrypted-media" >   </iframe>

    </div>


    <style>.resp-container {

        position: relative;

        overflow: hidden;

        padding-top: 56.25%;


      

    }</style>


    <style>.resp-iframe {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        border: 0;

    }</style>


    Any help would be awesome



  • Profile Image
    Kiran
    Answered on March 08, 2019 at 11:42 AM

    Please note that the Jotform is mobile responsive by default and the form should be displaying normally on mobile devices. However, it looks like the form is embedded using the direct URL or using a different element. Could you check once again and see if the following guide could help in making the form responsive on your web site?

    https://www.jotform.com/help/37-Adding-a-form-to-Squarespace

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    jw311
    Answered on March 08, 2019 at 01:30 PM

    I Krian  I tried a different way with the mobile embed and followed instructions and the iframe is not responsive 

     https://www.sunfoundry.com/jot

     

    Now you can see in this example 

     

    https://sunfoundry.squarespace.com/test311   I was able to make an iframe responsive and then I could put a more simple jotform below it if I could make the iframe longer.

    1552070204workingiframe.gif

    See my spokemn explanation here.

     

    https://www.useloom.com/share/62db5e2b2fe7483cac13fee45ea09386

  • Profile Image
    Victoria_K
    Answered on March 08, 2019 at 03:07 PM

    Hello, It is the element embedded on the form not responsive, not the form itself. You can see that Submit button is changed based on window size:

    1552075384Untitled2.gif

    I have added some code to iframe embed widget on your form, so it should be responsive now:

    1552075530Untitled2.gif

    Please check if embedded form now works as expected. 

    We will be glad to assist if you need more help, just let us know. 

  • Profile Image
    jw311
    Answered on March 09, 2019 at 05:46 AM

    You are the best victoria.  Now how to get the height to show the entire app(page)?   

  • Profile Image
    Victoria_K
    Answered on March 09, 2019 at 07:23 AM

    I think the heigh can be updated via field's properties. If this won't be enough, please let us know so we checked for alternatives: