How to embed form on WordPress website?

  • windirect
    Asked 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

     

  • Ben
    Replied 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?

  • windirect
    Replied 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/

    How to embed form on WordPress website? Image 1 Screenshot 20

  • Ben
    Replied 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.

  • windirect
    Replied on April 13, 2015 at 1:39 PM

     

    without form it works

     

    How to embed form on WordPress website? Image 1 Screenshot 20

     

  • Ben
    Replied 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.

  • windirect
    Replied 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!

     

  • Ben
    Replied 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?

  • windirect
    Replied 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?

     

  • BJoanna
    Replied 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.  

     

  • windirect
    Replied 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!!

     

     

     

     

  • BJoanna
    Replied 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.

    How to embed form on WordPress website? Image 1 Screenshot 20

    Can you please provide us a screenshot to see what is an exact problem?

    Looking forward to your reply.

     

  • windirect
    Replied 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!

     

    How to embed form on WordPress website? Image 1 Screenshot 20

     

     

  • Jan
    Replied 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)

    How to embed form on WordPress website? Image 1 Screenshot 30

    Internet Explorer 8

    How to embed form on WordPress website? Image 2 Screenshot 41

    What version of IE are you using? Please try to clear your browser cache and check it again.

    Thank you.

     

  • windirect
    Replied on April 25, 2015 at 2:03 PM

    How to embed form on WordPress website? Image 1 Screenshot 20

  • windirect
    Replied on April 25, 2015 at 2:04 PM

    I have deleted the cach. nothing changes in Firefox!

  • windirect
    Replied on April 25, 2015 at 2:06 PM

    How to embed form on WordPress website? Image 1 Screenshot 20

  • windirect
    Replied on April 25, 2015 at 2:08 PM

    The same in IE. Nothing changes

  • windirect
    Replied on April 25, 2015 at 2:10 PM

    How to embed form on WordPress website? Image 1 Screenshot 20

  • windirect
    Replied on April 25, 2015 at 2:13 PM

    Many of my customers have reported the same problem.

  • Ben
    Replied 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.

  • windirect
    Replied 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 site
     
    reply:
    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.
     
     
     
     
     
     
     

     

  • Ben
    Replied 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.

  • windirect
    Replied 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.

     

     

     

  • Ben
    Replied 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.

  • windirect
    Replied on April 30, 2015 at 2:40 AM

    Is there a setting for height?

    Look at my test page with surce;

    http://it.win-direct.com/test/

  • Welvin Support Team Lead
    Replied 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.

  • windirect
    Replied 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?

     

     

    How to embed form on WordPress website? Image 1 Screenshot 20  

  • Ben
    Replied 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.

  • windirect
    Replied 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 Lead
    Replied 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

  • windirect
    Replied 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 Lead
    Replied on May 1, 2015 at 1:09 PM

    I'm using Windows 8.1 Pro and Firefox and the scrolling is working fine:

    How to embed form on WordPress website? Image 1 Screenshot 20

     

    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