Web Integration

Arclab® Web Form Builder

Build Web Form

Click on "Build Web Form" to create the form (php file). The php file contains the complete form and processing code.

 

Build Web Form

 

Please note that if you make changes to the form, you will need to re-create and re-upload the form.

How to Integrate the Form into your Host Page

 

1. Upload the php file generated by the program to your web server.

Click on "Build Web Form" to generate the php file first.

 

2. Open/edit the host page in your web editor.

The host page is the page into which the form is to be inserted.

 

3. Locate the position where you want to insert the form.

The form has to be inserted in the HTML source code <body> section of your host page.

 

Host Page Sample:

Form should be shown here

 

Sample Host Page Source:

... <body> ...
<div style="width:800px; margin:0 auto;">
Form should be shown here
</div>
... </body> ...

 

4. Add the the insertion code (e.g. inside a <div>) to insert the form into your host page.

Don't add the insertion code to the HTML <head> section!

 

You can copy the insertion code from the instructions shown after the form was created or when you click on "Web Integration".

Web Integration

Click on "Copy Code" to copy the insertion code to the clipboard.

 

Sample Insertion Code for the php file: webform.php

<div id="awf-form"><script>var c=new XMLHttpRequest();c.open('GET','webform.php?js=awf');c.onreadystatechange=function(){if(c.readyState===4&&c.status===200){var s=document.createElement('script');s.innerHTML=c.responseText;document.head.appendChild(s);awf_Run('awf-form');}};c.send();</script></div>

 

Sample Host Page Source with Insertion Code:

... <body> ...
<div style="width:800px; margin:0 auto;">
<div id="awf-form"><script>var c=new XMLHttpRequest();c.open('GET','webform.php?js=awf');c.onreadystatechange=function(){if(c.readyState===4&&c.status===200){var s=document.createElement('script');s.innerHTML=c.responseText;document.head.appendChild(s);awf_Run('awf-form');}};c.send();</script></div>
</div>
... </body> ...

 

5. Save and upload the modified host page to your web server.

Make sure the host page and the php file are uploaded to the same folder, otherwise you need to change the path of the php file:
c.open('GET','webform.php?js=awf') to e.g. c.open('GET','./folder/webform.php?js=awf') in the insertion code!

 

6. Open the modified host page in your web browser.

Test the form and make sure everything is working as expected.

Please note that if you make changes to the form, you will need to re-create and re-upload the form.

 

 

Alternatives:

  • Wordpress:
    Insert Web Form in Wordpress

  • Joomla:
    Insert Web Form in Joomla

  • Drupal:
    Insert Web Form in Drupal

  • Typo3:
    Insert Web Form in Typo3

  • Direct Open:
    Open Web Form without using a Host Page

  • php Include:
    The web form may also be integrated into an existing php web page via <?php include('webform.php');> (without parameter).
    The php form script recognizes that it was included via "php include" an returns different code.
    Please note that the "php include" file must be in the same directory as the php host page.
    Specify the full URI in "Web Integration" > "Settings" > "Script URI" if the php include file is in a different folder as the php host page.
    This option can be enabled/disabled in "Web Integration" > "Settings" (Version 5.0.9++).

Sample Host Page

By default, the program creates an example host page.

This page is in HTML format and has the filename:
projectname-sample.html

 

  • This sample page is just an example of how to insert the form into a web page.
  • You can use it to quickly test a form without having to modify an existing web page.
  • The sample page is not needed if you want to include the form in your host page.

 

You can switch off the automatic creation of the sample host page in the "Build Web Form" dialog and in "Web Integration" > "Settings":

 

Create Sample Host Page

Icon Font

Arclab Web Form Builder uses the "Material Icons" font from Google(tm) to display icons.
https://material.io/icons/

Version 5.0.4 (and newer):

  • The "Material Icons" font is now integrated into the php file.
  • The font is directly loaded from the php file.
  • There are no external resources needed to display the icons.
  • This means that the font does not need to be downloaded from the Google server, nor does it have to be hosted locally.
  • The integration of the font is completely automatic.
  • There is no action on your part necessary.