Using the Forms Handler Component

From Documentation
Jump to: navigation, search

Using the Forms Handler

Using the NetObjects Forms Handler Component, you can easily create interactive forms to collect information from your users without knowledge of complex coding. All the information that you collect from users is stored in a flat file database file created by NetObjects Fusion and can be easily imported in third-party applications such as Microsoft Excel and Microsoft Access. You can view and manage the flat file database information, and you can choose to be notified via e-mail when a site visitor fills out and submits the form.

The NetObjects Forms Handler consists of 2 components:

You can place as many Forms Handler Components on your site as you need, but you can only place one Forms Handler Component on a page.

Adding the Forms Handler Component to a Page

To add the Forms Handler component to a page:

  1. In Page View, from the Custom Components toolbox, select NOF Forms Handler > Forms Handler.
  2. Draw a box on the Layout to indicate where you want to position the Forms Handler Component.

The NOF Forms Handler dialog box appears.

  1. If you have not created a Component Suite, create a new one by typing a name for the suite in the New name field. To include the component as part of an existing suite, click the Existing radio button and select the Component Suite that you want to add the component to. See Using Component Suites.
  2. From the Profile drop-down list, select the settings profile that you want to use for the component. If you have not created a settings profile, the default profile will be used. See Creating Component Profiles.
  3. Click OK to close the NOF Forms Handler dialog.

The Forms Handler dialog appears.

  1. Follow the steps for configuring the Forms Handler Component settings and appearance as described in Configuring the Form Labels and Objects and Configuring the General Form Settings.

Configuring Form Labels and Objects

After you have placed the Forms Handler component on your site, you can customize the form that visitors fill out to send pages to suit your needs. You can modify text labels and apply custom styles to the default form labels. You can also add additional form labels and corresponding objects'such as text boxes, check boxes, and radio buttons to collect additional information. For example, if you want to survey your site visitors by presenting a question and four options from which the user can check as a response, you could add a radio button and text label for each available option.

Usually, when you first place a Forms Handler component on the Layout of a page in NetObjects Fusion, the Forms Handler dialog box appears. If you close the dialog box and you want to configure the component setting in a future moment of time, follow these steps:

  1. Select the component on the Layout. You will see the NOF _Name of the Component_Properties window.
  2. Click on Click to edit and then press the (..) button.

Modifying Form Labels

On the Fields tab of the Forms Handler dialog box, configure the labels that will appear on the form next to the corresponding form object. The default labels are listed in the left-hand pane of the Forms Handler dialog box.

  1. On the Forms Handler Properties panel, select Click to edit.
  2. On the Field tab of the Forms Handler dialog box, edit default label text by selecting the label you want to change and replacing the text in the Label field.
  3. To change the order in which form elements will appear on the form, click the label name and move the label on the form using the up and down arrows.
  4. To remove a label and its form object, select the label and click the remove (-) button.

Adding Form Objects

On the Fields tab of the Forms Handler dialog box, you can set the properties for the form objects corresponding to the labels that appear on the form. For example, you can add a text label and then add a list box as the label's corresponding form object.

To add a new form object and corresponding text label:

  1. On the Forms Handler Properties panel,click the ... Click to edit button.
  2. On the Fields tab of the Forms Handler dialog box, click the add (+) button.
  3. Select Standard Controls.

When you add a Captcha form, select Custom controls.

  1. Enter a name for the field label in the Name text field.
  2. Select the desired form object type from the Type drop-down menu.

The default form object for new items is a single-line text field, but you can also choose to add a text box, radio button, check box, and button.

Configuring a Text Field

A single-line text field can accommodate just a few words, such as a name or phone number.

  1. On the Forms Handler Properties panel, click the ... Click to edit button.
  2. On the Field tab of the Forms Handler dialog box, select Textfield from the Type drop-down menu.
  3. Set the following text field properties:
    • Name. Type the name for this field that's PHP or ASP script processing the form. You may be able to choose any name or one may be required for this field.
    • Text. Type the text to appear in the field by default. This text is submitted as the response if the site visitor doesn't replace it.
    • Styles. To apply a custom CSS style to the form object, type the name of the CSS style in the text box or select the style from the drop-down list.

To create a custom CSS style that will be available for the component form object, See Using Style Sheets with Custom Components.

  • Password. Select this option if the field is for sensitive information like a password or credit card number. Characters that site visitors type are submitted to the script, but depending on the browser, visitors see asterisks, bullets, or nothing at all as they type.
  • Visible length. Enter a number to define the length of the text box by specifying the number of characters visible in the field.
  • Max length. Enter a numerical value to define how many characters site visitors can enter in the field. When typing exceeds the field's visible width or height, text scrolls up to this number of characters.

Configuring a Text Box

A multi-line text field (text box) can accommodate a greater amount of text than a text field, and is ideal for input such as comments and feedback.

  1. On the Forms Handler Properties panel click the ... Click to edit button.
  2. On the Field tab of the Forms Handler dialog box, select Textarea from the Type drop-down menu.
  3. Set the following text field Properties:
    • Name. Type the name for this field that's passed to the PHP or ASP script processing the form. You may be able to choose any name or one may be required for this field by the script.
    • Text. Type text to appear in the field by default. This text is submitted as the response if the site visitor doesn't replace it.
    • Style. To apply a custom CSS style to the form object, type the name of the CSS style in the text box or select the style from the drop-down list.

To create a custom CSS style that will be available for the component form object, See Using Style Sheets with Custom Components.

  • Password. Select this option if the field is for sensitive information like a password or credit card number. Characters site visitors type are submitted to the script, but depending on the browser, visitors see asterisks, bullets, or nothing at all as they type.
  • Visible height. Enter a number to define the height of the text box by specifying the number of characters visible in the field.
  • Max length. Enter a numerical value to define how many characters site visitors can enter in the field. When typing exceeds the field's visible width or height, text scrolls up to this number of characters.

Configuring Radio Buttons

Use radio buttons when you want site visitors to choose one option from a group. Clicking one radio button deselects all others in its group.

  1. On the Forms Handler Properties panel, click the ... Click to edit button.
  2. On the Field tab of the Forms Handler dialog box, select Radio Button from the Type drop-down menu.
  3. Set the following properties:
    • Name. Type the name for this button that's passed to the PHP or ASP script processing the form. This should be the same for all buttons in the group.
    • Value. Type the value passed for the button if the site visitor selects it. For example, if a visitor selects a button named Large in a group named 4, the output text might appear as 4=Large.
    • Styles. To apply a custom CSS style to the form object, type the name of the CSS style in the text box or select the style from the drop-down list.

The Cascading Style Sheet must first be added in NetObjects Fusion to be available in the CSS drop-down list. See Using Style Sheets with Custom Components.

  • Default. Choose either checked or unchecked to set the button's initial state, which is returned as the response if the site visitor doesn't change it.

Configuring Check Boxes

You can provide check boxes for making one or more selections from a group of options, or to turn a single option on or off. Unlike radio buttons, any number of boxes in a group can be selected at the same time.

  1. In the Forms Handler Properties panel, click the ... Click to edit button.
  2. On the Field tab of the Forms Handler dialog box, select Checkbox from the Type drop-down menu.
  3. Set the following properties:
    • Name. Type the name for this check box that's passed to the PHP or ASP script processing the form. Each check box must have a separate name.
    • Value. Type the value passed for the box if the site visitor checks it. For example, if a visitor checks a box named 6 that has the value E-mail, the output text might appear as 6=E-mail. If the site visitor doesn't check it, no value is sent to the server.
    • Style. To apply a custom CSS style to the form object, type the name of the CSS style in the text box or select the style from the drop-down list.

To create a custom CSS style that will be available for the component form object, see Using Style Sheets with Custom Components.

  • Default. Choose either Checked or Unchecked to set the button's initial state, which is returned as the response if the site visitor doesn't change it.

Configuring Combo Boxes

If a long list of check boxes or radio buttons takes up too much space in your form, you can list options in a combo box. Use a scrolling list if you want site visitors to be able to select more than one option, which is a space-saving alternative to a group of check boxes. Or use a drop-down list for selecting only one option, which is an alternative to radio buttons.

  1. In the Forms Handler Properties panel,click the ... Click to edit button.
  2. On the Field tab of the Forms Handler dialog box, Choose Combo Box from the Type drop-down menu.
  3. Set the following properties:
    • Name. Type the name for this combo box that's passed to the PHP or ASP script processing the form.
    • CSS. To apply a custom CSS style to the form object, type the name of the CSS style in the text box or select the style from the drop-down list.

To create a custom CSS style that will be available for the component form object, see Using Style Sheets with Custom Components.

  • Type. Select whether you want a drop-down list that displays one item at a time or a list box that displays several items in a scrolling list.
  • Visible height. For a list box, enter the number of visible lines in the box.
  • Allow multiple selections. For a list box, select this option if you want site visitors to be able to select more than one item in the list.
  1. To add items to the combo box list, click the plus (+) button and, in the Enter Value dialog, type a name and the value passed to the script for the item.
  2. Configure the combo box elements:
    • Name. Type the name passed for this item, which is also the name that appears in the list.
    • Value. Type the value passed if the item is selected.
    • Selected. Check this option if you want this item initially selected. Unless you re creating a list box and you select Allow multiple selections, only one item in the list can be selected.
  3. Use the arrow buttons to rearrange the order of items in the list.
  4. To remove items from the list, select the item and click the minus (-) button.

Customizing the Form Submit Button

When using the Forms Handler component to create a form, you can customize the button that users click to submit the form. You can choose to use a standard text button, upload a custom image as a button, or use linked text that submits the form when clicked.

  1. In the Forms Handler Properties panel, click the ... Click to edit button.
  2. On the Field tab of the Forms Handler dialog box, Choose Select from the Type drop-down menu. In the Forms Handler dialog, select Submit in the field list.
  3. Configure the following options for the Submit button.
    • Name. Type the name for this button that's passed to the script processing the form. The default button text cannot be changed.
    • Style. To apply a custom CSS style to the form object, type the name of the CSS style in the text box or select the style from the drop-down list.
  4. Select the type of button you want to use to submit the form.
    • Text. Select the Text option and enter a name the text field. The text will be displayed on the button.
    • Image. Select the Image option and choose a picture with the browse button. This picture will then behave as a button that the site visitor will click on it to submit the form.
    • Link. Select the Link option and type a link in the input field. The link will be displayed on the page and will behave as a normal button.
  5. Click OK to close the Forms Handler dialog.

Setting Error Events for Form Objects

You can assign requirements for each form field so that the form cannot be successfully submitted unless all of the required fields are completed correctly. For example, you can apply a rule for a text box so that the site visitor is required to enter text before submitting the form. If the site visitor leaves the text field blank and submits the form, the form will refresh with error markers, and the visitor will not be able to submit the form until all fields with errors are completed correctly.

  1. In the Forms Handler dialog, click the label for the form element that you want to apply validation options.
  2. Click the Error events tab.
  3. Select a validation requirement from the Error event drop-down list.

Available error events will vary depending on the type of form object to which the error event is being applied.

  1. Click the Active check box so that the error event will be activated on the form.

You can also suspend validation requirements for the form element by clearing the Active check box.

  1. Edit the default error message text by replacing the default text in the Message field.

Error messages for each form element that did not meet validation requirements will appear below the form.

  1. To apply a custom CSS style to the form object, type the name of the CSS style in the text box or select the style from the drop-down list.

To create a custom CSS style that will be available for the component form object, Using Style Sheets with Custom Components.

Setting Error/Success Handling Options

After filling in the form, the site visitor will click the Submit button. If the site visitor has filled in the fields correctly, a success page will display. If the site visitor has filled in any fields incorrectly, the browser will refresh the page and display an error message, and the fields that are not correct will be indicated with an error marker.

You can configure settings for error messages and error markers on the Page tab.

Setting Error-Handling Options

  1. In the Forms Handler dialog box, click the Page tab.
  2. Check the Show error messages check box to display error messages when the site visitor incorrectly fills in a page form field and attempts to submit the form. The error messages will be displayed beneath the controls at the bottom of the page.
  3. Check the Show error marker check box to display an error marker (symbol) to indicate the invalid input text, where the site visitor has incorrectly filled in a field. The error marker will be displayed between the field's label and the field.
  4. Use the browse button to choose a different image for the error marker.

Setting Success-Handling Options

  1. In the Forms Handler dialog box, click the Page tab.
  2. In the Success Handling field, choose the page where the site visitor will be redirected after successfully submitting the page. If the form is submitted without errors, the site visitor will automatically be redirected to the selected success page. For example, you could choose to have the Home page refresh in the visitor's browser after the form is submitted successfully.

Configuring the Forms Handler General Settings

To configure the general form settings:

  1. In the Forms Handler dialog box, click the General tab.

Script type displays either ASP or PHP, depending on settings from the General tab of the Current Site Options dialog.

  1. Click the Publish scripts in debug mode check box to view in-depth troubleshooting information should the component not function properly when published.
  2. Select the language (English or German) of your component script.
  3. Click the Write to database check box to upload form entries to a flat file database file.
  • In the Database field, enter the name of the flat file database file to which form information will be written. The default file is formshandler.csv.

If you do not use the Wizard button next to the Database field and you leave ../db/formshandler.csv in the default value, then you will have to manually create the /db folder on the server (in the folder where you publish the site) and grant write permission to the /db folder.

  • In the Upload directory field, enter the path to the directory containing the flat file database file.

If you do not use the Wizard button next to the Upload directory field and you leave ../db/ formsHandlerFileUpload in the default value, you will have to manually create the /db folder on the server and within this folder you need to create the formsHandlerFileUpload folder. Then, grant write permissions to the /db and the /formsHandlerFileUpload folders.

  1. Click the Wizard button to launch the DB Creation Wizard. See Using the DB Creation Wizard .
  2. Use the E-mail settings section to be notified when a visitor submits a form and to notify the visitor that their form has been submitted.
    • Enter the Server (IP) address and Port of the server that will handle sending the e-mail pages. Consult your host provider or site administrator to obtain this information.
    • In the E-mail field, enter the e-mail address to which you want form submission notifications to be sent.
    • In the From field, enter the e-mail address from which you want to send visitors confirmation e-mails.
    • If necessary check the smtp requires authentication check box and then fill in the Username and the Password fields with the SMTP user name and password.
    • Check the smtp requires ssl check box if the SMTP server requires a secure connection (SSL).

Note: Consult your host provider or site administrator to obtain details about the authentication and/or SSL possibly required by the SMTP server.

Note: The secure connection (SSL) and authentication for an SMTP server are used by some host providers to increase security and stem the flow of email messages propagating spam, viruses, and worms.

  1. To save the Forms Handler Component settings as a profile which can be applied to additional Forms Handler components that you add to your site, click Save Profile. See Creating Component Profiles.
  2. Click OK to close the Forms Handler dialog.

Using the Forms Handler Manager Component

When you create a form using the Forms Handler Component, you can use the Forms Handler Manager to view and manage the information received from users. Form submission results are sent to the customerinfo.csv file that Fusion creates in the folder you specify on the General tab of the Component Editor. You can use the Forms Handler Manager component to enter information about your Web server settings to configure the database features.

  1. In Page View, from the Custom Components toolbox, select NOF Forms Handler > Forms Handler Manager.
  2. Draw a box on the Layout to indicate where you want to position the Forms Handler Manager component.

The NOF Forms Handler dialog appears.

  1. If you have not created a Component Suite, create a new one by typing a name for the suite in the New name field. To include the component as part of an existing suite, click the Existing radio button and select the Component Suite that you want to add the component to. See Using Component Suites.
  2. From the Profile drop-down list, select the settings profile that you want to use for the component. If you have not created a settings profile, the default profile will be used. See Creating Component Profiles.
  3. Click OK to close the NOF Forms Handler dialog.

The Manager dialog appears.

  1. Click the Publish scripts in debug mode check box to view in-depth troubleshooting information should the component not function properly when published.
  2. Select the language (English or German) of your component script.
  3. Click the Write to database check box to upload form entries to a flat file database file.
  • In the Database field, enter the name of the flat file database file to which form information will be written. The default file is formshandler.csv.

If you do not use the Wizard button next to the Database field and you leave ../db/formshandler.csv in the default value, then you will have to manually create the /db folder on the server (in the folder where you publish the site) and grant write permission to the /db folder.

  • In the Upload directory field, enter the path to the directory containing the flat file database file.

If you do not use the Wizard button next to the Upload directory field and you leave ../db/ formsHandlerFileUpload in the default value, you will have to manually create the /db folder on the server and within this folder you need to create the formsHandlerFileUpload folder. Then, grant write permissions to the /db and the /formsHandlerFileUpload folders.

  1. Click the Wizard button to launch the DB Creation Wizard.
  2. Use the E-mail settings section to be notified when a visitor submits a form and to notify the visitor that their form has been submitted.
  • Enter the Server (IP) address and Port of the server that will handle sending the e-mail pages. Consult your host provider or site administrator to obtain this information.
  • In the E-mail field, enter the e-mail address to which you want form submission notifications to be sent.
  • In the From field, enter the e-mail address from which you want to send visitors confirmation e-mails.
  • If necessary check the smtp requires authentication check box and then fill in the Username and the Password fields with the SMTP user name and password.
  • Check the smtp requires ssl check box if the SMTP server requires a secure connection (SSL).

Note: Consult your host provider or site administrator to obtain details about the authentication and/or SSL possibly required by the SMTP server.

Note: The secure connection (SSL) and authentication for an SMTP server are used by some host providers to increase security and stem the flow of email messages propagating spam, viruses, and worms.

  1. To save the Forms Handler Manager component settings as a profile that can be applied to additional Forms Handler components that you add to your site, click Save Profile. See Creating Component Profiles.
  2. Click OK to close the Manager dialog.