close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Getting Started with Form Toolkit

Tutorial created by Team WebAssist

Categories: Data Bridge, Dreamweaver, Javascript, PHP

rating

With Form Toolkit, you can easily add Captcha security, Datepickers, and Server Validations to your PHP forms. You can also use Form Toolkit to enhance any datepickers or Captcha security that you have created using CSS Form Builder.

This Getting Started Guide will guide you through inserting Captcha and Datepickers to your form. It will also highlight some of the useful features found in Form Toolkit's Server Validations.

arrow downRequirements

You will need the following items before starting this tutorial:

  1. Form Toolkit
  2. Dreamweaver CS3 or later
  3. Dreamweaver site defined
  4. Existing PHP form for inserting features to
  5. PHP/MySQL Testing Server
    If the form you are working on resides on a PHP testing server, the Captcha preview and Properties Inspector will be able to generate accurate previews as you customize the appearance of the Captcha graphic.
If you are seeing Javascript errors when launching Dreamweaver, you will need to delete the WinFileCache.dat or MacFileCache.dat file from your Dreamweaver Configuration folder. Click here for instructions.

arrow downInserting Captcha Security

Form Toolkit can add a Captcha security graphic to your form. This graphic contains a randomly generated code that your site visitor must be able to read in order to complete your form. When inserted, the Captcha graphic is accompanied by a text field which the visitor will use to enter the code.

Once you have used Form Toolkit to insert the Captcha security, you will need to apply the Server Validation to your Captcha code and text field to ensure that the code is entered correctly.

Step 1: Insert the Captcha

  1. With your PHP form open in Dreamweaver, place your cursor where you wish to insert the Captcha graphic and text field.
  2. From the WebAssist menu, choose Forms > Insert Captcha.
  3. In the Insert Captcha interface, configure the Captcha graphic you wish to insert to your page.
    The preview below will generate instantly provided that you are working on form that resides on a functioning PHP testing server.

  4. Once you are satisfied with the appearance of your Captcha graphic, click OK to insert to your page.


Now that your Captcha has been inserted to your page, you will want to add the Server Validations to ensure the code is always entered correctly before allowing the visitor to proceed.

Step 2: Applying Server Validations to your Captcha security

When adding server validations to a form, it is usually a two part process. First, you are applying the validation behavior which checks to see if the form validates or not. Second, you create a Show If Behavior which displays something on the page when the validation fails (or passes).

  1. From the WebAssist menu, choose Forms > Validation > Server Validation.
  2. From the Server Validations interface, choose the appropriate Validation trigger.
    In most cases, Any Form Post will work.
  3. From the Validation type field, choose Like Entry.

  4. Click Server variable lightning bolt.
  5. Expand the Session option and choose the captcha_Security_Code option.

  6. Click OK.
  7. Click the Add (+) button below the Server variable field.
  8. When the Like Entry dialog appears, click the Same as lightning bolt.
  9. Expand the form that contains your Captcha Security, select the Security_Code text field.

  10. Click OK.
  11. In the Failed Redirect field, enter or browse to the file you wish to use if the validation fails.
    If you wish to display an error on the form if the validation fails, you should select the current page.


Now that you have applied the Server Validation, you will want to create the Show if behavior to display an error if validation fails.

Step 3: Creating the Error Message when the Captcha code is entered incorrectly

Using the Validation Show If behavior included with Form Toolkit, you can create an error message for your visitor that will only show when they incorrectly enter the Captcha code.

  1. Type the error message you wish to appear when the Captcha code is entered incorrectly on your page.
    In most cases, you will want this error to be directly beside or beneath the Security Code text field.
  2. Highlight the error message you have typed.
  3. From the WebAssist menu, choose Forms > Validation > Validation Show If.
  4. From the Validation page field, select the current page.
    When applying a Show If behavior, you always choose the page that you have added the Server Validation to.
  5. From the Validations fail menu, choose the Like Entry validation you applied for the Captcha and click the plus (+) button.

  6. When you are finished click OK.


You have now created an error message that will only display when the Server Validation fails. This can also be used on areas of code instead of text if, for example, you wanted to change the CSS styles when validation fails or passes.

arrow downInserting Datepickers

Form Toolkit allows you to quickly add a datepicker to your form to allow your visitors to select a date from the datepicker that will be entered into a text field.

  1. Place your cursor where you wish to insert the datepicker within your form.
  2. From the WebAssist menu, choose Forms > Insert Datepicker.
  3. Enter a name for this datepicker in the Name field.
    This name will be used as the id for the datepicker.
  4. Choose your preferred options from the Animation and Format menus.
  5. Select the Theme that you would like to use.
    You can choose from the 24 themes included or create your own custom theme.

  6. Click OK to insert the datepicker to your page.


Your datepicker has now been inserted to your form. You will probably want to add some sort of behavior to the datepicker text field for inserting to your database, or including in an email.

arrow downServer Validations

With Server Validations, you can apply a secure, and attractive level of validation to your site. Validation is important as it will allow you to ensure that the date submitted in the forms you create is accurate.

Step 1: Applying the Validation

  1. From the WebAssist menu, choose Forms > Validation > Server Validation.
  2. From the Validation trigger menu, choose the appropriate trigger to initiate the validation.
    The default option of Any Form Post is most commonly used.
  3. In the Validation type menu, choose the type of validation you wish to apply.
  4. Select the server variable lightning bolt to choose the server variable, or form field you wish to validate.
    Typically, you would expand your form, and select the particular element you wish to apply validation to.
  5. Click the Plus (+) icon to specify the validation settings.
  6. Click OK once you have specified the appropriate settings.
  7. Continue applying validations to any form fields or server variables that you desire.
  8. In the Failed redirect, specify a page that you wish to redirect to on fail.
    If you wish to display a validation Show If behavior on the form when an error occurs, you will need to specify that form page.
    One of the differences between client validations and server validations is that server validations do not display an error message if validation fails. However, server validations have the power to apply a Validation Show If behavior, which instead displays an error message beside the form field that fails validation. This is a much more attractive way to display errors.

  9. When you are ready and have created all your necessary validations, click OK.
  10. Click OK when you are ready.
  11. Continue applying additional validations to any of your form fields. You can apply more than one validation to a single form element.
  12. Click Finish once you have applied all the validations you like.


More information regarding each specific type of validation, can be found in the Context Sensitive Help documentation which can be found by clicking on any of the Help buttons within the Validation Toolkit interface.

Step 2: Applying the Validation Show If Behavior

The Validation Show If Behavior allows you to specify various regions or elements on your to display if a server validation fails or passes.

Two common uses:

  1. Display your error message directly beside the form field that failed validation. This makes it easier for users to fix their mistakes.
  2. Display an additional region on your page if a check box is selected. For example, if you have a check box that asks if a user is over 18, when selected, a user agreement could display on the page.
  1. Create the content or text that you wish to be displayed if the validation passes or fails.
    For error messages, you could simply type your message beside the form field, and style it with a red color.
  2. Highlight the region or text that you wish to display.
  3. From the WebAssist menu, choose Forms > Validations > Validation Show If.
  4. For displaying when validation fails, choose the Validation from the Validation fail menu.
  5. For displaying when validation passes, choose the Validation from the Validation pass menu.
  6. Press the Plus (+) icon.
  7. Click OK when you are ready.


Now that you have created the validation behavior and the show if behavior, you can test your page out to see how the validation works.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

lorraine.ramirez438410: 4 Years, 8 Months, 3 Weeks, 1 Day, 1 Hour, 28 Minutes ago

Is there a way to add a start and end date for a form?

lorraine.ramirez438410: 4 Years, 8 Months, 3 Weeks, 1 Day, 1 Hour, 26 Minutes ago

It's nice to see that this will accomodate CS3 and above

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.