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

    Iframes generate validation errors on my website

    Asked by Kers101 on July 24, 2015 at 03:08 PM

    I need a CSS entry that will cover the three different iframes used on my site.  In this example if I use it as is I get validation errors re "allowtransparency", "frameborder", "border" and "scrolling".

    Would you please offer something that works?

     

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotform.ca/form/51694434448261" frameborder="0" style="width:100%; height:320px; border:none;" scrolling="no"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    Page URL:
    http://www.momentostudios.ca/momentonew/light-html/2013feb-b.html

    JotForm iframe iframe embed validation
  • Profile Image

    Answered by Ben on July 24, 2015 at 03:59 PM

    If you want to pass some validation, what I would recommend seeing how you are using HTML 5 on your website, is to change the code to this:

    <iframe id="JotFormIFrame" src="//form.jotform.ca/form/51694434448261" style="width:100%; height:320px; border:none; overflow: hidden;"></iframe>You can use that alone, or to add the script behind it as well, depending on your preferences.Do note however that even if the notice is there, the entire code is something that will work on various browsers, older and newer and that is why it is used.For example if you take a look, the only thing that I had added is the overflow CSS attribute, but it should not be needed neither.Also to have the background of the iframe different, you can add the following CSS code to your website:#JotFormIFrame { background: none transparent; }Do let us know how it goes.

  • Profile Image

    Answered by Kers101 on July 24, 2015 at 05:17 PM

    It seems to work OK but scroll bars appear even though I've illiminated the CSS I wrote for the  iframe. Scrolling: none;  is not accepted by html.

    http://www.momentostudios.ca/momentonew/light-html/2012aug-b.html

     

    I just ran the above page and don't see scroll bards now....

    after I uploaded scroll bars appearing now but not required..

  • Profile Image

    Answered by Kers101 on July 24, 2015 at 05:22 PM
  • Profile Image

    Answered by Kers101 on July 24, 2015 at 05:28 PM

    I'll check to see how it validates and get back to you....

  • Profile Image

    Answered by Ben on July 24, 2015 at 05:37 PM

    I took a look at it now and I would suggest to add the following code:

    <iframe style="border: medium none; overflow: hidden; height: 370px; width: 100%;" src="//form.jotform.ca/form/51694434448261" id="JotFormIFrame"></iframe>

    This will get rid of the vertical scrolling.

    The horizontal scrolling might still show up since your form is just a tad wider than the space on your website for the iframe, so what I would suggest is to set your form width to 690.

    You can see how to do that here: The Importance of Form Widths

    Once this is done, there should be no more scrolling shown on it.

    Do let us know how that goes, as well as the validation :)

  • Profile Image

    Answered by Kers101 on July 24, 2015 at 05:59 PM

     

    I'm still getting the scroll bars after changes.  Can't live with them.

    http://www.momentostudios.ca/momentonew/light-html/2012aug-b.html

  • Profile Image

    Answered by Kers101 on July 24, 2015 at 07:52 PM

    If I enter scrolling: no;

    into the JF  field styles,  the iframe  or the site css I still get the scroll bars.

    Why????

  • Profile Image
    JotForm Support

    Answered by jonathan on July 24, 2015 at 08:13 PM

    I also can see the horizontal scrollbar when I checked on the website.

    Can you please try first including scrolling="no" on the iframe style.

    Let us check again the website with the modified iframe style.

     

    Thanks.

     

     

     

     

  • Profile Image

    Answered by Kers101 on July 24, 2015 at 08:45 PM

    http://www.momentostudios.ca/momentonew/light-html/2012aug-b.html

     

    Looks  good now but

     

    scrolling="no" will give me a validation error.

     

    Can I create some CSS for the site with this or in JF form styles?

    #JotFormIFrame  {

    scrolling="no"

    }

  • Profile Image
    JotForm Support

    Answered by jonathan on July 24, 2015 at 09:54 PM

    I see it now working on your website as well.

     

    ---

    I am not sure which validation error you meant. But I test the form on the website, and I did not see the validation error happening.

     

    after submission, I was able to see the TY page properly

     

    Can please provide more details on how you meant the validation error happens.

    Thanks.

  • Profile Image

    Answered by Kers101 on July 24, 2015 at 10:04 PM
  • Profile Image
    JotForm Support

    Answered by jonathan on July 24, 2015 at 10:09 PM

    Its best if we address this next question separately. So I have created a separate thread for it here http://www.jotform.com/answers/619311

    Thanks.