Insert Web Form in Joomla

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

Log in as a user of the group "Super Users" .
Please note that restricted users are not allowed to insert javascript code, so they can not insert the form.

 

In the "Global Configuration" > "Text Filters" only "Super Users" are allowed to insert unfiltered HTML code:

Super Users: No Filtering

All other Groups have by default either "Default Blacklist" or "No Filtering" ... and it's not recommended to change this for security reasons.

 

 

Change the "Editor" (temporary)

The default editor setup in Joomla is "TinyMCE". The problem is, that this editor does not allow to add custom code/javascript.
(You can skip this step if you use an editor, which allows custom code/javascript. The tags "script" and "div" are required!)

 

The easiest way is to change the editor temporary to create the article with the form.
Click on "Edit Account":

 

Edit Account in Joomla

 

Now change the "Editor" from "Editor - TinyMCE" to "Editor - None":

 

Change Editor in Joomla

 

Click on "Save and Close" to apply the changes.

 

 

Edit Joomla Article

The form will be integrated into the Joomla article 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 Joomla page structure and the use of virtual folders.
If you have uploaded the form (php) file to a subfolder, e.g. "/forms", then you need to change it to: "/forms/webform.php".

 

Copy and paste the code into the Joomla editor:

 

Paste Javascript Code into Joomla Editor

 

The red text marks are caused by the spelling correction (when using paste) and can be ignored.

 

Now "Save" the article:

 

Save Joomla Article

 

Now check your article in another browser to verify that the form is shown correctly.
You can make changes in the form without editing the Joomla page, you just need to upload the modified php (form) file generated by the program.

 

 

Reset the Editor in Joomla

You can now reset the editor in Joomla back to the original editor, but don't edit the article (again) using an editor which does not allow custom code/javascript.
The default editor is "Editor - TinyMCE".

 

Reset Editor in Joomla

 

Click on "Save and Close" to apply the changes.

 

Important: Don't edit the page again!
The default "Editor - TinyMCE" does not allow custom code/javascript.

If you want to edit the page with the form again, switch back to "Editor - None" again.
You also need to be logged in as a user of the user group "Super Users".