Form Builder User s Guide Advanced Internet Technologies, Inc. AIT Center June 12, 2004

Transcription

1 Form Builder User s Guide Advanced Internet Technologies, Inc. AIT Center June 12, 2004 Search All Your Favorite Engines from a Single Source with tybit!!! (Download Now) Revision History: This is version 1.0 of the Form Builder User s Guide. All updates to this document will be noted below. Preface: This document is the user manual for the Form builder offered by AIT. Target Audience: AIT Customers

2 Table of Contents 1.0 Introduction 2.0 Manage Forms 3.0 Manage Fields 4.0 Generate Code 4.1 Getting HTML out of the interface 4.2 Putting the Code into your page 4.3 Editing the Code 4.4 Putting the Code onto your server 5.0 View Reports 5.1 Viewing your records 5.2 Exporting your records 5.3 Clearing your records

3 Introduction The Form Builder product was created for users to generate web-based forms on the fly for their website, AND to gather then data collected from those forms. The Form Builder application not only builds the forms for you, but collects the valuable data for you to download and analyze or utilize in a way you see fit. After the login, they will see a screen that looks something like this (Figure 1-1). If you do not see this screen, you should see the Hosting Suites or Marketing Suite link on the side bar. If so, click those, and you will see the features you have enabled, which should include the Form Builder product. Figure 1-1

4 Manage Forms This section allows for the creation of web-based forms, and also to manage the forms that you may have already created. Examples of forms that may be created are a Contact form which asks for the Name, Address, and Phone number of your visitor. Or, you can use this as a simple Order form and collect product specific information. Figure 2-1 below shows both the Form Name addition section, as well as some existing forms that have already been created. To edit the name of a form, simply update the text area with the name, and click on the Edit link associated with your selection. If you wish to remove a form, simply click the Delete option on that line. A Results section at the bottom of the screen will appear and update with success messages based upon your actions of adding, editing or deleting a form. Figure 2-1

5 Manage Fields Fields are defined as sections where a user visiting a website can input data. This data can be anything from a name to a number of products that someone is interested in. For example a First Name and Last Name may be necessary for an Order Form, but maybe for a contact form, you just need a Name field. To add form fields, a Form Name must be selected. Thus, you can not add fields without first going to the Manage Forms option and creating a form. Fields are added, you can begin to change the Sort Order of the fields. For example, if you want the form to read Name then Address then Phone Number, the Phone Number field would have a sort order of 3. Fields can be edited or deleted at the bottom under the Manage Fields option. Figure 3-1 below shows an example of a form created called Contact and having 3 fields named First Name, Last Name and . Figure 3-1

6 Generate Code This option generates the HTML code for the form selected in the dropdown menu. To use the feature, select a form you ve created from the dropdown menu. In the text area below, HTML code will pop up. This code can be copied and pasted into your HTML, ASP or PHP documents for your website. The form includes the action, field names, and additional code necessary. Getting HTML out of the interface To get the code out of the interface, select the Form Name (as shown in Figure 4-1 below) from the dropdown menu. The HTML code will display below it. Copy all of the code in the text area, and open the HTML, ASP or PHP document that you will paste the code into. Figure 4-1

7 Putting the Code into your page To update your web page with the code, open the destination page in a simple text editor such as Notepad, VI, or WordPad. (Ensure that if you use WordPad, or Word that you save as a simple text file, and not as rich text.) Paste the HTML code into the destination page based upon where you would like the form to be located. Here is an example of the page before (Figure 4-2), during (Figure 4-3) and after the update (Figure 4-4). Figure 4-2

8 Figure 4-3

9 Figure 4-4 Editing the Code There is one major section that you will need to update inside of the HTML code that is generated. After you have copied the code from the Form Builder interface, and pasted it into page that will be used as a form, you will need to modify the following line of HTML. <input type="hidden" name="redirecturl" value=" Change the value to equal something on your website that you would like to use as the redirect after someone submits your form. For the example we will use, it will be as follows: <input type="hidden" name="redirecturl" value="

10 Putting the Code onto your server FTP (upload) these two files (header.html and footer.html) to your web hosting account. We suggest putting them inside the directory that is web accessible. Meaning, upload them to a directory that you can view in a browser. By default, this would be the /www/htdocs/ directory on an Linux hosting account with AIT, or the /www directory on a Windows hosting account with AIT. Figure 6-4 below shows how to use WS_FTP to upload them to a web accessible directory.

11 View Reports The View Reports option is very unique. This feature allows you not only to have a form on your website, and build a form quickly using this tool, but it also allows you to collect and view the data that you have collected. The data that your visitors/customers/vendors submit on the website will be gathered inside of your account, and viewable only to you via the View Reports option. Once you create a form (Manage Forms) and add fields to it (Managed Fields), you can generate the HTML code (Generate Code), and put it on your website. The form action of the HTML code posts it to the Form Builder database, which will then allow data to be stored. This eliminates the necessity to learn scripting languages, databases, or hire a database programmer to create a solution to store your data. Viewing your records Figure 5-1 below shows how data can be displayed for each form. Select the Form from the drop down menu, and the list of records will be displayed.

12 Figure 5-1

13 Exporting your records Also, all data can be downloaded. Under the View Reports section, There is the option for Export Data. When clicking on the link, the Form Builder application will provide all data via a CSV (Comma Separated Value) option. When you click the Export Data option, you will receive an option in your browser to open or save the CSV file (Figure 5-2). Figure 5-2 Save this to your desktop, or another safe location. Once saved, it can associate itself with any application that will open CSV files. In this instance, Microsoft Excel can be used. Feel free to use whatever application you are comfortable with to open this file. Figure 5-3

14 If you use Microsoft Excel to open the document, you will see something like this with columns separating each value. Figure 5-4 Clearing your records Finally, there is the ability to Clear All Records. Use this after you have downloaded data so that you can keep your account clear and you will not have issues with exceeding the number of allocated records for your account.