Insert Multiple Forms into a Single Host Page
Arclab® Web Form Builder
How to Insert 2 or more Forms into the same Host Page
It is possible to insert multiple forms into the same host page. To do this,
a different "Form ID" must be used.
The "Form ID" can be
set in the "Form Properties".
Please note that the code for inserting the form into the host page
changes if you change the "Form ID".
So it is not enough to change
the "Form ID", you also have to use the respective code to insert the form into
the host page.
Click "Finalize" to view the code to insert the form into your host page:
Sample: 2 Forms in the same Host Page
In the following example, 2 forms are to be inserted into the same host page.
Step 1: Create the first form
First create the first form as usual and add it to your host page.
In this example, the first form should have the file name: first-form.php.
Click "Finalize" to view the code to insert the form
into your host page.
Step 2: Copy and paste the code for the first form into your host page, e.g.
<!DOCTYPE html>
<html
lang="en">
...
<body>
...
<div>
/* The first form should be inserted in this
div.*/
<div id="awf-form"><script>
var awf_file='first-form.php';
var awf_x=new XMLHttpRequest();awf_x.open('GET',awf_file+'?js=awf');awf_x.onreadystatechange=function(){if(awf_x.readyState===4&&awf_x.status===200){var
s=document.createElement('script');s.innerHTML=awf_x.responseText;document.head.appendChild(s);awf_Run('awf-form');}};awf_x.send();
</script></div>
<noscript>Please
enable javascript in your browser!</noscript>
</div>
...
<div>
/* The second form should be inserted in this
div. */
</div>
...
</body>
</html>
Step 3: Create the second form
In this example, the second form should have the file name: second-form.php.
Click on "Form Properties" and change the "Form
ID":
Select the "Form ID": "awf1".
Because we didn't change
the "Form ID" on the first form, the first form has the
"Form ID": "awf".
The second form needs
to use a different "Form ID", so we select "awf1" for the
second form.
Click "Finalize" to view the code to insert the second
form into your host page.
Don't use the same code as the first form
as it will be completely different if you change the "Form ID".
It is
not enough to change the file name! The ID's, variables and function names
are different.
Step 4: Copy and paste the code for the second form into your host page, e.g.
Don't use the same code as the first form as it will be completely
different if you change the "Form ID".
It is not enough to change the file name! The
ID's, variables and function names are different.
<!DOCTYPE html>
<html
lang="en">
...
<body>
...
<div>
/* The first form should be inserted in this
div.*/
<div id="awf-form"><script>
var awf_file='first-form.php';
var awf_x=new XMLHttpRequest();awf_x.open('GET',awf_file+'?js=awf');awf_x.onreadystatechange=function(){if(awf_x.readyState===4&&awf_x.status===200){var
s=document.createElement('script');s.innerHTML=awf_x.responseText;document.head.appendChild(s);awf_Run('awf-form');}};awf_x.send();
</script></div>
<noscript>Please
enable javascript in your browser!</noscript>
</div>
...
<div>
/* The second form should be inserted in this
div. */
<div id="awf1-form"><script>
var awf1_file='second-form.php';
var awf1_x=new XMLHttpRequest();awf1_x.open('GET',awf1_file+'?js=awf1');awf1_x.onreadystatechange=function(){if(awf1_x.readyState===4&&awf1_x.status===200){var
s=document.createElement('script');s.innerHTML=awf1_x.responseText;document.head.appendChild(s);awf1_Run('awf1-form');}};awf1_x.send();
</script></div>
<noscript>Please
enable javascript in your browser!</noscript>
</div>
...
</body>
</html>
Step 5: Upload and test the forms
Finally, all you have to do is upload the host page and the two form
files (first-form.php and second-form.php) to your website and try both
forms.
Inserting several forms into the same host page is very easy,
you just have to choose a different "Form ID" and use the respective code
to insert the form.