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".

 

Form Properties: Form-ID

 

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:

 

Finalize Web Form

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.

 

Finalize First Form

 

 

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":

 

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.

 

Finalize Second Form

 

 

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.