Designing and Implementing Forms

From Documentation
Jump to: navigation, search

Designing and Implementing Forms

You can add forms to your site to collect information from site visitors; for example, to survey potential customers, conduct credit-card transactions, have customers register products, or otherwise process information visitors submit.

Using forms, visitors can type in text fields, upload files to your server, and select options using check boxes, radio buttons, and combo boxes. The form tools built into NetObjects Fusion contain the necessary server-side scripts, written in PHP or ASP, used to process your form responses.

You can also use JavaScript or Visual Basic routines with forms. See Working with HTML Directly.

Creating a Form

With NetObjects Fusion, you can devote an entire Layout area to a complex form containing many items, or create one or more smaller forms, each in a Layout Region, table, or text box. One form might log product registrations, for example, while another emails customer comments to a product manager. You can also add a form to the MasterBorder so it appears on several pages.

  1. In Page view, select the Form Area tool from the Form toolbar, and draw a rectangle in the Layout area or MasterBorder.

The Create Form dialog appears.

  1. Select a type of form container.
  • Create position-based form (Layout Region) creates a form in a Layout Region that you can resize and drag anywhere on the page. When you add form objects, text boxes, and other objects to the Layout Region, you can freely position and align them, just as you position objects in a Layout area.
  • Create text-based form (Text box) creates a form in a text box. Text you type and form objects you add appear sequentially, just as when you type. This is a good choice for forms that have a lot of text, where objects appear sequentially, or that have a simple layout, like a row of check boxes or a single column of fields. A text box form typically generates less HTML when you publish than a Layout Region form.
  • Create form in a Table creates a table where you can line up form objects by inserting them in table cells. Each cell acts like a text box, where you type and add objects just as you add other objects to a table. You can only have one table for the entire form.

If you define a Layout, Layout Region, or text box as a form, you can insert multiple tables to help align form objects.

  • Define Layout as a form (limits page to one form) creates a single form on the page that occupies the entire Layout area.
  1. Click OK.
  2. Add fields, check boxes, and other objects to your form, along with images and other content, as described in Adding Objects to a Form.

You can also turn an existing Layout or container object into a form. Click the Layout area, Layout Region, text box, or table, and select the form option on the General tab of the Properties panel; for example, Text box is a form.

Adding Objects to a Form

You can add any standard form objects to a form, including single- and multiple-line text fields, check boxes, radio buttons, scrolling lists, and drop-down lists.

You add objects to a form using the Form toolbar. This toolbar appears when you first create the form, or you can open the toolbar from the View menu by choosing, Form Tools.

Arrange and align the fields, check boxes, and other objects in a form, just as you would arrange objects in a Layout area, table, or text box. You must place form objects inside a form to make them work as part of the form. If you don t place form objects inside a form, a red warning icon appears in the form object.

To minimize the HTML generated by a Layout Region form, align its objects using the options on the Multi-Object panel or organize the objects in tables or text boxes. See Aligning and Distributing Objects, Embedding Objects in a Text Box, and Adding Text and Pictures to Cells.

Browsers display form objects differently, so test your form on all the browsers and platforms you plan to support.

If you publish pages containing forms using the HTML5 output option, the forms may not display properly in the browser and the form objects display warning icons in Page view.

Naming Form Objects

When you add objects to a form, you provide a name or argument for each object that is passed to the script that processes responses. These names can be used to output or otherwise process the text typed in a field, or the state of each check box, radio button, or combo box.

In addition to names, you can also provide a value to be sent when a site visitor selects a check box, radio button, or item in a combo box. For example, a check box named Yellow with a value of Yes might be sent to a script as Yellow=Yes, depending on the script.

Actions you add with NetObjects Fusion can also use form object values to manipulate a site visitor's response. See Scripting Parameter Values.

Adding a Single- or Multiple-Line Text Field

A single-line text field can accommodate just a few words, such as a name or phone number. After creating the form as described in Creating a Form:

  1. In Page view, select the Forms Edit Field tool from the Form toolbar.
  2. Draw a rectangle on the form.

The Forms Edit Field Properties panel appears.

  1. Set the Forms Edit Field properties.
  • Name. Type the name for this field that's passed to the script processing the form. Make sure you don t include any spaces in this field as it will later generate an unwanted behavior in your form.
  • Type. Select a field type from the drop-down menu.
  • Single line. Select this option to provide a text field that will accommodate just a few words, such as a name or phone number.
  • Multi line. Select this option to provide a text field for long comments or descriptions.
  • 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.

This option does not create password protection to prevent site visitors from visiting certain pages. That level of protection can only be provided by scripts used by the form or by permission settings on the server itself.

  • 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.
  • DS. Click the Data Source button if not grayed out, to add Data Source content to the field.
  • Wrap. Select a text wrap setting to control how the visitor's input will be displayed when the visitor enters more information than can be displayed in the defined text field. This option only applies to multiple-line text fields.
  • Off. Select to prevent text from wrapping to the next line. If a visitor's text field entry exceeds the boundary of the field, the text will scroll toward the left. Users can enter a hard return to move to the next line in the text field.
  • Virtual. Select to wrap the text in the text area. When the visitor's text field exceeds the bounds of the text field, text wraps to the next line. This option is recommended when sending data to a script of a database word wrap is not applied to the data. Instead, the submitted data is sent as a single string.
  • Physical. Select to wrap the text in the text field as well the data when it is submitted for processing.
  • Type. Select a field type from the drop-down menu
  • Char Width. Enter a number to define the width of the text box by specifying the number of characters visible in the field.
  • Max chars/Vis height. Enter a number to define how many characters site visitors can enter in the field. When typing exceeds the field's visible width, text scrolls up to this number of characters. This option only applies to multiple-line text fields.
  • Style. Select a text style for the form field text from the drop-down list.
  • Disabled. Click this check box to disable the text field on the form. The field will appear on the form, but site visitors will not be able to enter text in the field or replace any default text in the field.
  • HTML. Click to open the Object HTML dialog so you can add your own code to the object's generated code. See Accessing an Object's HTML.
  1. To add a label to the field, use the Forms Field Label tool on the Forms toolbar. See Adding Form Labels.

Select the label and the field and on the Multi-Object panel, click Align Center to make sure these objects appear correctly in the browser. To make aligning labels and fields easier, include the field and label in the same text box, or insert both objects in table cells.

Adding 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. After creating the form as described in Creating a Form:

  1. In Page view, select the Radio Button tool from the Form toolbar.
  2. Draw a rectangle on the form.
  3. Set the Forms Radio Button properties.
    • Group name. Type the name for this group of buttons that's passed to the 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.
    • Default. Choose:
      • Selected to set the button's initial state, which is returned as the response if the site visitor doesn't change it. Remember that only one radio button in a group can be selected at a time and this only works if all buttons in the group have the same group name.
      • Disabled. Click this check box to disable the radio button on the form. The radio button will appear on the form, but site visitors will not be able to select it.
      • Dynamic select to add Data Source content to the radio button. Click the ... button to display the Data Sources dialog.
    • Style. Select a style to apply formatting to the contents of the selected box.
    • HTML. Click to open the Object HTML dialog so you can add your own code to the object's generated code. See Accessing an Object's HTML.
  4. To add a label to the radio button, use the Forms Field Label tool on the Forms toolbar. See Adding Form Labels.

Adding 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. After creating the form as described in Creating a Form:

  1. In Page view, select the Forms check box tool from the Form toolbar.
  2. Draw a rectangle on the form.
  3. Set the Forms check box properties.
    • Name. Type the name for this check box that's passed to the 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.
    • Default. Choose:
      • Checked to set the check box's initial state, which is returned as the response if the site visitor doesn't change it.
      • Disabled. Click this check box to disable the check box on the form. The check box will appear on the form, but site visitors will not be able to check it.
      • Dynamic check to add Data Source content to the check box. Click the ... button to display the Data Sources dialog.
    • Style. Select a style to apply to the check box from the drop-down list.
    • HTML. Click to open the Object HTML dialog so you can add your own code to the object's generated code. See Accessing an Object's HTML.
  4. To add a label to the check box, use the Forms Field Label tool on the Forms toolbar. See Adding Form Labels.

Adding a Combo Box

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. After creating the form as described in Creating a Form:

  1. In Page view, select the Forms Combo Box tool from the Form toolbar.
  2. Draw a rectangle on the form.
  3. Set the Forms Combo Box properties.
    • Name. Type the name for this combo box that's passed to the script processing the form.
    • 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.
    • Height. For a list box, enter the number of visible lines in the box.
    • Multi-select. For a list box, select this option if you want site visitors to be able to select more than one item in the list.
    • Style. Select a style to apply formatting to the contents of the selected box. To create a custom style, select Manage Styles. See Modifying a Text Style .
    • Disabled. Click this check box to disable the combo box on the form. The combo box will appear on the form, but site visitors will not be able to select an option from the drop-down list.
    • Enable Data context. Select the option and click the Config button to enable Data Source context in the combo box.

The Data Source Config dialog appears.

  • Select a recordset from the Recordset drop-down list.
  • Select Enable, Disable, or Site Setting in the AJAX drop-down list.
  • Select a name in the Name drop-down list, and a value in the Value dropdown list.
  • Dynamic condition. Select the option and click the Config button to add a dynamic condition to the combo box.

The Dynamic Select dialog appears.

  • The Compare With Constant button is selected by default. Enter a constant in the text field.
  • Select Compare With DS to compare the combo box value with Data Source content. Select a recordset from the drop-down list.

Note: See Setting Data Source Contexts for more information about data sources.

  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.
  • 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 by default. 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.
  • HTML. Click to open the Object HTML dialog so you can add your own code to the object's generated code. See Accessing an Object's HTML.
  1. To add a label to the list, use the Forms Field Label tool on the Forms toolbar. See Adding Form Labels.

To remove items from the list, select the item and click the minus (-) button. Use the arrow buttons to rearrange the order of items in the list.

Adding a File Selector Box

In addition to check boxes, radio buttons, and combo boxes, you can add file selector boxes to your site to allow site visitors to upload files to your Web server. By adding file selector boxes to your site, visitors can send files (e.g., pictures, resumes, and spreadsheets) easily without having to send them via e-mail.

  1. In Page view, select the Forms File Selector tool from the Form toolbar.
  2. Draw a rectangle on the form.
  3. Set the Forms File Selector properties.
    • Name. Type the name for this forms file selector box that's passed to the script processing the form.
    • Char width. Enter a number to define the width of the file selector text box by specifying the number of characters visible in the field.
    • Max Chars. Enter a number to define how many characters site visitors can enter in the field. When typing exceeds the field's visible width, text scrolls up to this number of characters.
    • Style. Select a style to apply formatting to the file selector box.
    • Disabled. Click this check box to disable the file selector box form. The field will appear on the form, but will not be active for visitors to use.
    • HTML. Click to open the Object HTML dialog so you can add your own code to the object's generated code. See Accessing an Object's HTML.
  4. To add a label to the File Selector box, use the Forms Field Label tool on the Forms toolbar. See Adding Form Labels.

Adding the File Selector Box automatically updates the form's method and encoding values.

Adding Form Labels

When you add form objects to a form, a label is automatically placed as well. You can modify the appearance of the label and label text to complement your page design. You can also quickly create a relationship between the label to its corresponding form object.

  1. In Page view, select the Forms Field Label tool from the Form toolbar.
  2. Draw a rectangle on the form positioned near the form object corresponding to the label you are adding.
  3. Type or paste label text in the label text box.
  4. Use the options on the Format tab of the Forms Field Label Properties panel to format the label text. See Formatting Selected Text.
  5. Click the Text Box tab on the Forms Field Label Properties panel to format the background and style properties for the form label. See Setting Text Box Background.
  6. Click the HTML button to open the Object HTML dialog so you can add code to the label's generated code. See Accessing an Object's HTML.
  7. Click the Form Label Inspector tab.
  8. Choose the form object that corresponds to the label in the For drop-down menu.

Adding Reset, Submit, Custom, and AutoClose Buttons

After adding objects for collecting data from site visitors, you must add a Submit button to send the data to your Web server. You can also supply a Reset button so visitors can clear the form and start over. After creating the form as described in Creating a Form:

  1. In Page view, select the Forms Button tool from the Form toolbar.
  2. Draw a rectangle on the form.
  3. Set the Forms Button properties.
    • Name. Use the name your script references.
    • Type. Choose a button type:
    • Image. To use a picture as a label, select Image, click Browse, and choose an image file from the Picture File Open dialog.

When you use an image as the label for a form button, that button can only submit information. It cannot be used as a reset button.

  • Submit creates a button that sends the site visitor's responses to the script on the server.
  • Reset creates a button that reverts to the form's initial settings.
  • Button creates a custom button that runs the script you add using the HTML button.
  • Close window creates a button that closes the form's browser window when the form is submitted.
  • Value. Type a value to be displayed on the button.
  • Disabled. Click this check box to disable the button. The button will appear on the form, but will not be active for visitors to use.
  • Style. Select a style to apply formatting to the button.
  • HTML. Opens the Object HTML dialog so you can add a script that runs when site visitors click the custom button. See Accessing an Object's HTML.

Setting Validation Rules for Form Objects

With NetObjects Fusion, you can apply validation rules to form objects. Using validation rules, you can set requirements that the site visitor must meet to submit a form successfully. For example, you can apply a validation rule for a field so that a site visitor is required to select an option from a drop-down or list box before submitting the form. If the site visitor does not select an option 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 Page view, click anywhere in the form or on a form object.
  2. On the Form Properties panel, click the Form Fields Inspector tab.
  3. In the Fields list box, click the name of the form object to which you want to add validation options.
  4. Click the Validate button.

The Validate Form dialog appears.

  1. Apply validation options by selecting options in the Validation options list box and clicking the add (>) button.

Available validation options will vary, depending on the type of form object selected. Validation options include:

  • Required designates that the site visitor is required to enter text in the text field, select an option from the radio button, check box, or combo box, or submit a file in the file selector.
  • EmailAddress requires that the visitor's text input is in valid email address form (e.g., joesmith@netobjects.com).
  • DomainName requires that the text input follow the conventions for a standard domain name. Text input must contain a standard URL extension (.org, .com, etc.) and cannot contain certain characters (e.g., @).
  • LengthInRange specifies range the number of characters that the text input must contain. For example, you can create a validation option so that the text input contains at least 5 characters but no more than 10.
  • PhoneNumber requires that the visitor's text input is in valid phone number structure (e.g., 555-555-5555).
  • CreditCard validates a credit card number the user enters based on the rules of that card. You must a add a form object for each credit card type (Visa, MasterCard, etc.) that you want to validate.
  • Date requires that the user input a date in the format that you select in the Parameters field.
  • Number ensures that the visitor's input is numeric and contains no letters or special characters.
  • NumberRange verifies that the visitor's text input is numeric and that the value is within a specified range. For example, you could ask visitors to rate a service on a scale of 1 through 5. Any input that does not fall within that range of values will be invalid. You specify the range of values in the Paramaters field.
  1. Apply validation options by selecting options in the Validation options list box and clicking the add (>) button.
  2. Remove applied validation options by selecting them in the Validate fields as list box and clicking the remove (<) button.
  3. Set available parameters for a validation option by selecting the option in the Validate fields as list box, double-clicking in the Value row, and editing the value.
  4. Customize error message text for selected validation options by replacing the default Error Message text.
  5. Click the Change the label and field style check box to change the appearance of form labels and fields that do not meet validation requirements when a visitor fills out the form.

For example, if a visitor enters an invalid number in a text field with CreditCard validation applied, the field can appear with a red background when the form page refreshes to denote an incorrect field entry.

  1. If the Change the label and field style check box is selected, select a style from the Label style and Field style drop-down lists, or create a new style by choosing Manage Styles. See Creating a Text Style.
  2. Repeat steps 9 and 10 to change the appearance of labels and fields with validation errors individually. To change the appearance of all labels and fields with validation errors at once, see Setting Form Error Properties.

Setting Form Error Properties

You can modify the appearance of individual form labels or objects that display when their validation requirements are not met, and you can also apply a uniform appearance to all form labels and objects that do not meet validation requirements.

  1. In Page view, click anywhere in the form except on a form object.
  2. On the Form Properties panel, click the Form Fields Inspector tab.
  3. Click the Validate button.

The Validate Form dialog appears.

  1. In the Validate Form dialog, click the Form tab.
  2. In the Label style and Field style drop-down lists, select a style for the appearance of form labels and fields that do not meet validation requirements. To create a new style, choose Manage Styles. See Creating a Text Style.

To apply the label style to all labels on the form that do not meet validation requirements, click the Apply to all labels button.

To apply the field style to all labels on the form that do not meet validation requirements, click the Apply to all fields button.

  1. Customize error message text for selected validation options by replacing the default Error Message text in the Validate From dialog.
  2. Click the Show only first error check list to show only the first error when multiple validation errors have been made.

When a visitor submits the form after correcting the first error, the remaining errors will displayed sequentially until each error has been corrected.

  1. Click OK to close the Validate Form dialog.

Processing Data

A script is a program that controls a program on your Web server. Using a script, you can format responses for a particular application, summarize them on a page that's returned to the site visitor, or do practically anything else with the data.

  1. In Page view, click anywhere in the form or on a form object.
  2. On the Form Properties panel, click the Form General Properties tab.
  3. Specify:
    • Form name. Type an arbitrary name for the form. This is required by some browsers.Do not include spaces in the Name field.
    • Action. The Action drop-down list displays either Form Handler (PHP) or Form Handler (ASP), depending on settings from the General tab of the Current Site Options dialog. Select the available option and configure its settings in the parameters grid. You can also use a custom script by typing it in the text field or clicking the browse button and locating the script.

Note: If your server's configuration requires publishing scripts somewhere else, you must use the Alias tab of the Advanced Publish Settings dialog in Publish view to specify that location in the script field. See Creating Aliased Folders and Setting the CGI-BIN Directory.

If the script isn't already on the server but needs to be published along with your site's assets, click Browse and select the script file to be published from the Open dialog. This file appears in the Action field. NetObjects Fusion adds the file as an asset and puts it in the scripts directory.

When visitors click Submit, the server executes the script at this URL.

  • Method. Choose a method for sending form data to the Web server:
  • Post, which is the preferred method, sends data as a standard stream of name=value pairs, separated by an ampersand (&).
  • Get sends the values of the form variables as part of the URL. Use Get with care, as some servers truncate data sent using this method.

Often, the method you use is determined by the scripts you use. Check your script's documentation for information.

  • Encoding. Choose from multipart/form-data and text/plain, or type a different format, if your server requires data to be encoded in a particular format, such as MIME or BinHex.

Adding Hidden Fields

If a CGI script is processing your form, you probably need to use hidden fields to pass additional information to it, such as which fields must be filled in to display the success page or where to return data once it's processed. Site visitors don t see these fields, but the values are submitted to the script with form responses.

  1. In Page view, click anywhere in the form or on a form object.
  2. On the Form Properties panel, click the Forms Handler Fields Properties tab.
  3. Add names and values for each hidden field in the Form Properties dialog.
    • To add a field, click the plus (+) button, then enter a name and value for the field in the Enter Value dialog.
    • To remove a field, select it and click the minus (-) button.
    • To reorder fields in the list and define their order in the submitted data, select a field and click the up or down arrow.
  4. Click OK.