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 Form tab. This screen will appear:
- Include page 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.
- Include form header - Check if you want to show the form header text and/or image of the embedded form.
- Replace the browser window when redirecting to a new URL - 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.
- Custom redirect frame 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.
After you have set your options then click the Copy Embed Code button.
Note: If you change the Embed Options on the right you do NOT need to update the embed code already on your website. These options are controlled on the server side so the code needs no updating. (If you copied the embed code prior to 12/10/2012 then you will need to recopy the embed code in all cases. Prior to this date the embed code had all options specified within the embed code. This changed to the above behavior on 12/10/2012)
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:
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:
- For paid customers the "Powered By" footer at the bottom of our web forms shouldn't appear when embedded in a web page correctly.
- 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.
Note: Web Form and Embed Form options are only available for forms created within FormsCentral. Imported PDF forms can only be distirbuted as PDF files.
- 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." - 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.
- 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.
- Redirect doesn't take over entire window - Make sure you have the "Redirect - Replace entire window" option checked in the Embed dialog.
For anything else, we suggest you go back to the Embed Form tab, set your options and recopy the embed code to your web page. Its possible you may have inadvertently edited the embed code or options were missed.