How to Add a Form With KompoZer

Add A Form With KompoZer

Jon Morin

There are many times when you are creating web pages where you need to process input submitted by the user such as a login page, new account creation, or to submit questions or comments. User input is collected and sent to the web server using an HTML form. Forms are easy to add with KompoZer’s built-in tools. All of the form field types that HTML 4.0 supports can be added and edited with KompoZer, but for this tutorial, we will work with the text, text area, submit and reset buttons.

Create a New Form

Create A New Form With KompoZer

Jon Morin

KompoZer has rich form tools that you can use to add forms to your web pages. You access the form tools by clicking on Form button or the accompanying drop-down menu on the toolbar. Note that if you don’t write your own ​form handling scripts, you will need to get some information for this step from documentation or from the programmer who wrote the script. You can also use mailto forms but they don’t always work.

  1. Position your cursor in the location that you wish your form to appear on the page.
  2. Click the Form button on the toolbar. The Form Properties dialog box opens.
  3. Add a name for the form. The name is used in the automatically generated HTML code to identify the form and is required. You also need to save your page before you can add a form. If you are working with a new, unsaved page, KompoZer will prompt you to save.
  4. Add the URL to the script that will process the form data in the Action URL field. Form handlers are usually scripts written in PHP or similar server-side language. Without this information, your web page will not be able to do anything with the data entered by the user. KompoZer will prompt you to enter the URL for the form handler if you don’t enter it.
  5. Select the Method used to submit the form data to the server. The two choices are GET and POST. You will need to know which method the script requires.
  6. Click OK and the form is added to your page.

Add a Text Field to a Form

Add A Text Field To A Form With KompoZer

Jon Morin

Once you have added a form to a page with KompoZer, the form will be outlined on the page in a light blue dashed line. You add your form fields inside this area. You can also type in text or add images, just like you would on any other part of the page. Text is useful to add prompts or labels to form fields to guide the user.

  1. Choose where you want to the text field to go in the outlined form area. If you want to add a label, you may want to type the text in first.
  2. Click the down arrow next to the Form button on the toolbar and choose Form Field from the drop-down menu.
  3. The Form Field Properties window will open. To add a text field, choose Text from the drop-down menu labeled Field Type.
  4. Give a name to the text field. The name is used to identify the field in the HTML code and the form handling script needs the name to process the data. A number of other optional attributes can be modified on this dialog by toggling the More Properties/Fewer Properties button or by pressing the Advanced Edit button, but for now, we will just enter the field name.​
  5. Click OK and the text field appears on the page.

Add a Text Area to a Form

Add A Text Area To A Form With KompoZer

Jon Morin

Sometimes, a lot of text needs to be entered on a form, such as a message or a questions/comments field. In this case, a text field is just not appropriate. You can add a text area form field using the form tools.

  1. Position your cursor within the form outline where you would like your text area to be. If you want to type in a label, it’s often a good idea to type the label text, hit enter to move to a new line, then add the form field, since the size of the text area on the page makes it awkward for the label to be on the left or right.
  2. Click the down arrow next to the Form button on the toolbar and choose Text Area from the drop-down menu. The Text Area Properties window will open.
  3. Enter a name for the text area field. The name identifies the field in the HTML code and is used by the form handling script to process the user-submitted information.
  4. Enter the number of rows and columns that you want the text area to display. These dimensions determine the size of the field on the page and how much text can be entered into the field before scrolling needs to happen.
  5. More advanced options can be specified with the other controls in this window, but for now, the field name and dimensions are enough.
  6. Click OK and the text area appears on the form.

Add a Submit and Reset Button to a Form

Add A Submit and Reset Button To A Form With KompoZer

Jon Morin

After the user has filled out the form on your page, there needs to be some way for the information to be submitted to the server. Additionally, if the user wants to start over or makes a mistake, it is helpful to include a control that will reset all of the form values to the default. Special form controls handle these functions, called the Submit and Reset buttons respectively.

  1. Place your cursor within the outlined form area where you wish the submit or reset button to be. Most often, these will be located below the rest of the fields on a form.
  2. Click the down arrow next to the Form button on the toolbar and choose Define Button from the drop-down menu. The Button Properties window will appear.
  3. Choose the type of button from the drop-down menu labeled Type. Your choices are Submit, Reset, and Button. In this case, we will choose the Submit type.
  4. Give a name to the button, which will be used in the HTML and form handling code to process the form request. Web developers typically name this field “submit.”
  5. In the box labeled Value, enter the text that should appear on the button. The text should be short but descriptive of what will happen when the button is pressed. Something like “Submit,” “Submit Form,” or “Send” are good examples.
  6. Click OK and the button appears on the form.

The Reset button can be added to the form using the same process, but choose Reset from the Type field instead of Submit.

Editing a Form With KompoZer

Editing A Form With KompoZer

Jon Morin

Editing a form or form field in KompoZer is very easy. Simply double-click on the field that you wish to edit, and the appropriate dialog box appears where you can change the field properties to suit your needs. The diagram above shows a simple form using the components covered in this tutorial.