How to create a basic contact form

In this How To you will learn how to use the form creation features in KTML to build a basic contact form. The page you will build within the KTML editor will allow a visitor enter a name, e-mail and message in text fields, select the region of residence with a drop-down menu and pick a comment type using a radio group. The page will then submit to a page that sends all of the information by e-mail to a predefined address.

To follow this tutorial you need:

1. A page that displays content edited with KTML.

2. A page that uses the KTML editor as replacement for a text area. Learn how to create such a page here.

3. The e-mail sending script.

4. A web server running an application server where to place the files above.

This simple application uses three pages:

• index - this page displays content created with KTML.

• edit - this page contains an instance of the KTML editor.

• send_mail - simple e-mail sending script.

To create these files quickly, you can use the files provided in the downloaded package in the tutorials\how_to_s\contact_form folder specific for your particular server model.

The contact form will be created completely in KTML, and will contain the following elements:

• The Name field set which will contain two text fields: First name and Last name.

• A drop-down menu which allows selecting the region of origin. Its options are static: Western Europe, Central Europe, Eastern Europe, North America, South-East Asia, Other.

• A text field to insert the sender's e-mail address

• A radio group to select the comment type, with three (3) choices: Suggestion/Question/Complaint.

• A text area where the user will enter its comments.

The form will submit to the send_mail page in the same folder. The field names will be explained later on, when each of them is created.

To create the form you have to:

1. In the application's first page - index- click on the Edit content link to access the editor.
2. The first element to add is the main form tag. You can add one from the Forms toolbar, by clicking on its icon - the first one:
   
   
3. The form is an invisible element, and will be represented in the KTML editing area by a red dotted border.
   
   
4. To set the form properties you have to use the Form Property Inspector. To display it, click inside the red border. Configure the form properties:
5. • In the Name text field enter a name for the form element. The name must be unique on page. Enter contactForm.
   • In the Action text field enter the path to the page that will process the form input. Enter send_mail.xxx.
     Note: Replace xxx with the file extension required by your server model.
   • Leave the Method at its default value - POST.
   • In the Target drop-down menu select the _self option. This will load the action page in the same browser window.
     
     
5. Next you have to add the form elements. First are the sender's first and last name. To visually group these two elements, they will be added inside a fieldset. To add a fieldset, click its icon in the Forms toolbar:
   
   
6. The fieldset will be inserted into the page with a default legend text. The Property Inspector is displayed after inserting an element, so you can change its properties. In the Legend text field of the user interface enter Name:
   
   
7. When you press Enter/Return in the Property Inspector field, or click on the editable area, the changes are applied, and the fieldset legend is updated:
   
   
8. Within the fieldset you will add two text fields: one for the first name, and one for the last name. To arrange them in a suitable fashion, you will place each of the fields in a table cell. To insert a table click inside the fieldset, then click on the table down arrow. Select a one row, two column table layout:
   
   
9. Place the mouse cursor in the first table cell and type: First name. Then press Shift+Enter/Return to create a line break:
   
   
10. From the Forms toolbar insert a text field by clicking on the corresponding icon:
    
    
11. In the Property Inspector that is displayed after inserting the text field change the Name to firstName:
    
    

12. In the second table cell type Last name, then press Shift+Enter/Return to create a line break. Then, from the Forms toolbar insert a text field:
    
    
     

13. In the Text Field Property Inspector that is displayed when inserting the second field change the Name to lastName:
    
    
     

14. Click below the fieldset to continue adding fields. Next is the drop-down with the regions. Create a new line below the fieldset and  type: Region where you live. Press Shift+Enter to create a new line break afterwards.
    
    
    
    Note: Make sure you are still within the form's red dotted border.

15. From the Forms toolbar add a drop-down menu.
    
    
     

16. In the List/Menu Property Inspector, in the Name text field enter region. Then press the List Values button to add items to the menu:
    
    
     

17. In the List / Menu Options Editor window you can define the menu items, as pairs of labels and values. To add a new item:

18. • Click the Plus(+) button. The Item label and Item value text fields will be enabled.
      
      
       

    • In the Item label text field enter the text to be displayed in the menu. For the first entry type Western Europe.

    • In the Item value text field enter what the menu will pass to the processing page for the selected entry. For this sample you will use the same text as for the label: Western Europe.
      
      
      
      Note: As you enter the value, it is copied in the menu items list.

18. Repeat the actions in step 17 to add some more items to the menu. Use the following for both label and value: Central Europe, Eastern Europe, North America, South-East Asia, Other. The completed menu structure is:
    
    
     

19. Click OK to close the interface and return in the KTML editable area. Press Enter/Return to create a new paragraph after the drop-down menu. For the label enter E-mail address. Then press Shift+Enter to create a new line break.

20. From the Forms toolbar add a new text field. In the Text Field Property Inspector set its name to emailAddress.
    
    
     

21. Place the mouse cursor after the e-mail text field and press Enter/Return to create a new paragraph. Type Type of comment, and create a new line break. The user will be able to select one of the possible comment types - suggestion, question, complaint - using a radio group. To create the radio group you have to add each radio button at a time, using the same name for all of them. From the Forms toolbar, click the Radio Button icon:
    
    
     

22. In the Radio Button Property Inspector that is displayed enter in the Name field commentType. This name will be used for all three radio buttons. In the Value text field enter the value passed by the button to the processing page. For this sample you will use the label as value.
    
    
     

23. Place the mouse cursor next to the radio button and enter the label - Suggestion:
    
    
     

24. Repeat steps 21-23 and add two more radio buttons. Use the same name, but for the value and label use the remaining options: question and complaint:
    
    
     

25. Next create a new paragraph for the comment textarea. First enter the label - Comment, then create a new line break. From the Forms toolbar add a Text Area element by clicking on its icon:
    
    
     

26. In the Name field of the Property Inspector enter comment.
    
    
     

27. Create a new paragraph after the text area and add a submit button from the Forms toolbar:
    
    
     

28. Configure the button using the Property Inspector displayed when selecting the button:

29. • In the Name field enter submit.

    • In the Label field enter Send e-mail.

    • In the Action area select the Submit form radio button.
      
      
       

29. With this last element the contact form is completed, and you can test it. If you used any other names for the fields you have to edit the e-mail sending script and replace the default ones with your particular values. To save the form, click the submit button on the edit page. The form will be displayed on the index:
    
    
     

The send_mail file contains a simple script that reads the form field content - for the field names specified in the code above - and sends a message to an address you must configure. The line that defines the e-mail address is on top of the file, and by default uses the nobody@nobody.com address. Replace this with the address you want to receive messages on - e.g. contact@domain.org:

Note: The code line above is for the ASP.Net version of the script. For other version the syntax is different.

If using ASP.Net you must check that no other form - e.g. the default form added by Visual Studio for web form pages - exist on page. If it does, remove it to get the e-mail functionality.

If you fill in the form and click the Send e-mail button, a message will be delivered containing all fields from the form: