How to work with the Contact Form Object

Best Practices > Step 4 - Pages >

How to work with the Contact Form Object

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

Double-click on a Contact Form Object that has been inserted in the page layout table, or select it and click on the button,  to open the Contact Form Object window. Here, you can specify which fields to include in your form, how data is to be submitted and collected and the style of the form.

Click to expand/collapseHow to compose an online registration form

When you're navigating in the Internet, you often come across pages where you are asked to fill in a form, that is then sent back to the site owner as an e-mail. These forms may be site registration requests, requests to access Members' Areas, or they may be used simply for market research.

Click to expand/collapse

Open the page you want to work on and insert a Text Object, which is useful for entering a title and/or an invitation to register, and then insert an Contact Form Object.
In Contact Form Object | List click on the Add... button to open the Insert Field window and select Text field: insert "Name" as the Label, set the Width (%) to 50% and select the Set as Mandatory Field option. Confirm to create your first field that asks for the visitor's name.
Repeat the procedure to insert a second Text field for the "Surname". Make sure there will be enough room in the row for the "Name" and "Surname" fields to be side by side and that the Display on the same row as the previous Field option is selected.
Use the List field for the Male/Female question, or a field in a Drop Down List or Single Choice.
When you have entered the "M/F" Label, create the list of possible replies: click on the Add button to add the "Male" and "Female" options. You can also indicate the Number of rows that are visible.
Use the Date field for the date of birth.
Choose the format for the date (with the Date Format option) so that the visitor's entry will be accepted. To make things easier for the visitor, you can select the Display 'Calendar' icon option: when the mouse is on the icon next to the field, a calendar will be displayed and the visitor can select the date from it, without having to type it.
Use a E-mail Address field for the e-mail address. Entries in this field will be checked automatically: they must have a @ character and a dot (.) in the text that follows it.
Visitors who want to register will need a password, so add a Password field, give it a Label and make it mandatory.
For greater security, you can ask the visitor to type his password a second time. Select the Request password confirmation option to create the password confirmation field, and the two passwords will be compared automatically.
At the bottom of the form, you should insert an Agreement Conditions field to display conditions of use that the visitor must agree to when he registers.
Give the field a Label and insert the Agreement Text: the Program automatically adds the "Accept" button.
To limit the amount of spam you receive, you can select the Enable 'Captcha' anti-spam filter option: a series of distorted letters and numbers are shown at the end of the form, and the visitor must copy them correctly in the space provided in order to send his form.

The Send and Reset buttons (for sending the compiled form and for deleting all the information added to the form) are added automatically by the program at the bottom of the form.

Click to expand/collapseHow to create an online form using tabs

A form that contains a lot of questions may discourage some visitors, and is less readable. You can divide the form into sections (for example, "Personal details", "Contact information", "Interests", etc. and show each section on a separate tab.

If you are using the Pro of WebSite X5, you can divide a form into sections as follows:

To create a section in a form, open the Insert Field, select Separator and give it a Label.
The Separator must be before all the other fields in the section. You can use the Move up / Move down commands in the Contact Form Object | List window to change the order of the fields.
In the sections after the first one, you can use the Display data in a new frame option for the Separator. The fields after the separators are not displayed immediately, but they appear in a new tab when the visitor presses the "Next" button (added automatically at the bottom of the form).
Click to expand/collapseHow to give more information on fields

If you think a field's label is not sufficiently clear to avoid visitors making mistakes in filling in the field, you can include a note with further details.

Click to expand/collapse

In Contact Form Object | List, double-click on the name of the field in the list to open it in the Insert Field window.
In Insert Field | Options type the Field Description. This text will appear in a note when the mouse passes over the field's icon.
If you want to change the icon for the note, use the Field Description icon file option in the Contact Form Object | Style window.
Use the options in the Tooltip on mouse over window in Step 2 - Template Settings to define the style, color and text format in the note.
Click to expand/collapseHow to collect submitted data

Data that is submitted in online forms has to be transmitted to the Site Administrator. Usually, this data is sent by e-mail. Each time a visitor fills in a form and presses the "Send" button, the data is added to an e-mail which is sent to a specific address.

In Contact Form Object | Send, set Send data by e-mail as the Data submission method.
Use the options for Data submission  to define the settings and contents of the e-mail that is sent to the Site Administrator.
Use the Sender e-mail address to indicate the sender of the e-mail as the visitor, and specify which field the e-mail address is to be taken from. This means the "Reply" command of the e-mail program can be used to reply to the visitor.
Specify the User e-mail address, which is the e-mail address where the Site Administrator will receive the e-mails, the Subject and the Message.
Select the Include the collected data in CSV format option so that the submitted data is included in the e-mail in .CSV format (so it can be read in programs such as Microsoft Excel).

With some providers, you can't set the visitor's e-mail address as the sender of the e-mail leaving the website because they block e-mails that don't have the same domain as the website they are sent from. In these cases, go to the Data Management window and select the Always use the following sender address option. Then. specify an e-mail address (for example, that has the same domain (in the example, this is http// as the website from where e-mails are being sent.

E-mails containing data submitted through online forms are created automatically by the Program. Use the options in Template Settings to define the style of these e-mails.

Click to expand/collapseHow to collect submitted data in a database

If you think your online forms will be filled in by a large number of visitors, using e-mails to collect the submitted data may not be the most convenient solution: the Site Administrator will have to spend too much time organizing submitted data and replying to the e-mails. You may prefer to have the data sent directly to a database: in this way, the data is entered automatically in the tables and is ready to be treated.

In Step 1 - Website Settings | Advanced, click on Data Management to create the list of databases linked to the current project.
Click on the Add... to open the Database Settings window and give the parameters for identifying the database.
Go back to Step 4 - Pages, select the Contact Form Object to work on and open the Contact Form Object | Send window.
Set Send data to a Database as the Data submission method.
Select the Database from the list: this list includes all the databases that have been linked to the project in Data Management.
Specify the Table Name of the database to  use.
Select the Send an e-mail to notify the data has been received option and enter the Site Administrator's e-mail address in the User e-mail address field so that he will be notified when new data arrives.

E-mails containing data submitted through online forms are created automatically by the Program. Use the options in Template Settings to define the style of these e-mails.

Click to expand/collapseHow to send automatic replies to visitors who submit forms

When a visitor fills in an online form and submits his data, he expects an acknowledgment that his data has been received: a confirmation e-mail is a way of thanking him for his time, and reassuring him that his information is being treated.

To create an automatic reply:

In Contact Form Object | Send select the Send a confirmation e-mail to the user option.
Give the e-mail of the Site Administrator in the Sender e-mail address field and specify which field in the form contains the entry for the User e-mail address (which is the e-mail of the visitor).
To complete the confirmation e-mail you must specify the Subject and write the Message.
You can also select the Include the collected data option to remind the visitor what information he gave.

It is a good idea to add a thank-you page to the e-mail, rather than just sending the recipient to the Home page.

In Step 3 - Map create a new page and add the necessary contents.
Select the Confirmation page in the website Map and click on the button so that this page is invisible during normal website navigation.
Go to Step 4 - Pages, select the Contact Form Object to work on and open the Contact Form Object | Send window.
Click on the button of the Confirmation page after sending data option to open the Map and select the Confirmation page you have prepared.

E-mails containing data submitted through online forms are created automatically by the Program. Use the options in Template Settings to define the style of these e-mails.

Click to expand/collapseHow to change the style of an online form

When you have created your form and indicated the send methods for submitted data, you can work on the style of the form to make it more attractive but also more functional, and so maybe increase the number of visitors who fill it in.

Select the Contact Form Object to work on and open the Contact Form Object | Style window.
Select the Form Item to work on (from the dropdown list or from the preview) and define the settings: text formatting, pictures and colors.
For the Labels, for example, you can set the Font Type, the Color color of the text and whether the fields are Repeat.
For the 'Send' button, you can also import a Background Image to make them more attractive.

All the changes you make are shown immediately in the preview.

When you preview your website, a message reminds you that e-mails with submitted data will not be sent. The Send E-mail Form feature only works fully when the website has been published on the Server.