Buy PHP Form Builder

Wordpress, Joomla, Drupal
and others CMS

How to build forms for Wordpress, Joomla, Drupal and others CMS with PHP Form Builder

PHP forms can be very easily integrated into any HTML page with the use of Ajax.

This method is suitable for any CMS: Wordpress, Joomla, Drupal or other.

No additional plugin is usually required, just add Javascript code in the body of your page.

Here's how it works:

Installation

Add phpformbuilder folder at the root of your project.

Your directory structure should be similar to this :

my-project
- phpformbuilder

PHP Form Builder's package includes the Form Builder itself, the documentation and all the templates.

You don't have to upload all the files and folders on your production server.

Documentation and Templates are available online at https://www.phpformbuilder.pro/.
There's no need to upload them on your production server.

More details about folders, files and required files on production server here: ../index.html#package-structure

Ajax Forms Folder

Create a new directory named ajax-forms at the root of your project.

You can choose another name and another location, in which case you'll just have to change the URL called with Ajax in step 4.

Create your form

Create your form in a new PHP file and save it into your /ajax-forms folder.

You can see example of such form files in templates:

templates/bootstrap-3-forms/ajax-forms/contact-form-1.php
templates/bootstrap-4-forms/ajax-forms/contact-form-1.php
templates/foundation-forms/ajax-forms/contact-form-1.php
templates/material-forms/ajax-forms/contact-form-1.php

Add the form to your page

Your CMS has to allow <script></script> tags on pages/posts.

Many plugins for Wordpress, Joomla, Drupal allowing the use of scripts on pages and posts are available for free.

Open your CMS page/post editor
Add a block container where you want your form to be displayed:
```
<div id="ajax-form"></div>
```

Add the following Javascript code after your container ;
replace contact-form-1.php in the following code with the name of your form

<!-- Ajax form loader -->

<script type="text/javascript">
var $head= document.getElementsByTagName('head')[0],
    target = '#ajax-form';

var loadData = function(data, index) {
    if (index <= $(data).length) {
        var that = $(data).get(index);
        if ($(that).is('script')) {
            // output script
            var script = document.createElement('script');
            script.type = 'text/javascript';
            if (that.src != '') {
                script.src = that.src;
                script.onload = function() {
                    loadData(data, index + 1);
                };
                $head.append(script);
            } else {
                script.text = that.text;
                $('body').append(script);
                loadData(data, index + 1);
            }
        } else {
            // output form html
            $(target).append($(that));
            loadData(data, index + 1);
        }
    } else {
        $.holdReady(false);
    }
};

$(document).ready(function() {
    $.ajax({
        url: 'ajax-forms/contact-form-1.php',
        type: 'GET'
    }).done(function(data) {
        $.holdReady(true);
        loadData(data, 0);
    }).fail(function(data, statut, error) {
        console.log(error);
    });
});
</script>

Wordpress, Joomla, Drupaland others CMS