Form builder is a useful tool for collecting data. In this form, we stored data into table for your further use. We also have e-mail notification when data is submitted. Follows these set up steps to have a form on your store.

 

Creating a new form

 

1. Go to Design

2. Click on Form Builder

3. Select Manage Forms

 

formbuilder1

 

4. Click on Create Form

5. Under form details, key in details

 

formbuilder12

 

6. Click on Save

 

formbuilder2

 
 
 

Adding questions to the form

 

1. Go to Design

2. Click on Form Builder

3. Select Manage Questions

 

formbuilder3

 

4. Select form name

5. Click on Add New Question

 

formbuilder4

 

6. Under Question details, put in information

 

formbuilder5

 
 

Explanation of Type and Format

 

TypeDescription
Check BoxA small box that allows user to tick or mark as the response to a question.
Drop Down ListA list box that allows user to choose one value from the list.
Option ButtonA small button that allows user to choose only one of a predefined set of options.
Text BoxA single-line text box intended to enable user to input short information.
Text AreaA multiple-line text box intended to enable user to input long information.

FormatDescriptionExample of valid input
NoneNo restriction for user input44-5, Jln 5/101C, Cheras
AlphanumericAllows user to input alphabetic and numeric characters only. (No spacing & no Uppercase)abc123
Date_ddmmyyAllows user to input calendar date. (day/month/year)16/02/2012
EmailAllows user to input e-mail addresssupport@webshaper.com
IntegersAllows user to input whole numbers0391305218
URLAllows user to input a web addresswww.webshaper.com.my

 

7. Click on Save

 
 
 

Putting form onto the website

 

1. Go to Design

2. Click on Form Builder

3. Select Manage Questions

 

formbuilder3

 

4. Select form name

5. Click on View Form

 

formbuilder15

 

6. Copy the url after your domain name

 

formbuilder17

 

7. Click on Current Design

 

formbuilder16

 

8. Click on Template Files

9. Click Edit on header.html or footer.html (depends on where you want to put)

 

formbuilder7

 

10. Press Ctrl + F to search on item you want to put it next to

11. After found the item, enter a new line

12. Put the link into the source code

13. Put <li> in front of the link and </li> at the end of the link.

14. Click on Save

 
 

Example of putting link on header

formbuilder8

 

Example of putting link on footer

formbuilder9

 

Example of form on website

formbuilder10

 

formbuilder11

 
 
 

Viewing data

 

1. Go to Design

2. Click on Form Builder

3. Select Manage Forms

 

formbuilder1

 

4. Select Manage Data from drop down list

 

formbuilder13

 

5. from there you can view your data and export

 

formbuilder14