The form I embedded using Sitebuilder is not loading on iphones

  • Oasis419
    Asked on May 21, 2019 at 12:17 PM

    I emailed our attendees for an event we are hosting asking them to complete their preferences for their workshops. We are getting calls/emails that the form is not showing on their iphones...why is it not showing? How do I fix this?

    Below is the link to the webpage, I do not have an iphone to send a screen shot.

  • BJoanna
    Replied on May 21, 2019 at 1:33 PM

    Please re-embed your form, but do not remove any part of the iFrame embed code. 

    Getting the Form iFrame Code

  • Oasis419
    Replied on May 21, 2019 at 2:11 PM

    I have tried the full embed of the iframe code, but it cuts off the form if I don't create a frame large enough to fit any size monitor or phone. I can only test a few ways and each one cuts off at a different location. So, I used the simple embed code which allows the user to scroll if the form goes longer than the box created. Why won't the iphone load the form in the first place? Even using the embed URL link doesn't work, why?

  • zuritapia
    Replied on May 21, 2019 at 3:53 PM

    After looking into the site I was able to see that the form is currently not showing at all on the site. Did you happen to remove the form from your site by chance? 

    You can also look at this guide to assist you on what embedded code you should use.

    https://www.jotform.com/help/67-Which-Form-Embed-Code-Should-I-Use 

    1558468003embeded form Screenshot 10

  • Oasis419
    Replied on May 21, 2019 at 5:11 PM

    I did not remove it, the issue is that the form is not showing up with those using an iphone to view it. Your image confirms exactly my problem! It shows up on all other android phones, MAC, ipad, tablets, PC, etc. Just not iphones, why??? 

  • Elton Support Team Lead
    Replied on May 21, 2019 at 8:14 PM

    There's a code in your website that changes the position of the form when viewed on mobile.

    .iframe-content-block, .side-bar-page-content-element .side-bar-background-layer {

        height: 100%;

        position: absolute;

    }

    It seems the position: absolute property have moved the form away.

    Try to change the absolute value with initial or you can add this CSS code after the form embed code. See if this helps.

    <style>

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

    iframe[src*="jotform"]{

        position: initial !important;

        min-height:1800px;

        }

    }

    </style>

    Please let us know how this goes.

    Thanks