-
windirectAsked on April 13, 2015 at 8:28 AM
Hi,
I'm looking for some time for a solution to embed the form in WordPress.
Today user call me because they have problems with the I pad.
Various applications such as for example mobile menu and toggles on the left are blocked.
I think the reason for this is the embed code.
Currently works Chrome, Firefox and IE.
Before I had always problems with scrolling on IE.
Please have a look
my wodpress Site http://it.win-direct.com/preventivo-infissi/
embed code:
Thanks
-
BenReplied on April 13, 2015 at 8:35 AM
I am looking at your website and it seems to be working properly.
Do you have a screenshot of the issue by some chance so that we can better understand where to look to see the issue, or the steps that are needed to recreate it?
-
windirectReplied on April 13, 2015 at 11:48 AM
The marked points are blocked!!
I only have this problem with embed form.
http://it.win-direct.com/preventivo-infissi/
-
BenReplied on April 13, 2015 at 1:03 PM
I took a look at the page, but this does not seem to be caused by the jotform.
If you wish, you can remove the jotform to see if the same issue is still affecting your website, but there is nothing that suggests iframe code being over the elements.
-
windirectReplied on April 13, 2015 at 1:39 PM
without form it works
-
BenReplied on April 13, 2015 at 3:12 PM
I think that I was able to notice the issue.
It seems that you have used this code to embed the form:
<iframe frameborder="0" allowtransparency="true" src="//form.jotformeu.com/form/50076119320344?nojump" style="width: 100%; height: 2720px; border: medium none;" scrolling="yes" id="JotFormIFrame">
Please change it to the one with the closing iframe element:
<iframe frameborder="0" allowtransparency="true" src="//form.jotformeu.com/form/50076119320344?nojump" style="width: 100%; height: 2720px; border: medium none;" scrolling="yes" id="JotFormIFrame"></iframe>
Unfortunately browsers will try to correct it all up so it did not seem to be embedded as such until I took a look at the source that was sent from your server, before browser did its work on it.
Do let us know if that resolves the issue.
-
windirectReplied on April 14, 2015 at 1:29 AM
Hi,
With the code the problem is solved.
But I can not scroll with IE and Firefox!
-
BenReplied on April 14, 2015 at 9:27 AM
I took a look at your website, but it still shows the same code as before - without iframe being closed.
Could you please add the new code so that we can see what exactly is happening?
-
windirectReplied on April 24, 2015 at 11:32 AM
hi i'm back,
I can insert the new code at 9 clock. (San Francisco Time) For about half an hour.
Then you can see that the scroll is not working.
Is this okay?
-
BJoannaReplied on April 24, 2015 at 1:51 PM
Considering that we are receiving a lot of threads and we are answering on them by order we got them we can not plan our availability in that time frame. What I can suggest to you is to make one test page on your site which will be available constantly and on that page you can try to embed your form. In that case if you provide us page that is available someone from support team will be able to look into your page and assist you.
-
windirectReplied on April 25, 2015 at 5:48 AM
hi, here is the test page with your new code:
http://it.win-direct.com/test/
Chrome is okay
IE + Firefox are blocked in my version. No scroll!!
-
BJoannaReplied on April 25, 2015 at 7:24 AM
I have tested your form and the scrolling is working in all browsers. Also I noticed that you have change the code that my colleague suggested.
Can you please provide us a screenshot to see what is an exact problem?
Looking forward to your reply.
-
windirectReplied on April 25, 2015 at 7:56 AM
I use this code:
<iframe frameborder="0" allowtransparency="true" src="//form.jotformeu.com/form/50076119320344?nojump" style="width: 100%; height: 2720px; border: medium none;" scrolling="yes" id="JotFormIFrame"></iframe>
That of your colleague.
In the red area I can not scroll with IE and Firefox!
-
JanReplied on April 25, 2015 at 12:43 PM
I checked your test page (http://it.win-direct.com/test/) and I wasn't able to replicate your issue.
I checked it using Chrome, Mozilla and Internet Explorer. The iFrame scrollbar is showing properly.
Mozilla Firefox (same result in Google Chrome)
Internet Explorer 8
What version of IE are you using? Please try to clear your browser cache and check it again.
Thank you.
-
windirectReplied on April 25, 2015 at 2:03 PM
-
windirectReplied on April 25, 2015 at 2:04 PM
I have deleted the cach. nothing changes in Firefox!
-
windirectReplied on April 25, 2015 at 2:06 PM
-
windirectReplied on April 25, 2015 at 2:08 PM
The same in IE. Nothing changes
-
windirectReplied on April 25, 2015 at 2:10 PM
-
windirectReplied on April 25, 2015 at 2:13 PM
Many of my customers have reported the same problem.
-
BenReplied on April 25, 2015 at 4:50 PM
I am able to see what you mean, that your scroll seems to be locked.
The way to recreate it is to place the mouse within the iframe, but not withing the form itself and without opening the dropdown (ddSlick).
Now I can not recreate the same on this page: http://it.win-direct.com/preventivo-infissi/ but I can on this one: http://it.win-direct.com/test/
The first page does not have the iframe closed as I have mentioned several threads above, while the test page does, which is why it is working as it is.
Basically iframe is like a new tab within your page, so when you place a mouse over it and start scrolling, it will initiate scroll of your iframe content, not of its parent document.
The reason why it does not scroll at all, is because the iframe is to high in sense of its height. You should try to reduce the height of the form to see it scrolling properly.
For example, try using this code:
<iframe frameborder="0" allowtransparency="true" src="//form.jotformeu.com/form/50076119320344?nojump" style="width: 100%; height: 1000px; border: medium none;" scrolling="yes" id="JotFormIFrame"></iframe>
And you could also try this one after it:
<iframe frameborder="0" allowtransparency="true" src="//form.jotformeu.com/form/50076119320344?nojump" style="width: 100%; height: 2720px; border: medium none;" scrolling="no" id="JotFormIFrame"></iframe>
Do let us know how it goes with both.
-
windirectReplied on April 29, 2015 at 10:01 AM
Please check what my answers muffin group. Muffin Group has developed the WordPress page.
"There is no solution because it’s technically not possible to do this. scrolling and height attributes are not compatible together and that’s why it is not possible."
i wrote:
"I do not understand why it works outside from the muffingroup template BE."Please look at this test sitereply:You really don’t understand why? Because the link you sent was built within code that was used ages ago. iframe does not work the same in HTML5. That’s the reason why it does not work. -
BenReplied on April 29, 2015 at 11:25 AM
Looking at this page: http://www.finestre-infissi-serramenti.eu/test.html it is working properly for me - I presume based on the above that it is working properly for you as well.
I was able to find their forum forum.muffingroup.com/betheme, but I was not able to find the exact thread, but to some extent they are right about HTML5 not using the elements in the same manner as they were before, but iframe is still being used and accepted element in your code.
You can see here a reference to it being a valid code: http://www.quackit.com/html_5/tags/html_iframe_tag.cfm and here: http://www.w3schools.com/tags/tag_iframe.asp with the second clearly telling you what is different between the two.
Now I can not see your original question, but the height and scrolling go hand in hand because if height is smaller than the overall document, scrolling is activated. If the height is bigger than needed, scrolling is removed permanently.
I would say that you can ask them to check your original page, but it might be best that we try something else instead.
Do grab the Full Source code of your jotform and apply the noConflict function right above the form code itself.
You can do that by adding this code:
<script type="text/javascript">$.noConflict();</script>right above the code for your form.
Do let us know how that goes.
-
windirectReplied on April 29, 2015 at 12:00 PM
I tested this code
<script type="text/javascript">$.noConflict();</script>
<iframe id="JotFormIFrame" frameborder="0" scrolling="yes" style="width: 100%; height: 2720px; border: medium none;" src="//form.jotformeu.com/form/50076119320344?nojump" allowtransparency="true"></iframe>
nothing change
the problem is,
when I close the i frame tag /// IE and Firefox block the scroll !!
if I leave open the i frame tag /// all browsers working with scroll but the site causes problems with menu etc.
-
BenReplied on April 29, 2015 at 2:08 PM
Oh no, the noConflict code should be used with full source code of your jotform, it will not work with the iframe code.
So what you should do is:
1. remove the iframe code
2. grab full source code of your jotform (see here how)
3. add noConflict part (blue segment under this) right above the first line of source code.<script type="text/javascript">$.noConflict();</script>
Do let us know how it goes.
-
windirectReplied on April 30, 2015 at 2:40 AM
-
Welvin Support Team LeadReplied on April 30, 2015 at 7:07 AM
Hi,
I'm sorry, but there's no setting to change the height in the source codes. But maybe that is possible by adding the source codes inside a div element.
For example:
<div id="formiFrame">
put the source codes here
</div>
Try that and see how it goes.
Now, I would like to ask if you have tried using our WordPress Embed Plugins? If not, I would suggest giving it a try.
https://wordpress.org/plugins/embed-form/
https://wordpress.org/plugins/jotform-oembed/
Please get back to us if you need further assistance.
Thank you.
-
windirectReplied on April 30, 2015 at 12:19 PM
okay, with JotForm oEmbed it works! :)
http://it.win-direct.com/preventivo-infissi/
Is there a way to make the list responsive? -
BenReplied on April 30, 2015 at 1:20 PM
I am glad to hear that the plugin above worked for you and since your question is not directly connected to the original issue I have moved it to a new thread here: http://www.jotform.com/answers/562079 where we will answer it shortly.
-
windirectReplied on May 1, 2015 at 9:12 AM
The plugin has stopped working!
I have Wordpress Version 4.2.1 with Network Installation.
Is JotForm oEmbed up to date?
-
Welvin Support Team LeadReplied on May 1, 2015 at 10:27 AM
Hi,
We do not have an update for the plugin, but I'm using it into the same WP version and I have no problem with it.
Please try removing the form in the page, reinstall the plugin and paste back the form URL. See if that makes any difference or resolve the issue.
Thanks
-
windirectReplied on May 1, 2015 at 11:37 AM
I can not activate the plugin in my Network. I have it on the Network-Admin. But not in the subdomain.
Now the plugin works again.
But scrolling does not work in IE and Firefox!
http://it.win-direct.com/test/
-
Welvin Support Team LeadReplied on May 1, 2015 at 1:09 PM
I'm using Windows 8.1 Pro and Firefox and the scrolling is working fine:
oEmbed shouldn't create any conflict in the page because the form is in inside an iFrame, no script in the oEmbed. Maybe, just a simple clear cache will fix it. Kindly try it.
Thanks