Insert Multiple Forms into a Single 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.