JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Form does not display on a mobile version of WordPress websiteAsked by GoWithItFarm on October 14, 2015 at 06:10 PM
We have been using JotForm for years and love it, but for some reason the forms don't display when accessing the mobile version of our website www.GoWithItFarm.com. We have several forms (schedule a lesson, contact, etc) in use and would love to fix this. We've tried several different embed methods, including iFrame, and they are not working. Please help!
Mobile mobile version
Can you please check again if issue still exist.
It will help also if you can share a screenshot on how the website with the form looks on your end. Check if there were any error message visible on the browser that could be causing the issue.
Let us know if issue persist.
The reason the form is displaying on the emulator you tried is because that's the desktop version of our site being displayed, NOT the mobile version. Attached is a screenshot from the mobile version of the site, as accessed on a Samsung Galaxy S5. You will note that the form does not appear.
I took a look at your website and I see that the issue is with the way that the form is embedded on your website - on the mobile version of it.
The issue is that it is embedded like so:
I have marked the issues in that code with bold, but in fact, everything is an issue because of these entries since the quotes mark different segments as attributes and values.
Instead of that code, I would suggest to add the iframe embed code on your mobile version of your website.
You can see how to get that one here: How to get the jotform iFrame Code
Do let us know however if you happen to experience any further issues and we would be happy to look into this and help you resolve the same.
Once you do make the change on the mobile version of the code, do let us know even if you still do not see the form between the two horizontal lines and we will look into it and see what might be going on.
I've tried the iFrame and encountered issues with that as well. The iFrame shows up, but the content is wrong and shows a "page unavailable" message. See screenshot for info.
If you are still having issue, I recommend you remove the iFrame and re-embed the form. Instead of just copying the entire iframe code, just paste the iframe tag:
Please let us know if this helps
I think I understand your problem. The form does not scroll when on mobile:
I have assigned it to one of our developers.
No, you don't understand. The form doesn't even DISPLAY when I view mobile. You are viewing the desktop version and not the mobile version. See the last screenshot I posted. It shows a "page unavailable" message. PLEASE help!
Sorry for this inconvenience. I was able to replicate this issue in my personal mobile device. Unfortunately I was not able to find a mobile emulator to debug the issue. I have forward this to our back end team and we will get back to you as soon as possible.
Any updates? We'd love to be able to get this fixed...
We apologize for the delays. Our developer assigned on the ticket report have not updated us yet on the status. You will be notified via this thread when the developer responded with news/updates on the status.
Thank you for your patience and understanding.
It's been almost a week now since the "developers" were assigned - can we PLEASE have an update?
Sorry for this inconvenience. Our team is still working on the problem and can't really give a time line when this will be fixed. I have asked for an update and we will give you an update as soon as possible.
My name is Omur and I'm a developer at JotForm. I've viewed your form and we actually tried it on real devices. The problem lies in the custom theme or plugin you are using that does somehow modify the markup for mobile devices and causes any embed code to break.
As my colleagues correctly identified the issue, it lies within the source of the website.
I've attached 2 screenshots. Here is the one that shows the malformed tag:
You can see the corruption as the script that is installed on your CMS modifies the tag because it thinks that the form id is a phone number and wraps a phone tag around it.
You can also see the correct one on the second screenshot here:
Disabling the script that causes this effect will make your form work on mobile devices.
I hope this explains the situation.
If you require further assistance feel free to ask, we'll be happy to help.
Do you have any suggestions on how to fix this?
I would temporary switch to the default Theme (design) on the page, if that solves it you know the cause of the problem. If switching to default theme does not solve it, than I would look for "optimisation" plugins inside of WordPress that would "modify" the output prior sending it to the users browser.
SEO or "caching" plugins might cause this.