webCommunicator
Reference Guide

Previous Page | Next Page

menubar
CLPad

Creating Forms

A Mail Form allows members/visitors to enter requested information and submit the information to a desired email account.

Click here for a sample of a mail form. Refer to this image while exploring the features below.

Form Element

The form element is a container for all form contents, which means that all form controls (for example checkboxes, text fields, or buttons) must be placed inside it. To insert the form into your document, press the toolbar button. The Form Properties dialog window that opens lets you configure basic form settings that control the form's interaction with the server.

  • Name: Name of the form.
  • Send Mail To: The email address to which you would like the information sent.
  • Send Mail From: The email address that you would like to appear in the "From" field of the email that is sent. This MUST be a valid email address in your database.
  • Message Subject: The name of your Mail form. This will be what appears in the subject title of the email that gets sent out upon submitting the form.
  • Return To Page: This is the web address of the page to which you would like the user to be redirected after submitting the form. Often, the administrator creates another page that thanks the user for the feedback/comments/time. This could be the page that the customer is redirected to after having filled out the form.
  • Verify Human: Automatic CAPTCHA.

Once you configure the form and click the OK button, the form area will be visible in the editing area as a frame with a red dotted border. Anything contained within this "box" will be part of the mail form.

 
**DO NOT DELETE ANY OF THE BOXES THAT APPEAR AT THE TOP OF THE MAIL FORM.

 
They are hidden and will not show on your page, however they are essential for the mail form to work!

Since the form element is just a container you need to add some form controls to make it usable. To do so, place the cursor inside the form frame (within the red dotted box) and use further form toolbar buttons to insert form elements.

**ALL FORM ELEMENTS MUST BE PLACED WITHIN THE RED DOTTED BOX.


Checkbox

Checkboxes are used when there are lists of options and the user may select any number of choices. Each checkbox is independent of all other checkboxes in the list.

To insert a checkbox into a document, place the cursor inside the form element and press the  toolbar button. The Checkbox Properties dialog window that will open lets you set the name and value of a checkbox as well as decide whether it should be selected by default.

  • Name: Name of the group to which the checkbox belongs.
  • Value: This is what is submitted via email if checked (for example: yes or no; a,b,c,d).
  • Selected: Select if you would like the button to appear checked by default. 

Once you configure the checkbox and click the OK button, the checkbox will be visible in editing area and you will be able to add some text that describes the checkbox option.


Radio Button

A radio button is a form element that lets you select one item from a list. Radio buttons are usually used in groups and they differ from another form element, the checkbox, in that only one item can be selected at a time.

To insert a radio button into a document, place the cursor inside the form element and press the  toolbar button. The Radio Button Properties dialog window that will open lets you set the name and value of a radio button as well as decide whether it should be selected by default.

  • Name: Name of the group to which the button belongs. To ensure that the user can only make one choice, choose a name for the group of buttons within your one question, and assign it to every button that you create within the group.
  • Value: This is what is submitted via email if checked (for example: yes or no; a,b,c,d).
  • Selected: The parameter that specifies the default state of the radio button — whether it is selected or not. Select if you would like the button to appear checked by default. It will clear if another button in the group is selected.


Text Field

A text field is a form element that lets you enter text into a single-line field (for example, name, email address, etc.).

A text field element comes in two variants: The first one lets you enter the text and see it as you type, the second is used for entering passwords and obscures the typed characters with an asterisk (*), a bullet (•), or another symbol used by the browser.

To insert a text field into a document, place the cursor inside the form element and press the  toolbar button. The Text Field Properties dialog window that will open lets you set the name, value, type, and size of a text field.

  • Name: The name of the text field element.
  • Value: The value of the text field element. This text will be visible in the text field when the form is loaded in the browser.
  • Character Width: The width of the text field specified as the number of characters that will fit in the field.
  • Maximum Characters: The limit of characters that may be entered into the text field. If omitted, the length of text that you enter into the field will be unlimited and once you exceed the size of the box, the text will scroll to the right.
  • Type: The parameter that specifies whether the form field will be used for plain text or passwords.


Textarea

A textarea is a form element that lets you enter text into a multiline, scrollable field. Textareas differ from another form element, the text field, in that they are multiline fields and thus are meant for longer entries.

To insert a textarea into a document, place the cursor inside the form element and press the  toolbar button. The Textarea Properties dialog window that will open lets you set the name and size of a textarea.

  • Name: The name of the textarea element.
  • Columns: The width of the textarea specified as the number of characters in the line.
  • Rows: The number of lines of text that will be displayed in the textarea.


Selection Field

A selection field is a form element that lets you select one or more items from a scrollable list. Selection fields usually contain numerous options and depending on the settings, you can either limit the selection to one item or choose multiple items by holding the Ctrl key while selecting them with a mouse.

To insert a selection field into a document, place the cursor inside the form element and press the  toolbar button. The Selection Field Properties dialog window that will open lets you set the name of a selection field as well as the number and content of available options.

  • Name: The name of the selection field element.
  • Value: The value of the selection field element. This option is filled in automatically when you set one of the items as a selected value.
  • Size: The number of rows of the selection field that are visible by default. If the selection field contains more items, a scrollbar will appear.
  • Available Options: This section contains the options that the user will be able to choose from the selection field.
    • Text: The label of the selection field option.
    • Value: The value of the selection field option.
    • Add: Adds an option to the selection field.
    • Modify: Modifies a selected option.
    • Up: Moves an option one row up the selection field.
    • Down: Moves an option one row down the selection field.
    • Set as selected value: Sets an option as selected by default.
    • Delete: Deletes a selected option.
    • Allow multiple selections: Lets the user select more than one option from the selection field.

A selection field with one option selected:


Button

A button is a form element that gives the user a visual cue for completing a form action.

There are three types of form buttons. The first one is a standard button. The second one is a submit button that submits the form data to the server. The third one is a reset button that resets the form to it's default values.

To insert a button into a document, place the cursor inside the form element and press the  toolbar button. The Button Properties dialog window that will open lets you set the name, value, and type of the button element.

  • Name: The name of the button element.
  • Text (Value): The text displayed on the button.
  • Type: The button type. Possible options are Button (standard button), Submit (a button that submits the form data), and Reset (a button resetting the form fields to their default values).


Image Button

An image button is a form element that gives the user a visual cue for completing a form action. It is a clickable image that functions just like a standard button but has a customized appearance.

To insert an image button into a document, place the cursor inside the form element and press the  toolbar button. The Image Button Properties dialog window that will open lets you configure the URL and display options of the custom image button.

The Image Button Properties dialog window includes three tabs that group image button options: Image Info, Upload, and Advanced. Since the configuration options for an image button match the settings for normal images inserted into documents, please refer to the Inserting Images section of the Reference Guide.


Hidden Field

A hidden field is a special form element in that it does not allow any interaction with the user and is hidden from view. At the same time its value is sent along with the other information when the form is submitted.

To insert a hidden field into a document, place the cursor inside the form element and press the  toolbar button. The Hidden Field Properties dialog window that will open lets you set the name and value of a hidden field.

  • Name: The name of the hidden field element.
  • Value: The value of the hidden field element.

Once you configure the hidden field and click the OK button, the hidden field will be visible in the editing area as a small icon. Note, however, that as the name suggests, it will be hidden while in preview mode.


Required fields

In some cases, you do not want your users to skip fields within your form. To make a field required:

  1. Insert a hidden field beside the element which you would like to make mandatory.
  2. For "Name", enter the following : Name of required field_Required, where the Name of required field is the name of the field or selection. For example: If the required field is named Address, the hidden field would be named Address_Required.
  3. For Value, enter a message that you would like your user to see if they do not fill out this field. For example: You must enter your First Name. Upon submitting the form, they will see this message if a mandatory field is not filled out. They will have the option to go back and correct their submission.