What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

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.


  • Profile Image

    How to embed form on WordPress website?

    Asked by windirect on April 13, 2015 at 08: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/

    <iframe id="JotFormIFrame" frameborder="0" scrolling="yes" style="width: 100%; height: 2720px; border: medium none;" src="//form.jotformeu.com/form/50076119320344?nojump" allowtransparency="true">

     

    embed code:

     

     

    Thanks

     

    WordPress embed form WordPress jotform
  • Profile Image

    Answered by Ben on April 13, 2015 at 08: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?

  • Profile Image

    Answered by windirect 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/

  • Profile Image

    Answered by Ben on April 13, 2015 at 01: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.

  • Profile Image

    Answered by windirect on April 13, 2015 at 01:39 PM

     

    without form it works

     

     

  • Profile Image

    Answered by Ben on April 13, 2015 at 03: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.

  • Profile Image

    Answered by windirect on April 14, 2015 at 01:29 AM

    Hi,

    With the code the problem is solved.

    But I can not scroll with IE and Firefox!

     

  • Profile Image

    Answered by Ben on April 14, 2015 at 09: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?

  • Profile Image

    Answered by windirect 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?

     

  • Profile Image
    JotForm Support

    Answered by BJoanna on April 24, 2015 at 01: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.  

     

  • Profile Image

    Answered by windirect on April 25, 2015 at 05: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!!

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by BJoanna on April 25, 2015 at 07: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.

     

  • Profile Image

    Answered by windirect on April 25, 2015 at 07: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!

     

     

     

  • Profile Image
    JotForm Support

    Answered by Jan 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.

     

  • Profile Image

    Answered by windirect on April 25, 2015 at 02:03 PM

  • Profile Image

    Answered by windirect on April 25, 2015 at 02:04 PM

    I have deleted the cach. nothing changes in Firefox!

  • Profile Image

    Answered by windirect on April 25, 2015 at 02:06 PM

  • Profile Image

    Answered by windirect on April 25, 2015 at 02:08 PM

    The same in IE. Nothing changes

  • Profile Image

    Answered by windirect on April 25, 2015 at 02:10 PM

  • Profile Image

    Answered by windirect on April 25, 2015 at 02:13 PM

    Many of my customers have reported the same problem.

  • Profile Image

    Answered by Ben on April 25, 2015 at 04: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.

  • Profile Image

    Answered by windirect 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.
     
     
     
     
     
     
     

     

  • Profile Image

    Answered by Ben 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.

  • Profile Image

    Answered by windirect 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.

     

     

     

  • Profile Image

    Answered by Ben on April 29, 2015 at 02: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.

  • Profile Image

    Answered by windirect on April 30, 2015 at 02:40 AM

    Is there a setting for height?

    Look at my test page with surce;

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

  • Profile Image
    JotForm Support

    Answered by Welvin on April 30, 2015 at 07: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.

  • Profile Image

    Answered by windirect 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?

     

     

      

  • Profile Image

    Answered by Ben on April 30, 2015 at 01: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.

  • Profile Image

    Answered by windirect on May 01, 2015 at 09:12 AM

    The plugin has stopped working!

    I have Wordpress Version 4.2.1  with Network Installation.

    Is JotForm oEmbed up to date?

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on May 01, 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

  • Profile Image

    Answered by windirect on May 01, 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/

     

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on May 01, 2015 at 01: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