An inline frame or iFrame is an HTML element commonly used to embed 3rd party services into a web page. Since your form is called inside an iFrame, the chances of script conflicts occurring on your page are kept to a minimum. Most things online like social sharing buttons and various widgets are displayed using iFrames.
To get your form’s iframe code
- In Form Builder, select Publish at the top.
- Next, in the left pane, go to Embed.
- Then select iFrame from the options.
- Finally, to copy your form’s iFrame embed code, select Copy Code at the bottom.
Paste the code inside your website’s body tag. Or if you’re using a content management system (CMS), look for tools available in its editor for displaying custom HTML and use them to embed your form into your website.
See also: Embed Codes.
Send Comment:
136 Comments:
My submit bottom does not work on my website after embedding it
Hello everyone, I want more information, please, because I have filled out a form on this platform, please tell me anything. thank you already
I have tried this and it seems to work. Expect it cuts of the last part of the iframe. I can see that other persons have had this issue. You recommend setting height of container or finding some script error, but non of this is the issue.
Last attempt was to embed it as an iFrame. You can go to to see the very basic code.
Can you spot the error?
Click PUBLISH at the top of your Form Builder.
Go to the EMBED section.
Select the IFRAME embed option.
Lastly, click the COPY CODE button to copy the codes.
Anyone know how to install eBay Banners to a website. A lot of people want to know
I will try this, thank you for your help!
Thanks, yes, I'm using the iFrame method.
When trying to embed my jotform code into Adobe Portfolio I get an error "This embed code is not valid" I've tried IFrame too and always this error message. Any info shared would be oh-so appreciated!
sir how can i embed a quiz on my artical .
I get this message when i try to embed IFRAME code on sharepoint?
"We can't show this embedded content because the code seems to be incomplete. Make sure that the embed code includes width, height and a valid address for the src attribute."
I selected the embed IFrame code as you suggested, no difference..
What is Platforms - Like Wordpress we use?
thanks
Would it be possible to pull this embed markup through the API? That would help our users during setup a lot, and would enable us to automatically embed these forms for them without this needed step for our not so savvy users.
I am unable to get the iframe embed code to function properly on my SharePoint site. It keeps telling me the embed code is incomplete...
What do I do to embed the form?
Thanks, got it
Thanks again.
There is no iframe widget in the version of Elementor I am using. I copied the iframe script and pasted it into the HTML widget frame of Elementor on the customer engagement form page of the website. So far the only glitch I notice is on the Cell Phone view. When holding the Cell Phone in the vertical position the bottom of the form is cutoff and the signature field is missing. However, when you start entering data into the fields at the top of the form you can then scroll to the bottom and the rest of the form is there. But, when you try to enter your signature as soon as you lift your finger off the screen the form jumps right back up to the top to fill in the other fields. This of course is very inconvenient and time consuming. However, when turning the Cell Phone to the horizontal position the form is completely viewable with the signature field present. The Tablet seems to work fine.
Please get back. Victor
On my client website (Dentist) there is downloadable pdf file.
Unfortunately this download on mobile devices is not convenient. Also it is not easy to fill it up.
Is there a away to do this online!
Fill the form>click to send.
Or is there any samples to watch it!
Thank you
please make it more clear
ok once iframe code copy and after that the paste in that code in app.js but i have errors how to solve the solution
Can someone please call me @ (305) 467-1024. Everything was working fine last week , but now people have contacted stating there not able to send $$$.
Thank You
Ulysses
Last part of form is still cut off and not accessible
Hello,
je n'arrive toujours pas à voir mon formulaire dans mon email. J'ai copié le code iframe, enregistré en .html et ajouté en tant que ficher depuis Outlook "insérer en tant que texte et rien n’apparaît dans le corps de mon email. qu'est-ce que je fais mal ? y-a-t-il une autre intégration possible ?
merci
I can embed it fine, but then it does not appear full screen
I can embed it fine, but then it does not appear full screen, even when toggled
Why I can't copy this codes?
got it
but what i would like to make and index.html file which takes the user directly to the jotform, without needing to go to a web site
thanks
Trying for our website.. .Thanks :)
Brilliant, many thanks for the very prompt response, works beautifully.
Brian
these instructions for embedding in facebook don't make any sense !!!
mengapa harus login terlebih dahulu baru bisa formnya diakses.sy tidak inginkan ini
I've done this and I'm still getting an error:
We can't show this embedded content because the code seems to be incomplete. Make sure that the embed code includes width, height and a valid address for the src attribute.
Thank you I got as far as copying the code but couldn't see where to put it on WordPress, please help if you can
I was having problems getting the javascript embed to work correctly. Tech support suggested using iFrame instead and it works OK, although it won't center on the page unless I make it a full browser width embed. Didn't really want to do that, but it works. Anyone else with this issue?
pretty cut and dry....hope it works
How to upload a photo from the phone to our website
Can't get a picture from the cellphone please come back to me how can this be arranged 610-400-5914
I made some changes on my page and the jotform pencil is no longer shown. It's been working for a few months already.
I followed the steps about the source code copy but couldn't get it working except for the iframe. However, it's not shown as a full embedded page as before.
I need advise asap. Here is a sample
I am getting a payment error : expected window to be the same domain - can you help?
That did the trick, thank you!
oh ok. thanks. I had clicked on the publish tab and iframe didn't come up as an option.
I was not able to do it. Can you do it for us?
does this method work in wordpress?
I'm not a real fan of iframes, but I'm testing. There is a feature which is locked that says something like auto switch to full page, but I can't unlock it !!??
when I copy code, what's next? Where will I paste the copied code?
I copied the Iframe code and pasted it on my website. What I ended up with were paragraphs of code - No readible form - I am using Word Press
What shoud I do?
Trying to embed Jotform contact form. Using IFRAME doesn't work - preview shows a long, skinny rectangular box. Using Souce Code - preview cuts off the bottom (as others have mentioned) and freezes up the screen. Please advise on if this will be fixed or how else I can put a contact form on a custom page!
I did ... still same oroblemproblem.
cut the bottom of form
Please let me know step by step
Where do I put the copied code?
No funciono!
We just changed the template of our Wordpress site and our jotforms no longer appear. I've used every embed code that you provide and none work. We do not have a paid subscription to add a plugin. Any suggestions?
Then What?
DOES NOT WORK - I realllly reallly need someone to respond to my email sent please
This is still not working and it is very frustrating that you guys do not have a human I can speak to on the phone.
It is still not working.
Thanks!!
it worked
the page we have the link on is a sharepoint portal & it does not support IFRAME code. just the ulr which was working up till a few days ago. other forms we have posted are having the same issue.
Hi my email is juicycambabes@outlook.com I can not seem to get the pay pal subscription payment working. Could you please help me ?
The frame code does not work. Also the buttons that I put on the form doesn't work either. The Print button and the clear form button doesn't work. The only button that does work is the submit button.
I copied the Iframe code and pasted it on my website. What I ended up with were paragraphs of code - No readible form
it still does not work. this support is not helpful
I got your test. and not its not embeded.
its just a link and I have had 3 ppl say they did it, but I never got anything!
My issue is with the poll redirect to at external page, I want the finding to appear in our already embedded site.
I tried the iFrame code but it did not solve the problem of the 'Thank You' message box being a the top of the screen under the header instead of visible after the Submit button is clicked.
good
Still cannot reduce the height - is there a different icode to insert somewhere? I am completely puzzled.
Robin
That has solved the problem.
Thanks
That took care of it, thanks!
thanks
THIS IS AWESOME and it was so easy to do to help parents register children for camp from their smartphones (the straight "embed" code we were using only allowed the form to work on computers most of the time).
thank you so much for your help!!!
Hello,
I have done the above and copied the Iframe. here below the result.
=======================================================================================
var ifr = document.getElementById("JotFormIFrame-80502426013341");
if(window.location.href && window.location.href.indexOf("?") > -1) {
var get = window.location.href.substr(window.location.href.indexOf("?") + 1);
if(ifr && get.length > 0) {
var src = ifr.src;
src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get;
ifr.src = src;
}
}
window.handleIFrameMessage = function(e) {
var args = e.data.split(":");
if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { 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;
case "loadScript":
var src = args[1];
if (args.length > 3) {
src = args[1] + ':' + args[2];
}
var script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
document.body.appendChild(script);
break;
case "exitFullscreen":
if (window.document.exitFullscreen) window.document.exitFullscreen();
else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen();
else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen();
else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen();
else if (window.document.msExitFullscreen) window.document.msExitFullscreen();
break;
}
var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;
if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {
var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};
iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");
}
};
if (window.addEventListener) {
window.addEventListener("message", handleIFrameMessage, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", handleIFrameMessage);
}
=======================================================================================
Preview current internet page the form is visible.
Preview of the entire website is the form not showing up!!!?
I have tried this with 3 internet explorer, (internet explorer 11-Firefox-Opera). Results are the same.
My website is in own environment in development and not yet visible on the internet.
I hope someone can help me as soon as possible with a working solution.
Best regards,
Hans
This puts up a midget sized contact form. Not adjustable either. I used the actual code for Wordpress because I have a wordpress website and when i tested the form it is just not sending to my email to alert me that someone filled out the form.
This is especially useful when integrating a Square payment option. The iFrame allows Square to work without the whole website having to be SSL certified (with HttpS pages)!
I followed al instruction but it did not work, reflect the same problem. Please send to me the all process
did not work
I need to know the width and how tall this form is suppose to be so it will work... I was told in a tutorial you guys sent me that it needs to be changed in order to view it properly
What is this iframe code you sent me? should I be using this code with my own iframe code?
AWESOME!...Yep your iFrame advice worked like a charm...Thank you very much :)
Thank you unfortunately it will not let me delete the current code or insert the new code: How do I do that.
My problem is solved
Thank you
I tried to use IFRAME but it doesn't work. You can see on the site
what I mean. The forms are on the site but are not steady!
I always copy the iframe code. I had made no changes. The forms stopped loading, then they loaded slow, then they seem to be working atleast for now. I have made no changes.
Once I have done all of these steps, do I need to do anything else? or is it automatic?
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
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?!
it worked flawlessly, very clear instructions. Thank you!
not open on mobile
I Dont Like No Form Code Error Problem Answers
Did you know you can electronically sign documents from within ShareCredentials? Learn more in this week's Two-Minute Drill.
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
I've solved this by embedding the source code, seems to work OK.
Anybody know any reasons not to do it this way?
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
Same here not responsive nor optimized on mobile i am using samsung galaxy s6
doesn't work and been waiting now over 24 hours for support to get back. What a waste of time :(
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.
iFrame works great in Safari & Chrome but it comes up blank in Firefox. Using Concrete 5 for website building.
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?
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?
These instructions do not work for my Google site, which I used a contact form from one of your templates. Any suggestions?
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....
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!
Thanks , iframe works
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.
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.
How do you get the iframe code to work in your iframe, I am experiencing a similar problem on my page at Any help?
Worked great for me, thanks!
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!
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);} // ]]>
Do we have to have a Adobe Acrobat DC pro account for this to work? It says the standard account allows to sign but the pro account is required to Sign PDFs and get them signed? Does this mean we need a pro account and anyone that needs to sign must have at least a standard account with Adobe DC?
Absolutely love all the different widgets that can be used with jotform forms. I use this for everything!
I would love to see the ability for our users to upload a document like their Driver's License or Utility bills etc. Also, the ability to authenticate a user would be nice (Docusign has both of these feature). But so far, this is a good start.
Can we have multiple signers for this?
Tebrikler...Türkiye ve Dünya, bir basamak daha yükselecek Mehmet Barak,TTKD Başkanı
Awesome, this is going to be really helpful!
This is such a seamless integration. Takes all the user's responses, sends it out to Adobe DC for signing, and notifies everyone. I expected it to be more complicated!
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!
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.
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
Iframe didnt work for me either. I'm using godaddy website builder 7. Jotform pls help if you're reading this
do I have to copy both codes
where does each code go ...
IFRAME doesnt work for me.
I am using website builder 7 from Godaddy.
Please help!!
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.
Hi, I just get a blank area when I use iFrame
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?
And where is the image saved to? It's lacking o coherent steps, unfortunately.
i dont like this answers
Problem solved with iframe code.
Thanks.
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.
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.
nm, found the solution
regards
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
method :putImageonform
line 954
please help
regards
I have no scroll bar on my form although i have scrolling set to 'yes'.
What to do?
I am presently using inframe code. Does that mean I am using the normal http which does not retrict me from 10 SSL submission.
what do I do after I click copy? to where?
what do I do after I click copy? to where?
This didn't work for me either. Form is still blank.
the iframe turns into a very tall skinny image on the page how do i change the size of the iframe?
None of those works,
even iFrame