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

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?