“Zigaform - PHP Form Builder” Documentation by “Softdiscover” v1.0


Zigaform - PHP Form Builder

A Wordpress plugin

Created: February 10, 2016
By: Raimundo
Email: info@softdiscover.com

Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. About Zigaform
  2. Requirements
  3. Installation
  4. Getting started
    1. Overview
    2. Create form
    3. Create Wizard form
  5. How to integrate in Wordpress or Woo Commerce
  6. How to integrate in joomla
  7. How to integrate in OpenCart
  8. How to integrate in Magento
  9. How to integrate in any website
  10. FAQ
    1. Common errors
  11. How to upgrade
  12. Sources and Credits

A) About Zigaform - top

Zigaform PHP form builder is a visual drag and drop form builder with live preview which makes you to build your forms on few easy steps. it integrates with all popular website platforms (wordpress, joomla, drupal and etc). Also it provides an advanced grid system and skin customizer that makes you to build professional forms. Also it provides an administration section where site admins manage tons of form options. It's really easy to customize and you don't need programming skills.


B) Requirements - top


C) Installation - top

  1. two ways of installation:
    1. Via Wizard Installer
      1. Connect to your web server using any FTP program (e.g. FileZilla) or the web interface of your webhost and upload all files and folders which are inside the "Upload_Application" folder from the .zip file you have downloaded from Codecanyon.
        Note:
        • if you want to use this app like a stand alone, just upload all files on your main domain. (e.g. www.yourestimate.com)
        • if you want to integrate into your site, create a subfolder and upload all files inside there. (e.g. www.yoursite.com/formbuilder/)
      2. Go to your web browser and enter your domain
        1. if you want to use this like stand alone, just go to you main domain. (e.g. www.yourdomain.com)
        2. if you want to integrate this to your site, just go to your app domain (e.g. www.yoursite.com/formbuilder)
      3. Then installer wizard will be loaded. In case wizard is not loaded just add "/install"
      4. Your System will now be checked. If your server meets all requirements, go ahead to the next step and put your purchase code of the software.
      5. Enter your MYSQL configuration. If the database you entered does not exist, the system will try to create it. This might not work when your webhost does not allow to create new databases. Please use an existing database in this case or create new database using the web interface of your webhost.
      6. Fill the next form with your details.
      7. Success. then delete the install directory and go to the admin page and log in. admin button will take you to admin section and home button will take you to frontend section.
      8. Finally, delete "install" directory. then the software is installed successfully.
      9. IMPORTANT! Some hosting have restrictions with file permissions and will show 404 error page. that's because your index.php file in the root directory (script folder) have 777 file permission. In order to solve this, just change it to 755 file permission via ftp or hosting panel.
    2. Manually
      1. Connect to your web server using any FTP program (e.g. FileZilla) or the web interface of your webhost and upload all files and folders which are inside the "Upload_Application" folder from the .zip file you have downloaded from Codecanyon.
        Note:
        • if you want to use this app like a stand alone, just upload all files on your main domain. (e.g. www.yourestimate.com)
        • if you want to integrate into your site, create a subfolder and upload all files inside there. (e.g. www.yoursite.com/formbuilder/)
      2. replace the index file, go to (root dir)/install/config/index.php, copy the index.php file and replace on the root directory (root dir)/index.php
      3. after replacing the index file, go to (root dir)/application/config/database.php and put your database settings $db['default']['hostname'] = '';
        $db['default']['username'] = '';
        $db['default']['password'] = '';
        $db['default']['database'] = '';
      4. then go to (root)/install/db/structure.sql and import it to your database
      5. then you can log in into your admin section (/index.php/admin), your username and password will be:
        username: admin
        password: admin
      6. finally, remove the install directory
      7. IMPORTANT! Some hosting have restrictions with file permissions and will show 404 error page. that's because your index.php file in the root directory (script folder) have 777 file permission. In order to solve this, just change it to 755 file permission via ftp or hosting panel.

D) Getting started

  1. Overview - top

    1. Zigaform has a menu bar on top and you can navigate for all the options.
    2. 7 menu options included:
      1. Menu Forms: this menu options create new form, list forms created
        1. when you create a new form. the editing panel will be shown: this brings three zones. 1) form elements to add. 2) preview form and 3) form setting tab and form element setting tab
        2. In first zone, 42 forms elements will be shown: Grid 1 Col, Grid 2 Cols, Grid 3 Cols, Grid 4 Cols, Grid 6 Cols, Textbox, Textarea, Radio Button, Checkbox, Select, Multiple Select, File Upload, Image Upload, Custom HTML, Password, Slider, Range, Spinner, Captcha, Submit button, Hidden field, Star rating, Color Picker, Date Picker, Time Picker, Date and Time, ReCaptcha, Prepended text, , Appended text, Append and prepend, Divider, Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6, switch, Dyn checkbox and RadioButton

          when every time you add a new form element to preview form zone, a selected field tab will be shown on the right. check here the print screen.
          this selected field tab include 5 tabs
          1. Label : this tab contains all options to customize the label and sublabel which are next to the input of the field. you can change font, color, size, position, and so on
          2. Input : this tab contains all options to customize the input depending of which is selected. e.g. change color, background, set input value, set private and public key for recatpcha field, and so on
          3. Help block : this tab contains all options to customize the help block section which are located below input field. check print screen below
          4. Validation tab : this tab contains all options to add validation feature to your form elements. it brings a lof of options. e.g. change color of validation tooltip, custom text and so on
          5. Conditional logic tab : this tab contains all options to add conditional logic to your form elements. when a new conditional rule is added. all the form elements with options are loaded. this is listed by field name. you can customize the field names in order to recognize your custom fields.
        3. On the center, you can find the preview form. every time you make a change on the right panel, this is reflected on this preview form
        4. you can find options to custmize the form skin and form elements: the form tab is always shown and it brings manytabs:
          1. Setting tab: on this tab you have option to import the forms. Also you can add additional css and javascript.
          2. Skin tab: on this tab you can find all options in order to change the skin of the form.
          3. wizard tab: on this tab you can find all options in order to add and customize your wizard forms. you can add many forms to the wizard form and so much more.
          4. Email tab: on this tab you can find all options in order to customize the email settings. you can add subject mail, recipient mail , customize your notificacion mail. it supports html and other options
          5. Submission tab: on this tab you can change the success message. it support html and it brings other features like change background color
      2. Menu records: you can check the record entries of the form. there are three options:
        the options are:
        1. List all forms: here is listed all the forms and showing basic information like form name, created date.
          Pressing the show button, you can see the detailed entry. it comes with additional data like OS, Browser, ip of the client

          if you want to export the information into pdf, just press "export to pdf" button and then you will see like this print screen.
        2. List by form: you can see the record entries by form and even it shows the reports filtered by your custom form elements. you can make a search of data using the search box on the right. also you can export all your data into csv file.
        3. Custom Report: this menu option makes you to choose what form elements (fields) will be filtered on the entry list records from "list by form" menu option
      3. Menu templates: when you are on editing form, this option is enabled. you can use any of these templates to your forms
      4. Menu Preview: when you are on editing form, this option is enabled. you see how it will look like on frontend
      5. Menu Export: you can export your custom forms in order to use later or just for backing up. just copy the code
      6. Menu Import: when you go to this option. a popup message will appear and will ask to paste. just paste and press "load form" button
      7. Menu Charts: you can see the chart of your form record entries
      8. Menu settings: you can change the language of the plugin. just change and press save button
  2. Create form - top

    1. For a quick reference, you can check this video tutorial of how to create a from with this powerful plugin: https://youtu.be/QukaXLGUgXg
    2. On top menu, just go to new option::
    3. then a popup will appear asking you to set a form name. just set a name to your form
    4. then the editing panel will appear. you will find three zones. 1) on the left, you will fin the form elements. you can drag and drop or just click to add to the form. 2) On the right, you will the form setting panel. you can customize options to your form and form elements. 3) On the center, you will find the form preview and you will see how it will look like on frontend.
    5. Just click in one form element to add to the form. then you will on form preview panel
    6. Then on the right panel, you will see a tab is shown. this is the tab for customizing your field selected. just set all your options that fit to your needs. well, you will fine in most cases 5 tabs
      1. label tab: you can customize the label of form element which are always next to input.
      2. Input tab: you can customize your input
      3. Help block. you can customize the help block of form element.
      4. Validators tab: you can set validation option to your form elements.
      5. Conditional logic: you can add conditional logic to your form elements
    7. then add all your form elements and DO NOT FORGET the "submit" button. this is important for sending the data of your form. Just drag and drop the submit button from left to right on the preview form. that's all. check the print screen
    8. then in order to customize the form skin,. you will find tabs:
      1. Settings tab: you can import forms and add additional css and javascript
      2. Skin tab: you will find options to customize the look of the form. you can change the background color or add background image, set border, shadow, padding and so on.
      3. wizard tab: you will find the options to enable the wizard form and you can add more steps and customize how it will look like on frontend.
      4. Email tab: you can find options like. customize recipient mail, customize notification mail and other options.
      5. On submission tab: you can customize the success message. it supports html feature.
    9. Finally, just save your form pressing the "save form" button on the right.
    10. then go to the list form, and you will the widget code, iframe and url to frontend. if you choose widget code, you can paste it into your website platform in order to make it work. remember it has to be same domain.
    11. Then you will see form on frontend working fine
  3. Create wizard form - top

    1. go to "add new form" button
    2. Go to wizard tab and enable the wizard forms, just going the "enable wizard forms" option and pressing the switch button to ON.
    3. then you will see the wizard form is shown on form preview. you can add more tabs to your wizard forms just pressing the "add new" button. check the print screen below.
    4. then you can add your form elements just dragging and dropping or just clicking. the form element will be added to the selected content tab. NOTE. here its not necessary to add the submit button. if you add this form element. this will be removed. the wizard form have its own buttons.
    5. if you want to see the content of each form tab, just click on tab (on preview form) or just go to "tab management" option and focus to the tab title.
    6. As on any form, you can add validation, conditional logic and all supported features
    7. Then after setting all your options. just save the form pressing "save form" button.
    8. then your form will be created and copy the widget code
    9. Paste the widget code to your page in your website platform
    10. the form will be shown on frontend

E) How to integrate in wordpress - top

  1. Create a subdirectory inside your wordpress directory and Install the PHP Form Builder e.g. www.yourwordpress.com/formapp/
  2. Then create your form and set your options.
  3. Then get the widget code of your form.
  4. Copy the widget code and paste to your wordpress page. your page must support html content

F) How to integrate in joomla - top

  1. Create a subdirectory inside your joomla directory and Install the Universal Form Builder e.g. www.yourjoomla.com/Zigaformapp/
  2. Create your form and set your options.
  3. In order to enable custom script on editor text. just go to Extensions->Plugin manager->Editor TinyMCE. and remove "script" tag and save changes.
  4. Get the widget code from Zigaform backend application
  5. Copy and paste to the page on joomla site. and thats all

F) How to integrate in opencart - top

  1. Create a subdirectory inside your opencart site directory and Install the Universal Form Buildere.g. www.opencartsite.com/formbuilder/
  2. Create your form and set your options.
  3. In order to enable custom script on editor text. you have to create a new page. just go to toolbar menu. Catalog -> "information" option.
  4. Then insert new page, pressing "insert" button
  5. Fill information and then you have get the widget code of your form
  6. Get the widget code from Zigaform backend application
  7. Copy and paste to the page and thats all
  8. finally, your form will load successfully.

F) How to integrate in magento - top

  1. Create a subdirectory inside your magento site directory and Install the Universal Form Builder e.g. www.yourmagento.com/formbuilder/
  2. Create your form and set your options.
  3. you have to create a new page, just go to menu "CMS"-> Pages
  4. Press the "Add new page" button
  5. Fill the information then you have to get the widget code of you form
  6. Get the widget code from Zigaform backend application
  7. Copy and paste to the content section and save changes on "save page" button. thats all
  8. finally, your form will load successfully.

G) How to integrate in any website - top

  1. Create a subdirectory inside your website directory and Install the Universal Form Builder e.g. www.yourwebsite.com/formapp/
  2. Create your form and set your options.
  3. Get the widget code from Zigaform backend application
  4. Copy and paste the "widget code" to your html page and thats all


I) FAQ - top

  1. Common Errors - top

    1. If you can't see the admin page after installing and appears a message "no input file specified" like for example on godaddy hosting, go to next directory:
      (root script directory/application/config/)
      and open config.php file and change the next code :

      $config['index_page'] = 'index.php/'; 

      to
      $config['index_page'] = 'index.php?/';


      then save changes and your access to your admin will be:
      From :
      http://www.yourdomain.com/form/index.php/admin
      to
      http://www.yourdomain.com/form/index.php?/admin
    2. Verify if your hosting provider or your own server has the module rewrite enabled.
    3. if you have installed successfully, but suddenly the database is disconnected or show the next error:
      "A Database Error Occurred, Unable to connect to your database server using the provided settings."
      just go the next file and open the "database.php" file with a text editor. (Estimator script)/application/config/database.php
      change then next line:
      $db['default']['dbdriver'] = 'mysql';
      
      to
      $db['default']['dbdriver'] = 'mysqli';

    4. if your filemanager on backend does not load well, the following directory needs to set 'write' permissions. you can use your FTP program and use the 'CHMOD' (Change Mode) function to grant write permissions. change the next directory permision to 755
      * /index.php
      * /invoices_temp/
      Although it says 755, some hostings may require 757,775 or 777 instead.

E) How to upgrade - top


E) Sources and Credits - top


Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist.

Raimundo

Go To Table of Contents