Embedding a Form in an Existing Page

You can embed the starting form for a process in an existing web page, as long as both are within the same domain. The embed code for the form is located on the Publish page for that business process. When a form is embedded in another page, it is embedded in an iframe within that page (the parent page).

For a more secure form: In order to secure your forms from click-jacking attacks, add <add name="X-Frame-Options" value="SAMEORIGIN" /> to the customHeaders section of your servers webConfig file.

To embed a form within a web page

  1. Copy the embed code shown on the Publish page to your clipboard.
  2. Edit the web page you want to embed the form in and paste the embed code in the appropriate part of the page's HTML markup.
  3. Save and close the file when you're done.

Modifying the embed code for a form

The default embed code looks like this, where ID is the business process ID and FormsServerURL is the URL for the Forms Server.

<script type="text/javascript" src='FormsServerURL/Forms/js/forms-embed.js?v=9.3'></script><script type="text/javascript" src='http://v-dev-w7x64-26/Forms/js/forms-embed.js?v=9.3'></script><script type="text/javascript">lfembed = new LaserficheForms.Form(null /*element to place form in*/,{bpid: 'ID', host:'FormsServerURL'}).getFrm();</script>

You can find the ID for the business process by opening it and looking at the URL. From the process designer, the URL will look like http://Server/Forms/bp/routing/ID.

To modify the embed code for a form, you'll need the process ID and the Forms Server URL. Then, you'll use those values with the following embed code.

<script type="text/javascript">
var lf = new LaserficheForms.Form(document.getElementById('myform'), {
bpid: 'ID', host: 'FormsServerURL', params: 'variablename=value&variablename2=value',
onloadCallback: function () {
}
});
</script>

You can pass parameters from the parent page to the form. Using the code above, you'd replace the variablename and variablename2 placeholders with the names of field variables present on the starting form.

With the onloadCallback code block, you can specify code that will run once the form has loaded. After the form has loaded, your code can access the objects within it.

In the following example, after the form has loaded, the script finds the action button on the form and, when the action button is clicked, sets the display of the iframe on the parent page to "none."

<script type="text/javascript" src='FormsServerURL/Forms/js/forms-embed.js?v=9.3'></script>
<script type="text/javascript">
var title = document.getElementById('title').innerHTML;
var lf = new LaserficheForms.Form(document.getElementById('myform'), {
bpid: 'ID', host: 'FormsServerURL/Forms', params: 'Topic_Name='+ title,
onloadCallback: function () {
var s = lf.getFrmDocument().getElementsByName('action');
if (s.length > 0) {
s[0].onclick = function () {
document.getElementById('myform').style.display = 'none';
};
}
}
});
</script>;

In this example, the parent page's title is stored in a variable called title that is passed in as the value for the Topic_Name field.