Embedded Integration
Use this integration option to embed the form directly onto any page of your website. The embedded form appears as though it is coming from your website and the visitor never knows your using a 3rd party service.
Though we offer you several options when creating this integration profile, it's quite easy when you follow the steps in the wizard:
-
In the Form Designer, choose Integration from the toolbar. You can also right-click on the form in the Dashboard, then select Form Design Tools > Integration Manager.
-
When the wizard appears, click the Next button to begin.
-
You are given the choice of several integration options: Direct Link, Embedded, or Pop Up Window.
-
We'll start with our most popular option, Embedded, and cover the other options elsewhere. Click Embedded and then click Next to move forward in the wizard.
-
Choose the Embedded Mode. You might choose the Basic non JavaScript Version if you have special requirements. But we recommend Dynamic Embedding. Choose that option and then click Next.
-
In the Embedded Mode Settings panel. In most cases the default settings will work best, but you can adjust the Width and Height of the form window, and perhaps decide if you want to turn the AutoHeight off by setting it to false. You can experiment with the other settings. For now, simply click Next.
-
In the last step of the wizard, you'll find the code for embedding your form. Click Preview to view and test your form on a simple sample website.
-
You can also pass values into the form to pre-populate the fields. To do so, click the Add URL Params button. In the window that appears, choose the fields that you want to populate and specify a Value for each. Click Save to commit your changes, and then Preview the form to confirm that the pre-population values appear in the form.
-
Now you're ready to integrate with your website. In the Embedded Code field, select all of code and copy it. Then paste it into your website.
-
You can save all of these settings by clicking Save Profile, entering a Profile Name, and then clicking OK.
-
Click Close to commit integration changes and exit the wizard. Optionally, you can double check your work by previewing the form.
When embedding a secure form on your website, the padlock icon will not be shown unless the parent page has its own SSL certificate. The form submission process is still secure, but because the page contains secure (The logiforms form and frame) and insecure (your website page) content, the browser will not display the lock icon.
This can be resolved by either using your own SSL certificate on the parent page or using one of the alternate integration options.
Another option is to display the NSI site seal on your form so that your visitors can click to verify that the form is secure.
Internet Explorer and DocTypes
When embedding the logiforms code on your website it is a good idea that your page contain a document header that will force Internet Explorer to avoid using Quirks Mode. This can be done by adding the following to the top of the HTML page where you are embedding the logiforms code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This will force Standards Mode and ensure your form is displayed correctly in Internet Explorer. This strep is only required if your HTML page does not already contain a docType and/or you notice the layout of your form looks incorrect in Internet Explorer or you notice that IE has gone into Quirks Mode.
0 Comments