Why my form is not showing on mobile devices?

I checked your form on my iPad and in phone simulator, it is showing fine as you can see below:

Could you please try to re-embed your form if the issue persists.

Do get back to us if you are still experiencing the problem you have.

Thank you!

This is how it is coming up on my Android. One of my clients is who alerted
me to this, so I know it's not just my phone.
The jotform should be just underneath "Woof!" I have re-embedded the code
but that didn't change anything.
Any other ideas?
*Angie Scharpf*
Owner/Lead Trainer
Pack Leaders Dog Training LLC
Serving Cedar Rapids, Marion, and surrounding areas
Cell 319.350.3230
Fax 319.373.3802
www.PackLeadersDogTraining.com
Like PLDT on FACEBOOK!

Check us out on Google +

...

I have just tested your site and did noticed that there is a blank space where the form should be. I tested it on my personal mobile phone and on online emulators.

Can you try to re-embed the form using the following code

<iframe

      id="JotFormIFrame"

      onDISABLEDload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      src="https://form.jotform.com/12141729191"

      frameborder="0"

      style="width:100%;

      height:539px;

      border:none;"

      scrolling="no">

    </iframe>

 

Please let us know if this helps.

Still didn't work. When I embed that code it only shows half of the form
with no option to scroll. See the screenshot attached.
Any other ideas?
Thanks
*Angie Scharpf*
Owner/Lead Trainer
Pack Leaders Dog Training LLC
Serving Cedar Rapids, Marion, and surrounding areas
Cell 319.350.3230
Fax 319.373.3802
www.PackLeadersDogTraining.com
Like PLDT on FACEBOOK!

Check us out on Google +

...

Apologies or that, the iFrame code given has not the enough height, but try injecting this code: 

<iframe

 

      id="JotFormIFrame"

 

      onDISABLEDload="window.parent.scrollTo(0,0)"

 

      allowtransparency="true"

 

      src="https://form.jotform.com/12141729191"

 

      frameborder="0"

 

      style="width:100%;

 

      height:2249px;

 

      border:none;"

 

      scrolling="no">

 

    </iframe>

If you notice this has a different value in the height property, please try embedding this code and let us know if it works. 

Still didn't work. It is still cut off too short on the mobile site. See
the attached screenshot.
Sorry it took me so long to respond. What else can we do?? I've had a lot
of clients complaining about this issue.
Thanks,
*Angie Scharpf*
Owner/Lead Trainer
Pack Leaders Dog Training LLC
Serving Cedar Rapids, Marion, and surrounding areas
Cell 319.350.3230
Fax 319.373.3802
www.PackLeadersDogTraining.com
Like PLDT on FACEBOOK!

Check us out on Google +

...

I can see the form works fine on a desktop computer, but does not show completely in a mobile device, although the height is the same it is not enough, this should be resolved by injecting this CSS code in your webpage: 

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

    #JotFormIFrame{

        height: 3213px;

     }

}

This will se the proper height value to the form when it is loaded in a mobile device, please test it and let us know how it goes. 

Here a screenshot about the expected result: 

Sorry still not working. I tried to embed that last code you sent me but it
didn't work.
*Angie Scharpf*
Owner/Lead Trainer
Pack Leaders Dog Training LLC
Serving Cedar Rapids, Marion, and surrounding areas
Cell 319.350.3230
Fax 319.373.3802
www.PackLeadersDogTraining.com
Like PLDT on FACEBOOK!

Check us out on Google +

...

Could you please try using the following iframe embed code:

<iframe id="JotFormIFrame"

onDISABLEDload="window.parent.scrollTo(0,0)"

allowtransparency="true"

src="https://form.jotform.com/12141729191"

frameborder="0" style="width:100%;

height:3000px;

border:none;"

scrolling="no">

</iframe>

Let us know if this worked for you.

 

It worked on my mobile site- YAY! But now it's excessively long on my
desktop version. Is there any way around that??
*Angie Scharpf*
Owner/Lead Trainer
Pack Leaders Dog Training LLC
Serving Cedar Rapids, Marion, and surrounding areas
Cell 319.350.3230
Fax 319.373.3802
www.PackLeadersDogTraining.com
Like PLDT on FACEBOOK!

Check us out on Google +

...

That is because the form currently has a fixed value needed to show it completely on mobile devices, then when it is checked on a desktop computer the space is shown. 

If you can inject CSS code to your webpage, then try injecting this code: 

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

    #JotFormIFrame{

        height: 2100px !important;

     }

}

This should reduce the space on a desktop device. 

Once you have injected the code, if this still does not work, please do not remove the code and let us know, we will further check it and find why it does not work. 

 

I have found another way to resolve this as well. 

First you will need to remove the height property from the iFrame code, embedding only this: 

  <iframe

      id="JotFormIFrame"

      onDISABLEDload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      src="https://form.jotform.com/12141729191"

      frameborder="0"

      style="width:100%;

      border:none;"

      scrolling="no">

    </iframe>

Embedding this code, the form will not shown, now you will need to set up the height with some CSS code, if you can add HTML code to your form, please add this: 

<style type="text/css">

#JotFormIFrame{

       height: 2100px;

    }

 

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

   #JotFormIFrame{

       height: 3210px ;

    }

}

</style>

If you have access to a style-sheet of your webpage then just add this code: 

#JotFormIFrame{

       height: 2100px;

    }

 

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

   #JotFormIFrame{

       height: 3210px ;

    }

}

This will set the proper height to the iFrame embedded code showing it properly on a desktop as well as mobile device.

I did this on a sample HTML webpage and it works, please take a look by clicking on this link. 

I would suggest you to better try first with this second workaround. 

Please let us know how it goes.