Jotform not showing on Mobile Variant

**ctp2120** · 28 September 2017, 07:51 PM

Jotform forms are not showing on my mobile variant.

I posted the question on Jotform and was given the following response.

https://www.jotform.com/answers/1260...ge=10732640770

Any help on how to get the form to show on mobile?

Thanks

**gwpriester** · 28 September 2017, 10:29 PM

The page is blocked. It is part of your account and apparently cannot be shared.

This has come up several times. I believe the solution to your problem is you need to create a separate form for the variant and not use a copy of the form you created for the main variant.

**ctp2120** · 29 September 2017, 12:46 PM

Sorry. Here's the website.

http://ctpetersappraisers.com

http://ctpetersappraisers.com/contactus.htm

http://ctpetersappraisers.com/estatesaleemailsignup.htm

I have made another form and it still is not showing.

Here is the reply I got from Jotform

"Hello @ctpetersinc - I got confused while checking the layout and structure of your website. First, can you tell us how your website was built? Was it built from scratch, are you using a website builder, is it powered by a CMS, etc.? Do you have separate styling for mobile layout?

I'm asking because the container on your website (xr_noreset) where the form should reside appears on desktop, but not on mobile. And that's the main reason why you have this issue - The form can't be seen on mobile because the container where it sits is not visible to begin with.

For comparison, here's how your website layout behaves on desktop:

But, when viewed on mobile, the div container is still there but it's not shown on the actual DOM structure:

If your website uses a separate layout for mobile (e.g. if you're loading different CSS, JS, HTML, etc. for mobile users), you should place your form's embed codes there separately.

On the other hand, if you're using a website builder, check if it offers a different layout for mobile and do the same (place your form's embed codes there separately).

Bottom line, you have to ensure that the container on your website, where the form resides, is visible for the form to be visible too."

"I think you should look into your site settings, it seems like Xara uses two different layouts for desktop and mobile devices, this may be why you're not seeing your form on mobile.

I would recommend you to do the following:

1. Inject the following CSS code to your form:

@media only screen

and (max-device-width: 320px)

and (max-device-width : 100%) {

iframe, .form-all {

width: 100%!important;

height:500px !important;

}

}

Related guide: https://www.jotform.com/help/117-How...stom-CSS-Codes

Note that you may also change the height value according to your form.

2. Embed your form using the iFrame code, please check this guide that will help you getting it: https://www.jotform.com/help/148-Get...rm-iFrame-Code

3. Also, if possible add the following code between the <head> tags of your webpage:

<style>

iframe, iframe#JotFormIFrame { height:500px !important; }

</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Please note that you may contact Xara Support in order to ask them how to edit the source code of your page or why some elements are not displaying on mobile pages.

Here are some links that may help you:

https://support.xara.com/index.php?/...ive-web-design

https://support.xara.com/index.php?/...-variant-sites

https://support.xara.com/index.php?/...in-my-web-page

I hope this helps."

Thanks again for the replies

Thread: Jotform not showing on Mobile Variant

Thread Tools

Display

Jotform not showing on Mobile Variant

Re: Jotform not showing on Mobile Variant

Re: Jotform not showing on Mobile Variant

Bookmarks

Bookmarks

Posting Permissions