Email Marketing Product



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

Table of Contents

1. Introduction

2. Manage Forms

3. Manage Fields

4. Generate Code

1. Getting HTML out of the interface

2. Putting the Code into your page

3. Editing the Code

4. Putting the Code onto your server

5. View Reports

1. Viewing your records

2. Exporting your records

3. Clearing your records

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.

[pic]

Figure 1-1

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, Email 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.

[pic]

Figure 2-1

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 “Email 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 Email.

[pic]

Figure 3-1

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.

[pic]

Figure 4-1

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).

[pic]

Figure 4-2

[pic]

Figure 4-3

[pic]

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.

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:

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.

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.

[pic]

Figure 5-1

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).

[pic]

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.

[pic]

Figure 5-3

If you use Microsoft Excel to open the document, you will see something like this with columns separating each value.

[pic]

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.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download