Collecting data from your website visitors? Any website owner will understand the importance of data their customers provide. It can be as simple as feedback form or contact-us page and it can be as complex as survey forms, lead generations, interest groups, bio-data forms, business forms, meeting planners, meeting invitations, office inventory or employee satisfaction survey forms. The list is endless and requirements are different for each and every website. Only acquiring data is not enough. One needs to do data analysis and reporting, sharing, creating rules etc to gain knowledge out of data so that important decisions can be made and actions taken. The all-in-one solution to all this nitty-gritty of building and using web forms is Zoho html form builder. Zoho provides easy to use drag-and-drop form builder to create html forms. You can embed these forms in website or blog, get email notifications, do data analysis and reporting, data sharing, collaboration and lots more stuff. Zoho has two distinct features which even Google Forms does not provide – CAPTCHA and File upload. So let’s see in detail how to create Zoho web forms, embed them and use the data collections.
Simple Drag and Drop Design
You can build forms in several ways. You may use templates that are already designed for specific uses. You may drag and drop individual fields into a blank form to design your own unique form. You can also drag and drop fields into an existing template. Finally, you can import an excel file and let Zoho build a database-driven form based on the labels in the Excel file’s first row.
You can drag and drop numeric fields into your form. User input is carefully validated. For instance, the “123 number” field requires that the user enters an integer. If the user tries to enter 1.234 into the field, he will be prompted with a message to round off the number to zero decimal places. Dollar fields and percentage fields check that the user has not entered the dollar sign or percentage symbol. Many possible typing errors are checked and results in a prompt for user correction.
Zoho includes some advanced fields including “File upload”, “Formula”, “Lookup”, and “Zoho CRM”. These are not available with some forms creators. Two distinct features of Zoho Creator is not even provided by it’s close competitor Google Forms – File Upload and CAPTCHA support.
Embedding Forms in your Website
Any form that you design with Zoho Creator can be directly embedded into your own website. You need to be able to edit the source code of the page you want to place the code into. The code is a simple iframe that is very easy to use. The iframe code contains the URL of your Zoho form. The HTML iframe tag is often used to include remote webpages into a site. You copy this code for any of your forms and paste it into the BODY of your own site’s page. You can use the form from your site right away. If you are using PHP, the code can be included on every page of your site with little work.
Example: Keeping track of a Phone Store’s inventory
This simple example allows you to build a database for your Phone Store. You will need an excel spreadsheet that contains the labels in the first row. Each succeeding row should consist of product data. The sample data used is shown below as a CSV file. Zoho will quickly build your form based on the first row labels.
“HTC Sensation Z710E”,$609.95,12
“iPod Touch 4G 32GB”,$299.95,7
“iPhone 4 16GB”,$539.95,5
“HTC Magic Android”,$199.95,10
From your home screen click on “Create Application”. You will be asked how you want to create your application. There are four tabs: “From Scratch”, “Import XLS, CSV”, “Import MDB”, and “Browse Gallery”. The quickest way to get a functioning database started is by uploading an XLS file of your Phones Store’s inventory. Click on the “Import XLS, CSV” tab.
Type in “Phone Store Inventory” for the application name. Then click on the “Import Local Data” radio button. Now browse for a file that contains your inventory data. In this case, it is “inventory.xls”. Click on the “Create Now” button. Zoho will automatically use the first row of your data as labels. A display of the data will be presented. At this point, you may edit the labels or change their data type. If everything looks right, click on “Finish”.
Click on the green “Access this Application” button in the upper right. You will now have a functional Phone Store Inventory Form that can be immediately used to add or delete products from your database. Try adding a new product to test the application.
After you add something to the database, you can check it by clicking on “Phone Store Inventory Form View” at the left side of the page. You will see a complete listing of the items in the database. In this form view, you can search through the database for a keyword in a product, a particular price, or the number of available units.
Mouse over the “More Actions” menu on your Inventory Form or View and select “Embed in your Website”. Since this example allows direct access to your inventory, you should copy the code that requires a login. The HTML code for placing the form or view into your site can be copied and pasted directly into your existing site’s code. You will have the same functionality on your own website as you did at Zoho.
Example: Create a Software Sharing site using the Upload Field
This example creates an unique form for uploading free software. From your home screen click “Create Application” again. This time on the “From Scratch” tab, do not click on any of the pre-existing forms. Do not even click on the blank one. It is already selected. Type “Software Sharing App” for the name of the application and type “Software Sharing Upload” for the name of the form. Click on “Create Now”.
You will now have a blank form to work with. First, you will need to click on the “Single Line” field and drag it onto your form. Name this first field as “Title”. Click on “Options”. Place a check-mark by “This is a required field” then click “Done”. You will see a red asterisk in this field.
Drag and drop a “Dropdown” field below the Title. Name this “Operating System”. Edit the three choices. Change “Option 1″ to “Windows”, “Option 2″ to “Macintosh”, and “Option 3″ to “Mobile”. Make this a required field again using the “Options” menu and click “Done”.
Drag and drop a “Multi Line” field just below the Operating System field. You can adjust the width of this field by clicking on “Options” and entering a different value for the width in pixels. Be sure to make this a required field because no one wants to download something if they do not know what it is.
Finally drag and drop the “File upload” field to the bottom of your form. Rename it as “Upload”. Make sure it is a required field and put a check-mark by “Local Computer”. Click “Done” and you should see the finished form similar to the following.
Example: Making a Feedback form with CAPTCHA support
Click “Create Application” from your home screen. On the “From Scratch” tab, click on the Feedback template. Click on “Create application with this form”. Name it “Customer Feedback” and click “OK”. On your forms view page, mouse over “More Actions” and select “Form Properties”. Put a check-mark by “Need Verification Code” and click “Done”. Click on “Access this Application” in the command bar at top of the page. You will see the active form now. Enter your email, select the comment category, and type in a short comment. Carefully enter the verification code and click on “Submit”. Once the entry is added, you can view it by clicking on “Feedback View” on the left side of the page. As before, you can get the code for the feedback form and view by mousing over “More Actions” and selecting “Embed in your Website”.
To conclude, Zoho Creator is great tool for website and blog owners to create web forms, embed them, collect data from users and analyze them in the most easiest manner. Using Zoho Creator is definitely a better way than building Html forms by hand. So use Zoho Form Builder and check out it’s features yourself.