Let's first start by explaining the right way to embed a form within your website.
Go to the Distribute tab and click the Embed button. This dialog will appear:
Embed Options
- Form Width: This can be changed by going to the Form Setup dialog on the File menu
- Background: Include background colors - If this is unchecked then the form will have no background color and your web page color will show behind the embedded form.
- Header: Include form header - Check if you want to show the form header text and/or image of the embedded form.
- Redirect Size: When a Redirect URL is set (Options tab), this defines the size of the embedded area for the page you are redirecting to. If no Redirect URL is defined then this option is ignored.
- Redirect: Replace entire window - When a Redirect URL is set (Options tab),click this option to replace the entire web browser window with the redirect. Uncheck to replace only the contents of the embedded form.
After you have set your options then click the Copy button.
Note: The options are saved when you close the dialog so you do not need to set them up again if you recopy the Embed code. Changing the Header, Redirect Size and Redirect options will change the behavior of existing embedded forms without needing to replace the embed code on your website. However, changes to Form Width and Background options require you to copy/paste the new embed code to your website before the options will be active.
Once you have copied the embed code then go to your HTML authoring tool and paste the embed code into the HTML page within the <body> section:
<html>
<body>
<script type="text/javascript" src="https://formscentral.acrobat.com/Clients/Current/FormsCentral/htmlClient/scripts/adobe.for m.embed.min.js"></script>
<script type="text/javascript">
var fcSRB9FsdHSKWcDK_2a4Uhcbw = new ADOBEFORMS.EmbedForm({formId:"cSRB9FsdHSKWcDK*4Uhcbw", width:700, transparent:true});
fcSRB9FsdHSKWcDK_2a4Uhcbw.display();
</script>
</body>
</html>
Then upload your HTML file to your web server and view your web page. You'll now see your FormsCentral form embedded within your web page.
Some things to know:
- If you view your form from your local file system or within an application like Dreamweaver (not on a web server) then pages of the FormsCentral embedded form may be cropped on the bottom (you can't see the Next/Prev/Submit). Once the form is on a web server everything will look fine.
- Do not copy the source HTML from the actual FormsCentral form and paste into your HTML page. Always use the embed code provided within the above dialog.
- Never put the form URL in an iFrame. Always use the embed code provided within the above dialog.
- Never change the embed code parameters by editing the pasted embed code directly. If you want to change the embed code options for you should go back to the Embed dialog, change the options, copy the embed code, then re-paste into your HTML file.
Troubleshooting
- There is a "Local Host" banner in the upper left corner of the form - The form is currently embedded on a web page that is being viewed on a local server or host. In this case, the form may not behave as expected (e.g. the bottom of the form may be cropped). You need to upload it to a web server to view it properly.
- This error message is being shown instead of the form: "The form has been incorrectly embedded by using the form URL as the source for an iframe. Please copy the correct embed code from the embed dialog." - You should not use the form URL in an iFrame, instead paste the embed code.
- This error message is being shown instead of the form: "This form has been improperly embedded. For more information on how to fix the problem" - You copy/pasted the HTML source of the FormsCentral form into your HTML page. Go to the embed dialog and copy the embed code from there and paste into your HTML web page.
- The "Powered By" footer at bottom is appearing when form is embedded - For paid customers the "Powered By" footer at the bottom shouldn't appear when embedded in a web page correctly. If you embed the URL of the form (instead of the embed code) into an iFrame then the "Powered By" footer will appear. This happens because the form isn't embedded properly - replace the URL with the proper embed code to make it work.
- After my form submits it redirects to a web page that is cropped - You need to increase the size of the Redirect Options in the Embed dialog. Once you do that recopy/paste the code into your HTML page.
- Redirect doesn't take over entire window - Make sure you have the "Redirect - Replace entire window" option checked in the Embed dialog.
Comments