Nano Servers Inc

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. The Form Creator tool is available for all of our Shared Hosting plans in MyCP.

Overview of the steps needed to create a form.

Click on New Page to add a new page.
Set the pages properties and click on the Done button.
Edit the page using our online WYSWYG tool.
Get the pages URL or the HTML code.
Link to the URL or upload the HTML code onto your web server.
Your client can visit the URL or the HTML page you have created and 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 changing the forms properties.

Managing Forms:

You can add/edit/delete a form and list the forms you have plus easily find the Forms URL or the HTML code.

To add a new Form:

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: 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 on 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: Its 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 customers 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.

List All Forms:

From the Left Navigate Menu -> Webeasy -> List
Here all your feedback forms will be listed when you click on the List link. The forms basic information, such as: form name, numbers of feedback forms and also the types of feedback forms will be listed here.

Edit a Forms Properties:

From the Left Navigate Menu -> Webeasy -> List
Select the page you wish to edit and click on the Edit link. You will find a form similar to the New Page form. After you have changed the properties, click on the Done button to save your changes.

Get Forms URL & HTML Code:

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 the URL link. You will find a page with the URL and your forms raw HTML code. Just copy the URL or the HTML code and put it anywhere you like.

nn n

Edit Forms:

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.

Page Properties:

Click on Page Properties in order to get a form with multiple fields in order to change the Forms 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: Sets the background color for the document body.

Text: Sets the foreground color for text.

Hyperlink: Sets the color of text marking unvisited hypertext links.

Visited hyperlink: Sets the color of text marking visited hypertext links

Active hyperlink: 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 pages top margin

Left margin: This is the pages 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 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.

Table Properties:

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 pages layout by editing this table.

Alignment: This is the horizontal alignment of the table.

Float: Moves the table to the existing left margin or right margin of the page.

Cell padding: 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: 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: 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: Supplies the browser with a recommended cell height.

Border Size: 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: 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.

Page Preview:

Click on Page Preview and you can preview the page you have created.

Managing A Row:

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.

Managing A Column:

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.

Managing A Container (cell):

Every container has an ICON at the left of the container. Click on it then you can edit the containers 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: 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: 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.

Managing Form Elements:

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. that you wish to add to your form. You can set the fonts type, color, size and effects. 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 images real size is. If you want to use the images 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: Its 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 elements 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 menus height. It is in pixels only and depends on how many lines the menu has.
Allow multiple selections: If its 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 its 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: Thats what the user views in their browser.
Selected: If its 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.

View feedback forms:

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 dependent on the configuration you set for the page. If it is to be sent by E-mail, then you cannot view it online. The responses will go directly to your mailbox. In myCP, we only count the total responses you received.

If its 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 forms 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.

For Advanced Users:

It is also possible to create a basic form with Form Creator and then copy the HTML code into the HTML editor of your choice. As long as the unique code generated by Form Creator is unaltered, the form can be modified in any HTML editor and uploaded to your website.

How do I use Form Creator?