The Form creator is a tool for those
who wish to collect Feedback from their clients. You can create
a form using this tool without any scripting knowledge.
Overview of the steps needed to create a form.
Click on New Page to add a new page.
Set the page's properties and click on the Done
button.
Edit the page using our online WYSWYG tool.
Get the page's URL or the HTML code.
Put the URL or HTML code onto your web server.
Your client can visit the URL or the HTML page you
have created in order to send Feedback to you.
Your Customer Feedback pages are either written
to a file on our system or can be sent to your e-mail
account. You can control where the feedback forms
go by change the form's properties.
From the Left Navigate Menu ->
Webeasy -> New Page Page
Name: Contact Us Feedback
Type: E-mail E-mail:
myE-mail@mydomain.com Return
URL: http://mydomain.com/thankyou.html Rows:
2 Columns: 2
Click on Done
Page
Name: This is simply the title of your feedback form. Feedback Type: It defines
where the feedback form will be sent.
If you check E-mail,
then the feedback from your customers will be mailed to your
E-mail account.
If you check Text,
the feedback will be stored in your web server and you can access
them in the myCP® Form
Creator area. E-mail:
E-mail is your E-mail account where you want to receive feedback
from your customer. If the feedback type is text, you can ignore
this field. Return URL:
It's an optional parameter. If you provide a return URL, visitors
will be redirected to this URL after they submit their feedback.
The example here will create a new form called "Contact
Us". The Feedback type is E-mail and customer's feedback
will be mailed to MyE-mail@mydomain.com. After the customers
submit their data, they will be redirected to the page: http://mydomain.com/thankyou.html.
The initial form will have two rows and two columns to hold
your form fields.
From the Left Navigate Menu ->
Webeasy -> List
Here all your feedback forms will be listed when you clicked
on the List link. The form's
basic information, such as: form name, numbers of feedback forms
and also the types of feedback forms will be listed here.
From the Left Navigate Menu ->
Webeasy -> List
Select the page you wish to edit and click on Edit
link. You will find a form similar to New
Page form. After you changed the properties, click on
Done button to save your
changes.
Here you will find where your
Forms are located and how to access them.
From the Left Navigate Menu ->
Webeasy -> List
Find the appropriate form and click on URL
link. You will find a page with the URL and your form's raw
HTML code. Just copy the URL or the HTML code and put it any
where you like.
When you have added a new form page
you will find that there is no data in it. You will need to
edit the page and add the necessary content required. First,
find the page in the page list, click on the page name and a
new window will pop up. It is here that you can start to work
on the page.
Click on Page
Properties in order to get
a form with multiple fields for changing the Form's attributes.
Note that these properties are optional and intended to enhance
the look and feel of your form.
Title: This is the
title of your page. Background:
This attribute sets the background color for the
document body. Text:
This attribute sets the foreground color for text. Hyperlink: This attribute
sets the color of text marking unvisited
hypertext links. Visited
hyperlink: This attribute sets the color of text
marking visited hypertext links
Active hyperlink: This attribute sets the color of text
marking hypertext links when selected by the user Background Picture:
The value of this attribute is a URL that designates an
image resource. This generally tiles the background. Top margin: This is
the page's top margin Left
margin: This is the page's left margin.
For the
other elements such as Meta, Language and Special Properties,
you will find a description at http://www.w3.org.
These are special features and you may not want to use unless
you are very familiar with them.
After you finish making the necessary changes, click on the
Done
button to save your changes. If you do not want to change the
page, click on the Return
link.
Click on Table
Properties to change the
Table Properties of your form. Since the content of the page
is inside the table, you can change your page's layout by editing
this table.
Alignment:
This is the horizontal alignment of the table.
Float: This moves the
table to the existing left margin or right margin of the
page.
Cell padding:
This attribute specifies the amount of space between the
border of the cell and its contents. If the value of this
attribute is a pixel length, all four margins should be
this distance from the contents. If the value of the attribute
is a percentage length, the top and bottom margins should
be equally separated from the content based on a percentage
of the available vertical space, and the left and right
margins should be equally separated from the content based
on a percentage of the available horizontal space.
Cell spacing:
This attribute specifies how much space between the left
side of the table and the left-hand side of the leftmost
column, the top of the table and the top side of the topmost
row, and so on for the right side and bottom of the table.
This attribute also specifies the amount of space between
cells (containers).
Specify
width: This attribute specifies the desired width
of the entire table. When the value is a percentage value,
the value is relative to the browser available horizontal
space. In the absence of any width specification, table
width is determined by the browser.
Specify
height: This attribute supplies the browser with
a recommended cell height.
Border
Size: This attribute specifies the width (in pixels
only) of the frame around a table.
Border Color, Light border and Dark border: The
color of table border.
Background
Color: This attribute sets the background color
for the table.
Background
Picture: The value of this attribute is a URL that
designates an image resource. The image generally tiles
the background of the table.
Every
row has an ICON at the right of the row. Click on it and you
can edit the properties of the row. You can add new rows or
delete rows.
To Edit the row:
General properties are: Border
Colors, Background
Color and Background
Picture. There are two additional properties:
Horizontal Alignment:
This attribute specifies the alignment of data and the
justification of text inside a cell. Possible values:
Left:
Left-flush data/Left-justify text. This is the
default value for table data.
Center:
Center data/Center-justify text. This is the
default value for table headers.
Right:
Right-flush data/Right-justify text.
Justify:
Double-justify text.
Vertical Alignment:
This attribute specifies the vertical position of data
within a cell. Possible values:
Top:
Cell data is flush with the top of the cell.
Middle:
Cell data is centered vertically within the
cell. This is the default value.
Bottom:
Cell data is flush with the bottom of the cell.
Baseline:
All cells in the same row as a cell whose vertical
alignment attribute has this value should have
their text data positioned so that the first
text line occurs on a baseline common to all
cells in the row. This constraint does not apply
to subsequent text lines in these cells.
After you are finished, click on the Done
button to save your changes.
To add new rows: Number of Rows: The
number of rows you wish to add. Location:
The location of the new row. If you select Above
selection, new rows will be added above your current
row. If you select Below selection, new rows will be added
below your current row.
Click on the Insert
button when you are done.
To delete the row:
Click on the Delete
button to remove the row and all containers/contents in
the row.
Every column has an ICON at the top
of the column. A column has no properties, You can only Insert
new columns or Delete existing columns.
To Insert new columns: Number
of Columns: Select the number of columns you wish
to add. Location:
The location of the new column. If you select Left
of selection, the new columns will be added to
the left of your current column. If you select Right
of selection, the new columns will be added to
the right of your current column.
Click on the Insert
button when you are finished.
To Delete the column:
Click on the Delete
button to remove the column and all containers/contents
in that column.
Every container has an ICON at the
left of the container. Click on it then you can edit the container's
properties, merge the container with other container, add new
containers or delete it.
To edit a container(cell):
The alignments, width, and height are self explanatory
and have been discussed. Other properties include:
Rows spanned:
This attribute specifies the number of rows spanned
by the current cell so that the cell can have the
height of the number of rows you specify.
Columns spanned:
This attribute specifies the number of clumns spanned
by the current cell so that the cell can have the
width of the number of columns you specify.
Header Cell:
The font in the container will automatically become
bold. Technically, the HTML code <TD> will
become <TH>.
No wrap: When
checked, this attribute instructs the browser to
disable automatic text wrapping for this container.
To Merge containers(cells):
The Merge Cells
capability will only appear when there is more than
one container in the row. There are two possible
selections: Merge
With Right No. of Cells and Merge
With Left No. of Cells.
The container will merge with the other containers
you selected. They will become one container and
all contents in those containers will be in the
new container with the order from left container
to right container.
To Insert containers (cells):
You can add new containers to left or right of
your current container. After you select the number
and check the location, click on the Insert
button to add them.
To Delete the container (cell):
Click on the Delete
button to delete the container. All contents in
the container will be deleted also.
In every container, there are two ICONs
. Click on the + ICON on the right to add a new form element
at that location. Click the left ICON to edit that element.
To add a new form element:
First, find the location where you want to add the element.
Click on the ICON. There will be a page with a list of
elements you can add. They are: Text, Image, One-Line
Text, Button, Check Box, Radio Box, Picture Box, Drop-Down
Menu and Scrolling Text Box. After you determined what
type of element you wish to add -- select it and click
on the Done button.
To Add/Edit a Text element:
Text element refers to titles, captions, labels etc.
you wish to add to your form. You can set the font's type,
color, size and effects the text. When you have set the
properties and entered the appropriate sentences, click
on the Done button to Add/Edit the Text Field.
To Add/Edit an Image element:
Image element is an image you want to put in your page.
First, you need to upload an image to your web site and
copy the URL of the image. Then enter the corresponding
URL to the image here. You can also use an image from
a URL elsewhere.
Picture
source: This is the URL to the image you uploaded.
Alternative Text:
Enter text that will display in place of the original
image - for example, a caption or a brief description
of the image. It is a good design practice to specify
alternative text for those viewers who use text-only web
browsers or who have image loading turned off.
Alignment: If you have
placed an image next to any text, select an alignment
to indicate how you want that text positioned relative
to the image.
Border
thickness: You can put a solid black border around
the image and specify its width in pixels. Specify zero
for no border.
Horizontal
spacing & Vertical spacing: Specify the amount
of space surrounding the image, between the image and
adjoining text.
Width
& Height: You can specify the width of the image
no matter how large the image's real size is. If you want
to use the image's real size, leave it blank.
To Add/Edit an One-Line
Text Box element
One-Line Text Box is a single-line text input control.
Name: the title
of the One-Line Text Box, example: phone, age and comments.
Please use alpha-numeric only. You can not use special
characters here.
Initial
Value: The value you wish to appear in the input
field. Normally, you should leave this blank.
Text Box Type: There
are three possible values.
Normal:
Creates a single-line text input control.
Password:
The input text is rendered in such a way as to hide the
characters to protect sensitive information.
Hidden: It's not rendered
but its value is submitted with the form.
Width
in characters: The width of the box - for displaying
purposes. This does not restrict the length of the input
data.
Text Maximum
length: The maximum text length user can input
in the box.
Click on the Done button
when you are finished.
To Add/Edit a Button element:
There are three types of button you can add:
Push button: Push buttons
have no default behavior. Each push button may have client-side
scripts associated with the element's event attributes.
When an event occurs (e.g., the user presses the button,
releases it, etc.), the associated script is triggered.
Submit button:
When activated, a submit button submits a form. A form
may contain more than one submit button.
Reset
button: When activated, a reset button resets all
controls to their initial values. If a visitor has decided
to clear the inputs and redo them, this button can be
used for that purpose.
To Add/Edit a check Box
Element:
Checkboxes are on/off switches that may be toggled by
user.
Name:
Several checkboxes in a form may share the same control
name. Thus, for example, checkboxes allow users to select
several values for the same property. If so, the control
name should like: yourcontrolname[].
Initial
Value: The value which will be sent if the switch
is checked. The default value is on if you leave it blank.
Initial state:
You can decide the initial state for the check box.
To Add/Edit a Radio Box
Element:
Radio buttons are like checkboxes except that when several
share the same control name, they are mutually exclusive
so that when one is switched "on", all others
with the same name are switched "off". If no
radio button in a set sharing the same control name is
initially "on", user agent behavior for choosing
which control is initially "on" will be undefined.
To Add/Edit a Picture Button
Element:
You can use an image for the Submit button. First, upload
an image to your server and then, input the URL to the
Picture source field. Its properties are the same as the
Picture Element. The only difference is that the image
is clickable. When the user clicks on it; it is the same
as when a user clicks on the Submit button - data is be
sent after the user clicks on it.
To Add/Edit a Drop-Down
Menu Element:
A Drop-Down Menu offers user options from which to choose.
Name: If there
are multiple choices, the name should have a []. For example:
myname[].
Height:
The drop-down menu's height. It is in pixels only and
depends on how many lines the menu has.
Allow multiple selections: If it's Yes, the user
can use the Ctrl or Shift key to select more than one
choice. The menu Name has to has a [] at end. If it's
No, user can select only one choice from the menu.
Options: You need
to add at least one Option. An option has four properties.
Choice Name: That's
what the user views in their browser.
Selected:
If it's checked, the choice will be selected by default.
Specify Value:
If the data sent is different from the Choice Name, please
check it and input the value.
Value:
The value sent to you. If you did not check Specify
Value, the data in it will be ignored. You can
add unlimited options however at first you may only add
6 options. If you want to add more, you can edit the element
and there will be 3 more fields for you to input. Every
time you edit the element, there will be 3 more fields
on the page.
To Add/Edit a Scrolling
Text Box Element:
The scrolling text box creates a multi-line input control.
Name: The name
of the text box.
Wrap
Type: There are three possible values.
Default - No wrapping provided. Unless your readers hit
enter, the text they type in will scroll along on one
long line. The text will be sent to the server as one
long line unless the reader hits the enter key.
Physical - It wraps the text within the text box, and
sends it to the server exactly as the reader sees it in
the text box.
Virtual - It wraps the text within the space of the text
box but sends it to the server as one long line, as if
no wrapping occurred.
Width
in characters: This is the width of the text box.
Number of lines:
This is the number of lines the text box has.
After you create a form and add it
to your homepage, you will need to check the Feedback from your
users. Where the responses go is dependant on the configuration
you set for the page. If it is to be sent by E-mail, then you
can not view it online. The responses will go directly to your
mailbox. In myCP®,
we only count the total responses you received.
If it's stored as a file in the server (Text Feedback Type)
then the data is stored in your home directory under the directory:
webeasy/Page ID. Here, Page ID is the form's ID. Also, you can
read these feedback forms from
myCP®.
First, find your page in Webeasy
->
List, if the Feedback number is larger than 0, the number
is clickable. Click on the number, then all your responses will
be listed there. The responses are sorted by the submit date.
Every response has two properties. They are the submit time
and the size of the feedback form. The submit time is clickable.
You can click on it to view the detail information of the feedback
form. If you want to delete one or more responses, check those
responses and click on Delete
Selected feedback forms.
