User Guide

Getting the Form iFrame Code

Last Update: August 9, 2017

iFrames are commonly used on embedding 3rd party services to your web page. Social sharing buttons, various widgets, and most of the stuff out there is added with an iFrame code.

Don't know the difference between embed codes? Check it out here.

Copy the iFrame Embed Codes correctly and pretty much nothing can break the form on your page. Since your form is called inside an iFrame it does not conflict with anything on your page.

To get the iframe code, please follow these steps:

1. Click PUBLISH at the top of your Form Builder.

2. Go to the EMBED section.

3. Select the IFRAME embed option.

4. Lastly, click the COPY CODE button to copy the codes.

Tell us how'd you do? Please share your thoughts and suggestions in the comments section below.

53 Comments...

  • david2971688

    None of those works,
    even iFrame

     
  • Joedaiches

    the iframe turns into a very tall skinny image on the page how do i change the size of the iframe?

     
  • dinomew

    This didn't work for me either. Form is still blank.

     
  • Beth

    what do I do after I click copy? to where?

     
  • Beth

    what do I do after I click copy? to where?

     
  • elizteo

    I am presently using inframe code. Does that mean I am using the normal http which does not retrict me from 10 SSL submission.

     
  • rollbackskating

    I have no scroll bar on my form although i have scrolling set to 'yes'.

    What to do?

     
  • sebastian marcet

    i am trying to embed my code on an iframe, but seems that iframe code breaks the same origin policy access bc jotfrom js code its throwing "Permission denied to access property 'FrameBuilder' " error
    on
    https://d20febc3qu3nwd.cloudfront.net/min/g=jotform?3.1.1907
    method :putImageonform
    line 954
    please help
    regards

     
  • sebastian marcet

    nm, found the solution using

    regards

     
  • earthdaysf

    problems:

    -several people on this page mention errors they received using the iframe method. JotForm support has not yet replied to these errors.

    -the image in this page is broken.

    -when i use the iframe method, the iframe height is much larger than it needs to be.

    -The script method should be able to scroll up automatically, since it is script.

     
  • earthdaysf

    the width of the iframe is much wider than it needs to be-- it's wider than the web-page where i'm putting the form.

     
  • Daniel Schultka

    Problem solved with iframe code.

    Thanks.

     
  • guiddini

    i dont like this answers

     
  • ledalim

    And where is the image saved to? It's lacking o coherent steps, unfortunately.

     
  • prit1

    I want to change the height and width of form along with textbox height and width..i m able to change form width but unable to change textbox width..could u help me?

     
  • gpeppy

    Hi, I just get a blank area when I use iFrame

     
  • pauldjoyce

    Hi-as per gpeppy (just above), I just get a blank area when I use iFrame. I've tried viewing the answer that gpeppy got bu the webpage doesn't open.

     
  • Sameer

    IFRAME doesnt work for me.
    I am using website builder 7 from Godaddy.

    Please help!!

     
  • macssam

    do I have to copy both codes
    where does each code go ...

     
  • ndidinwange

    Iframe didnt work for me either. I'm using godaddy website builder 7. Jotform pls help if you're reading this

     
  • benbftg

    I tried iframe and it didn't work. I'm using adobe muse. The transparent back ground also didn't work. I had cloned a form that your tech support had changed the background color in the css script. I double checked the clone in a text editor and the background color shows .supernova body {
    background-color: transparent;
    }
    Then I saved the form and went into iframe. It wasn't transparent and the form itself could not be edited in height on the html

     
  • jtamboer

    iFrame code did not enable the form on a mobile device for me. iFrame form displays just fine on Chrome and Explorer. Mobile device shows blank area, and the device tries to load the page constantly.

     
  • whatsintheboxparties

    Why did you just send me a rehashed solution which obviously doesn't work.

    Reading through the comments regarding this solution they all say that it doesn't work and not surprisingly when I tried the iframe code again (I had already tried this before I posted my question) it doesn't work either.

    So can you please give me a solution that works? That would be greatly appreciated.

    Thank you!

     
  • Nicholas

    when i paste the below code on my web page and save.


    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);}


    after i save, the below appear on my web page instead of the form, what im i doing wrong, pls help.


    // 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);} // ]]>

     
  • abteilung

    I have a problem with my form not showing up on some Macs / OS X / ipads. After I have used the embed-method for my joomla site until now, I read about the iframe-workaround for my problem.
    So I updated Joomla (3.4.3), installed Sourcerer (5.0.2) and updated my Module with the iframe-Code (replaced the embed-code). After this unfortunately the form only shows half.
    After checking CSS I can see height of my form is set to 180px. But in the code I pasted into Sourcerer it states this:

    style="width:100%; height:2064px;

    What I am missing?

    Thanks a lot!

     
  • Jared

    Worked great for me, thanks!

     
  • slygnsw

    How do you get the iframe code to work in your iframe, I am experiencing a similar problem on my page at www.facebook.com/SLYGNSW Any help?

     
  • adionisio

    I am able to copy the iFrame code. However the directions state to click on ADD BLOCK and past in there but I do not see an ADD BLOCK link. Please help. Thank you.

     
  • SkipParsons

    iweb has a widget for html. One is supposed to drag that widget to a blank or contact page and then copy and paste in the long code. When I do that - nothing happens.

     
  • rahul jadhav

    Thanks , iframe works

     
  • ToolsService

    I found the location to add the iframe code, but enter the source code of the capitura page in html and it worked. Thank you!

     
  • slleykersx

    Good afternoon , I have a problem in my form when I will include the iframe it works normally , but once in the Thank you screen it cuts half of the screen thus obscuring some items. I need help....

     
  • dcavalli

    These instructions do not work for my Google site, which I used a contact form from one of your templates. Any suggestions? www.fresnowingchun.com/contact

     
  • awcthailand

    Thanks for the suggestion but still no language flag option visible on iPhone. What's interesting is now it works on iPad. Must be the form width difference?

     
  • FrancescaVF

    Simple question I hope! Once form is embedded (that bit worked, thank you!), if you make changes to the form within Jotform does the embedded form update?

     
  • SRWproducts

    iFrame works great in Safari & Chrome but it comes up blank in Firefox. Using Concrete 5 for website building.

     
  • FoenixPartners

    I found out that if you have Adblock Plus or any adblocker enabled, none of the iframe or embedded methods will work.

    I hope this helps anyone experiencing blank page issues.

     
  • davidgrayvideos

    doesn't work and been waiting now over 24 hours for support to get back. What a waste of time :(

     
  • noateeradio

    Same here not responsive nor optimized on mobile i am using samsung galaxy s6

     
  • J

    Is there a way to post the iframe code in an html email but not have it actually be an iframe. Basically I want to send the code so someone can copy it and put it on their website

     
  • nickiversen

    I've solved this by embedding the source code, seems to work OK.
    Anybody know any reasons not to do it this way?

     
  • Steven Hannigan

    Hi
    This message is to Welden.
    What is wrong with my page embed code ???
    When I use the code off my webpage, the page loads no problem ?
    Also, until recently...this page worked just fine ! So, I dont understand how the code has suddenly become "Wrong" ???
    The exact code works on another page on my website ! The only difference between the 2 is that the other page is in Chinese !

    Also, the above "Embed Code" button on this page is absolutely useless !

    Steven

     
  • kadir

    I Dont Like No Form Code Error Problem Answers

     
  • mamodelivers

    not open on mobile

     
  • pinto25ji

    it worked flawlessly, very clear instructions. Thank you!

     
  • Flyinfur

    I used the iFrame code and tested the form from a friend's computer. The form went through (I received the "thank you for your submission" message), but I didn't received an email with the form. What now?!

     
  • jarydcat1

    I did this and my form doesn't work. It shows up fine and lets me enter details, but when i hit the submit button, it stays on the Please Wait loading button and does nothing

     

Send Comment