Hello Form Builder

v1.1.1

• latest update: 05/20/2015
• by: Anthony Kwong (Codeadik)
• codeadik.com/
• email: akwong014@gmail.com

Server Requirements

• Apache Server
• PHP 5.3 or higher
• MySQL 5.1 or higher
• Curl extension
• MySqli extension
• GD extension (optional if you want captcha)

1. Extract the zip folder. You will get “helloform” and “documentation” folders after extraction.

2. Upload “helloform” folder to your website root (or to any location).

3. The folder “helloform” contains “install.php”. Access “install.php” in your browser and fill out the necessary details like:

• Database Information  - You need to create database. You can ask your hosting provider to do this for you and get the details like database name, database username, database password. For server host, most probably the value is “localhost”.

• License Key - License key is also your item purchase code. You can get your item purchase code via item support tab in Codecanyon or Click here for instructions.

• Email address - Your personal email for receiving updates.

4. After you fill all the necessary details, click “install” button.

5. Congratulations, the form builder is installed in your server.

6. You need to delete install.php for security purposes.

After the installation, you can now login to your form builder. Login to your form builder by "http://example.com/helloform/login” (access via browser). The default login credentials are (can change this later via Account Setting):

• Username: admin
• Password: admin

This section is only for old version of Hello Form Builder.

Upgrade from v1.1 to v1.1.1

- Just replace the old files below with the new files (downloaded from Codecanyon):

helloform/admin.php
helloform/install.php
helloform/i/process.php

helloform/inc/class/FormJS.class.php
helloform/inc/class/Js.class.php

Upgrade from v1.0 to v1.1

- Just replace the old files/folders below with the new files/folders(downloaded from Codecanyon):
 

helloform/admin/
helloform/css/
helloform/inc/
helloform/js/
helloform/menu/
helloform/property/
helloform/template/

helloform/admin.php
helloform/formbuilder.php

The admin panel contains 3 sections: Dashboard, Form Builder and Account Setting.

• Dashboard – You can manage and view all your forms here. It can performs edit, delete, preview, and get code of your form.

• Form Builder – This is where you create, edit, configure and save the form.

• Account Setting – You can change your username and password here for admin panel login credentials.

Form builder is where you create, design and configure your form. With its user friendly interface, you can easily navigate and create the form in minutes and with the use of default templates, it can only takes seconds!

The form builder consist of three panels: Elements Panel, Properties Panel, Builder Panel.

• Elements Panel - contains the list of elements needed for your forms. Just click the any element that you want and it will automatically add to builder.

• Builder Panel - It is a working space for your forms. You can freely drag and drop the elements here. It can also perform delete and edit element.

• Properties Panel - By editing the element , all the properties of the element will show here.

Form configuration (Form config) is a section where all the settings of your form are needed to setup like where the form data should be sent to, sending by SMTP or by PHP mail only, enabling autoreply and etc. All the settings are discussed below.

Your email address (Email Address Setting)

It is an email address where the form data should be sent to.

Sending mail type (Email Sending Settings)

This is how the email should be sent via form. Possible values are SMTP and PHP mail.

• PHP mail – It uses a normal sending of email without encrypting the data and mostly use the default port 25. It requires you to have email address but no password is needed. Using PHP mail, a higher chance that your email will go to spam. In shared hosting, sometimes these are disabled.

• SMTP – Unlike PHP mail, SMTP requires more information like SMTP username, SMTP password, SMTP Server, SMTP Port, SMTP Encryption. It can encrypt your data and offers more security of send emails. With SMTP, a higher change that your email will go to inbox.

SMTP username (Email Sending Settings)

This is also your email address. Just like the value of "Your email address (Email Address Setting)".

SMTP password (Email Sending Settings)

This is the password of your email address.

SMTP port (Email Sending Settings)

Possible values are 25, 465 and 587.

SMTP encryption (Email Sending Settings)

Possible values are no encryption, SSL and TLS encryption.

Subject (Email Message Settings)

This is the subject of the email.

Message format (Email Message Settings)

Possible values are HTML and Plain Text. Obviously with html, the message body will render html tags.

Message body (Email Message Settings)

Message can be style here. You can also insert variables like ip address of the user etc.

Insert variable (Email Message Settings)

This is a list of variables that you can use in your message body. Currently, the default variables are Form Data and IP address. Form element variable holds the value of an element. Just select the variables that you want and it will automatically add to the "Message body".

1. Default variables

• Form Data - It holds all the data of the form with ready style (Ready to send to email).

• IP address - It holds the IP address of the user who submitted the form.

2. Form element variables - There are the variables that hold each value of an element. If you add new elements in the builder, the "Insert Variable" will also be updated.

Enable autoreply (Autoreply Settings)

This enable/disable the autoreply. The autoreply sends automated email to the user email address after submitting the form.

Autoreply email address (Autoreply Settings)

This is the email address that will be used to send automated emails.

SMTP username (Autoreply Settings)

This is also the "Autoreply email address". This only shows if SMTP is selected as "Sending mail type".

SMTP password (Autoreply Settings)

This is the password of your "Autoreply email address". This only shows if SMTP is selected as "Sending mail type".

Subject (Autoreply Settings)

The description is the same as "Subject (Email Message Settings)".

Message format (Autoreply Settings)

The description is the same as "Message format (Email Message Settings)".

Message body (Autoreply Settings)

The description is the same as "Message body (Email Message Settings)".

Insert variable (Autoreply Settings)

The description is the same as "Insert variable (Email Message Settings)".

Enable Redirection (Redirection Setting)

This enable/disable the redirection after successful submission. If this is checked, it will show “Redirect to Url”. If this is unchecked, it will show “Success message”.

Redirect to Url (Redirection Setting)

A configuration URL where the form will be redirect to after successful submission.

Success message (Redirection Setting)

A configuration for the success message. Success message will apprear to the form when the user has successfully submitted a form.

After saving the form, Hello Form Builder generates two embed codes (Step 1 and Step2).

Step 1 contains all the js and css assets like Jquery Library and  etc. Step 2 contains the form itself.

Example Step 1 embed code:

    <!-- Hello Form Builder - ASSET -->
    <link type="text/css" rel="stylesheet" href="http://example.com/helloform/css/jquerytheme.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/i18n/jquery-ui-i18n.min.js"></script>
    <script type="text/javascript" src="http://example.com/helloform/js/placeholders.min.js"></script>
    <script type="text/javascript" src="http://example.com/helloform/js/jquery.form.js"></script>

    <!-- Hello Form 1 - ASSET -->
    <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" href="http://example.com/helloform/forms/1/main.css" />
    <script type="text/javascript" src="http://example.com/helloform/forms/1/main.js"></script>
  

Example Step 2 embed code:

    <!-- Hello Form 1 - ASSET -->
    <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" href="http://example.com/helloform/forms/1/main.css" />
    <script type="text/javascript" src="http://example.com/helloform/forms/1/main.js"></script>
  

Let's now display the form and paste step 1 and step 2 on our HTML page. Step 1 can be placed either inside <head></head> tags or before </body> tags.

Example of Embedding to HTML page:

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width" />    

    <!-- Hello Form Builder - ASSET -->
    <link type="text/css" rel="stylesheet" href="http://example.com/helloform/css/jquerytheme.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/i18n/jquery-ui-i18n.min.js"></script>
    <script type="text/javascript" src="http://example.com/helloform/js/placeholders.min.js"></script>
    <script type="text/javascript" src="http://example.com/helloform/js/jquery.form.js"></script>

    <!-- Hello Form 1 - ASSET -->
    <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" href="http://example.com/helloform/forms/1/main.css" />
    <script type="text/javascript" src="http://example.com/helloform/forms/1/main.js"></script>
  
</head>
<body>

    <div>
        <!-- Display Hello Form 1 -->
        <script id="hfbscript_1" src="http://example.com/helloform/forms/1/formjs.js"></script>
    </div>


</body>
</html>

Hello Form Builder generates two embed codes (Step 1 and Step 2, see example here).

In step 1, it contains two parts: <!-- Hello Form Builder - ASSET --> and <!-- Hello Form # - ASSET -->.

The first part is <!-- Hello Form Builder - ASSET -->. These are the js library like jquery, jqueryUI, placeholder, and etc. These should only exist ONCE on a page (will get errors if multiple jqueries exist). 

The second part is <!-- Hello Form # - ASSET -->. These are the css, process of your form.

If you are going to embed two forms or more to your page, it is just the same as embedding single form but you paste the first part of step 1 ONLY ONCE.

Example of Multiple Forms on same page.

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width" />    

    <!-- Hello Form Builder - ASSET -->
    <link type="text/css" rel="stylesheet" href="http://example.com/helloform/css/jquerytheme.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/i18n/jquery-ui-i18n.min.js"></script>
    <script type="text/javascript" src="http://example.com/helloform/js/placeholders.min.js"></script>
    <script type="text/javascript" src="http://example.com/helloform/js/jquery.form.js"></script>

    <!-- Hello Form 1 - ASSET -->
    <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" href="http://example.com/helloform/forms/1/main.css" />
    <script type="text/javascript" src="http://example.com/helloform/forms/1/main.js"></script>
    
    <!-- Hello Form 2 - ASSET -->
    <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" href="http://example.com/helloform/forms/2/main.css" />
    <script type="text/javascript" src="http://example.com/helloform/forms/2/main.js"></script>
    
    <style type="text/css">
    .col {
        vertical-align: top;
        display:inline-block;
        width:49%;
    }
    @media only screen and (min-width: 0px) and (max-width: 800px) {
        .col {
            width:100%;
            margin-bottom: 10px;
        }
    }
    </style>
</head>
<body>

    <div class="col">
        <!-- Display Hello Form 1 -->
        <script id="hfbscript_1" src="http://example.com/helloform/forms/1/formjs.js"></script>
    </div>

    
    <div class="col">
        <!-- Display Hello Form 2 -->
        <script id="hfbscript_2" src="http://example.com/helloform/forms/2/formjs.js"></script>
    </div>

</body>
</html>

You can style your email message that you will receive or autoreply message in "Form Config".

Lets assume that our contact form is designed like below (we use one of the template "Basic Form - No Label"):

By default, message body use default variable "Form Data" which holds all form elements data with default style.

But now, lets not use default variable "Form Data" instead we will customize our message body with Form Element Variables combining with HTML tags. See the example below:

That's it!

Create your own email message style with HTML tags!

Sometimes you would like to test the item first before deploying it on a live server.

Hello Form Builder regular license permits you to use this on one website or domain only. So you are not allowed to install this from one domain (test server) to another domain (client server).

If you are a developer and want to test it on your server, we recommend to use your own PC as your server (localhost or 127.0.0.1). There are a lot of tools out there like WAMP, LAMP, XAMP and etc. I use WAMP as my local test server.

Version 1.1.1 - May 20, 2015

Bug Fixed::

• Installation PHP version checker (wrong value)
• Sometimes the form is not showing or working when website is accessed with "www".

Version 1.1 - April 16, 2015

New Features:

• Form Header
• Global Config Button in "Form Design"
• New Templates

Improved/Changes:

• Embed Code implementation is changed
• Admin and Builder css improved

Version 1.0 - April 1, 2015

First release

The Regular License permits you to use Hello Form Builder in one website, but you can create as many forms as you want on that website. If you want to use Hello Form Builder on another website, you need to purchase additional regular license for that.

Once again, thank you so much for purchasing Hello Form Builder. I'd be glad to help you if you have any questions relating to this product. I'll do my best to assist you.

If you have more general questions relating to the Hello Form Builder on Codecanyon, feel free to ask us.