Insert Web Form in Wordpress

Arclab® Web Form Builder

Build the Form (php File)

First create the form in Arclab Web Form Builder and then click on "Build Web Form".


Build Web Form


Save the file and upload it (using FTP) to the root directory of the Wordpress installation. If you select a subdirectory, you will need to adjust the path later.
In this example we use the filename "webform.php".

The form (php) file is now in the Wordpress root folder, so the path is: /webform.php

If you save it to e.g. the subfolder /forms, the path is /forms/webform.php

Log into Wordpress

Log in as a user of the role "Adminsitrator" or "Editor".
Please note that restricted users are not allowed to insert javascript code, so they can not insert the form.



Edit Wordpress Page

In this example we will add a form to the "Contact" page "http://servername/contact/".


Switch the editor to "Text" mode and select the position where you want to add the form.
(In this example the form should be between "Demo Text".)


Wordpress text mode


The form will be integrated into the Wordpress page via Javascript code:


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

The exact code to insert your form will automatically be displayed after the form has been created.
If this option has been disabled, you can also view the code under "Web Integration".

If you have copied the Javascript code directly from the program, you must change the path from "webform.php" to "/webform.php".
This is necessary because of the Wordpress page structure, because the "Contact" page is in the virtual subfolder "/contact/".
If you have uploaded the form (php) file to a subfolder, e.g. "/forms", then you need to change it to: "/forms/webform.php".

Don't type in "http://.../webform.php" otherwise Wordpress might mess up the javascript code.
Use "/webform.php" instead of "http://.../webform.php"!



Copy & Paste the Code into Wordpress

Make sure you switched to "Text" mode before. You cannot add the code in the "Visual" mode.


Insert Javascript in Wordpress page


The red text marks are caused by the spelling correction and can be ignored.


Switch the edit mode to "Visual" then back to "Text" and double-check the inserted Javascript code.
(Wordpress should not mess up the code, but you might be using some custom filters, etc.)


Now click on "Preview" to verify the Wordpress page and make sure the form is shown correctly:


Wordpress Preview


If everything is ok, "Publish" the Wordpress page.


Check the following issues if the form is not shown:

  • Are you logged into Wordpress as "Administrator" or "Editor"?
  • Is the Javascript code intact?
  • Have you uploaded the form (php) file to the correct folder?
  • Is the path (in the javascript) to the form (php) file correct?