Why is my embedded form not displaying correctly?

created by Randy Swineford on Apr 17, 2012 9:21 PM, last modified by Randy Swineford on Apr 17, 2012 9:50 PM
Version 1

    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 Dialog.PNG

    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. 

     

    After you have set your options then click the Copy button. Note: The options are not saved when you close the dialog so you need to set them again if you recopy the Embed code.

     

    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.form.embed.min.js"></script>

            <script type="text/javascript">

            var fcSRB9FsdHSKWcDK_2a4Uhcbw = new ADOBEFORMS.EmbedForm({formId:"cSRB9FsdHSKWcDK*4Uhcbw", server:"https://adobeformscentral.com/", width:700, showHeader:false, transparent:false, widthAfterRedirect:700, heightAfterRedirect:400});

            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).
    • Do not copy the source HTML from the actual FormsCentral form and paste into your HTML page. If you do this then the embedded form will look garbled. 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 you should go back to the Embed dialog, change the options, copy the embed code, then re-paste into your HTML file.

     

    Troubleshooting

    • The bottom of my form is cropped on some pages - You are likely viewing the form locally. Upload it to a web server to view it properly.

     

    • The right side of my embedded form is cropped - You likely edited the "width:" parameter in the embed code. Changing this changes the embed region size but not the size of the form. You need to go to the Form Setup dialog to change the width and then recopy the Embed code from the dialog.


    • Embedded form is completely garbled - 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. Once you do that recopy/paste the code into your HTML page.