Download 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
1.0
2.0
3.0
4.0
5.0
Table of Contents
Introduction
Manage Forms
Manage Fields
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
View Reports
5.1 Viewing your records
5.2 Exporting your records
5.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.
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.
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.
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.
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).
Figure 4-2
Figure 4-3
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="http://www.yourdomain.com/thankyou.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:
<input type="hidden" name="redirectUrl"
value="http://www.yourdomain.com/thanks.asp">
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.
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).
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
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.