Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Creating Forms Using Dreamweaver Spry Form Objects

VIEWS: 1 PAGES: 33

									Web Design
         Santa Barbara




Creating Forms Using
Dreamweaver Spry Form Objects




                         Scott Nelson
                  Web Design Santa Barbara
                    www.WebDesignSB.com
                   Updated October 5, 2011
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                                                       October 5, 2011


Table of Contents
Table of Contents ....................................................................................................... 2
Introduction .............................................................................................................. 3
Overview................................................................................................................... 3
  The Script............................................................................................................... 3
  The Form ............................................................................................................... 3
  The Thank You Page ................................................................................................ 4
  The Email ............................................................................................................... 5
Active Server Page / Visual Basic Script ........................................................................ 6
  Hosting Prerequisites ............................................................................................... 6
  Script Functionality .................................................................................................. 6
  Installing and Editing the Process Mail Script............................................................... 7
Create the Form Page ................................................................................................. 9
  Creating a Contact Form Page ................................................................................... 9
  Heading and Explanation of the Form ....................................................................... 10
  Inserting the Form ................................................................................................. 10
  Creating the CSS Formatting Structure .................................................................... 11
  Form Fields Planning .............................................................................................. 19
  Spry Form Objects ................................................................................................. 20
    The Name Field .................................................................................................. 20
    The Email Address Field ....................................................................................... 22
    The Newsletter Checkbox (Non-Spry) .................................................................... 22
    The Email Format Radio Group (Non-Spry) ............................................................ 23
    The Heard About the Web Site Field ...................................................................... 24
    The Comments Field ........................................................................................... 26
    The Hidden Field ................................................................................................. 26
    The Submit Button .............................................................................................. 26
Create the "Thank You" Page ..................................................................................... 27
Testing the Form ...................................................................................................... 28
Creative Commons ................................................................................................... 28
Appendix................................................................................................................. 29
  The VB.NET Script ................................................................................................. 29
  Web.Config for Troubleshooting............................................................................... 33




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                   Page 2 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                                October 5, 2011


Introduction
Dreamweaver Spry Form Objects use Asynchronous JavaScript and XML (AJAX) to create
interactive forms, with extensive built-in error-checking. Error-checking is probably the
most difficult part of programming any application. Error-checking is the process of trying to
anticipate the nonsense that people can put into your interactive forms, and not allowing
input that is not acceptable.

The Dreamweaver CS3/CS4/CS5 Spry Form Objects interact with the user not unlike the
"post-back" of ASP.NET forms, but with a lot less work and with not additional interaction
with the server.

This documentation makes the following assumptions.
     You are familiar with Dreamweaver CS3/CS4/CS5
     You have a site defined and you have created a site Template
     For functionality, you are hosting your site on a Windows server with Active Server
       Pages (ASP) enabled


Overview
The Script
The script is what makes this work. It takes the form data, packages it up into an HTML
email, sends the email, and then forwards your visitor to your Thank you page.

The script is in the appendix of this document, or can be found at this link.

      Web Design Santa Barbara > Resources > Dreamweaver > Forms Lesson
       http://www.WebDesignSB.com/Resources/Documentation/Dreamweaver/Forms/

The Form
The form, or Contact page, from Scott's Place on the Web! looks like this. The form is
"content" inside a Dreamweaver Site template.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                   Page 3 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                              October 5, 2011




The Thank You Page
The "Thank You" or confirmation page lets your visitor know that the information has been
sent. It is a reassurance of function. In this example, I scanned by signature and placed it in
the page as a GIF image. I feel it adds a personal touch to the page.

Create the page from your site template, and save it as thank_you.htm.


4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                   Page 4 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                              October 5, 2011

There is a field in the script that allows you to specify the URL of the Thank You page.




The Email
This is an example of what the email will look like in Microsoft Office Outlook. The email is
composed in HTML in order to have an attractive look. The email is HTML 4.01 Transitional
and uses a table to format the compiled form fields and associated values. Tabular data
display, such as this, is an appropriate use for a table.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                   Page 5 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                               October 5, 2011




Active Server Page / Visual Basic Script
Hosting Prerequisites
The Process Mail script is a VB.NET script file. This file uses VB.NET server-side scripting,
and does not actually display in the browser, but performs the work of aggregating the form
data in tabular form in HTML and then sends the email. The script requires a Windows
Internet Information Server (IIS) and the Microsoft .NET Framework 2.

This script is designed to specifically use the .NET Framework Class Library SmtpClient Class
(Namespace: System.Net.Mail).

Script Functionality
The following are some of the functions and constraints of the script.

      The script   will parse and send all form fields, including hidden fields
      The script   will only accept form input if the form is on the same domain as the script
      The script   automatically removes the submit button from being parsed and sent in
       the email
      The script   preserves returns in text fields



4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                   Page 6 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                             October 5, 2011
      The script looks for a field named Subject and uses it as the subject of the email if
       found
      The script looks for a field name EmailAddress and uses it as the From address if
       found and of a valid format (domain lookup is not used)

Installing and Editing the Process Mail Script
1) Using Dreamweaver, create a folder in the root of your web site named cgi-bin. This
   stands for Common Gateway Interface – Binary (as in binary executable programs).




2) Open a web browser to the Web Design Santa Barbara Dreamweaver Web Forms
   page.

   http://www.WebDesignSB.com/Resources/Documentation/Dreamweaver/Forms/

3) Scroll down to the Email Script section of the page, right-click (Ctrl-Click) on the
   Process Mail VB.NET File link, and then select Save Target As… (Download Linked
   File As…).




4) Save the Process Mail script file into the cgi-bin folder in your web site. When saving
   the file, rename it to process_mail.aspx. Be absolutely sure the file name extension is
   .aspx.

5) Using Dreamweaver, open the process_mail.aspx in Code view. Scroll down to lines 25
   through 30. These are the only lines you should need to edit.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                   Page 7 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                             October 5, 2011




   Some general rules for editing the script:
   a) Only change the text between the double-quotes (" ")
   b) Be sure to maintain the beginning quote and end quote
   c) Do not add a return that causes the line to wrap to another line
   d) Do not add any double-quotes (") between the existing double-quotes

6) Summary of the Field Names
   a) strContactName
      This is the name of the person who will be receiving the form-generated email
   b) strTo
      This is the email address of the person to which you are sending the form-generated
      email, otherwise know as the recipient.
   c) strSubject
      This is the subject of the email. This can be set in the form. However, if you forget to
      include a form field named Subject, this will be the "backup" subject.
   d) strFromURL
      This web address is included in the footer of the form-generated email that
      references the address of the contact form. This is the page the email is "from."
   e) strReturnAddress
      After the email is composed and processed, the web site visitor will want some
      confirmation of the email being sent. Enter the fully-qualified web address of your
      "Thank You" page.
   f) strSMTPServer
      For students hosting on Tango Student sites, leave the entry as is:
      mail.tangostudents.com. If you have a domain on Tango, then enter mail.your-
      domain.com, where your-domain.com is your actual domain name.
   g) Basic Authentication
      Basic authentication was added as a requirement by Tango Hosting in early 2011.
      The purpose is to curtail “spammers” from sending large email broadcasts through
      Tango servers.
      i) strUsername
          For students hosting on Tango Student sites, this is your Tango Students Login or
          Username.
      ii) strPassword
          For students hosting on Tango Student sites, this is your Tango Students
          password.

          This is an example of the information that I might enter using Tango Students
          account number 60.


4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                   Page 8 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                             October 5, 2011

            strContactName = "Scott Nelson, Instructor"
            strTo = "Scott@WebDesign.com"
            strSubject = "MAT153 Dreamweaver Spry Web Form"
            strFromURL = "http://student60.com.tangostudents.com/contact.htm"
            strReturnURL = "http://student60.com.tangostudents.com/thank_you.htm"
            strSMTPServer = "mail.tangostudents.com"
            strUsername = "student60"
            strPassword = "4321rewqa"

7) Verify that you have properly edited the file and then save the process_mail.aspx.


Create the Form Page
Creating a Contact Form Page

1) File, New…, Page from Template.

2) If you have defined more than one site, click on the appropriate site, click on the Main
   template, and then click on the Create button.




3) Save the first page as contact.htm (or the name you decided to call your contact
   form), in the root folder.

If you already have the contact page created, simply open it by double-clicking on it in the
Dreamweaver Files Panel.



4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                   Page 9 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                             October 5, 2011
Heading and Explanation of the Form
Be sure you have added the appropriate page title. Add the heading to the page, and a
short explanation as to what this form is about, and why someone might want to complete
and submit it.




Inserting the Form
In this part of the procedure, we will be inserting the Form tags. The Form tag contains the
instructions of where to send the data in the form when the form is submitted and how to
send it.

1) Place your cursor in the paragraph below the text you
   entered, and then click on the Insert Form button on the
   Insert toolbar (on the top-left of the screen).

2) In Design View, Dreamweaver displays the form area (as
   defined by the opening and closing form tags) as a box
   surrounded by dotted red lines. This displays only in
   Dreamweaver and not in the web browser. The reason this display is so prominent is
   that all of the form elements must be contained in the form area or the form
   will not function properly.




3) Without clicking anywhere in the display window, click in the Properties panel, and set
   the Form name to ContactForm.


4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 10 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                             October 5, 2011
4) In the Action field, click on the Folder Browsing icon.




5) Open the cgi-bin folder, and select process_mail.aspx. Click on the OK button.




This completes the Form Properties. Next we need to add the structure that will contain and
properly format our form.

Creating the CSS Formatting Structure
Examining the example form, suggests there are two "columns" of structure. One column is
for the labels and the other column is for the form fields. To affect this, we need to create
three new CSS classes and assign the to division tags.

1) Place your cursor in the form area, inside the dotted red box.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 11 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                           October 5, 2011
2) Click on the Insert Div Tag button on the Insert toolbar (on the top-left of the
   screen).




3) In the Insert Div Tag window, enter the class FormRow, and then click on the New
   CSS Style button.




4) In   the New CSS Rule window,
   a)    Selector Type should be Class (can apply to any tag).
   b)    Name: .FormRow (Note, the leading period (.) is important.)
   c)    Define in: oneColFixCtrHdr.css (or whatever your main style sheet is named)




   d) Click on the OK button.

5) Select the Box Category, and
   then make the following
   settings.
   a) Width: 100 %
   b) Clear: both
   c) Padding: Same for all
       i) Top: 0 pixels
   d) Margin: Same for all
       i) Top: 0 pixels
   e) Click on the OK button to
       close the CSS Rule
       Definition window and


4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 12 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                            October 5, 2011
         accept this CSS rule.

6) Click on the OK button in the Insert Div Tag window.




   You should see the new division bounded by a black dotted box and the text, Content for
   class "FormRow" Goes Here. Do not click anywhere else.

7) With the Content for class "FormRow" Goes Here text selected, touch the Delete key to
   remove the text. The Division tag should still remain, even though it will appear to have
   been deleted.

8) To create the left column, click on the Insert Div Tag button on the Insert toolbar.

9) In the Insert Div Tag window, enter the class FormLeftColumn, and then click on the
   New CSS Style button.




10) In   the New CSS Rule window,
    a)    Selector Type should be Class (can apply to any tag).
    b)    Name: .FormLeftColumn (Note, the leading period (.) is important.)
    c)    Define in: oneColFixCtrHdr.css (or whatever your main style sheet is named)




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 13 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                         October 5, 2011




   d) Click on the OK button.

11) Select the Block Category, and then make the following settings.
    a) Text align: right

12) Select the Box Category, and then make the following settings.
    a) Width: 50 %
    b) Float: left
    c) Padding: Uncheck Same for all
       i) Top: 5 pixels
       ii) Bottom: 5 pixels




   d) Click on the OK button to close the CSS Rule Definition window and accept this CSS
      rule.

13) Click on the OK button in the Insert Div Tag window.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 14 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                               October 5, 2011




   You should see the new division bounded by a black dotted box and the text, Content for
   class "LeftFormColumn" Goes Here. Do not click anywhere else.

14) Touch the Right-Arrow key on the computer keyboard to move out of the
    FormLeftColumn division, but stay in the FormRow division.

15) This will be the third time we have inserted a division. To create the right column, click
    on the Insert Div Tag button on the Insert toolbar.

16) In the Insert Div Tag window, enter the class FormRightColumn, and then click on the
    New CSS Style button.

17) In   the New CSS Rule window,
    a)    Selector Type should be Class (can apply to any tag).
    b)    Name: .FormRightColumn (Note, the leading period (.) is important.)
    c)    Define in: oneColFixCtrHdr.css (or whatever your main style sheet is named)
    d)    Click on the OK button.

18) Select the Block Category, and then make the following settings.
    a) Text align: left

19) Select the Box Category, and then make the following settings.
    a) Width: 50 %
    b) Float: left
    c) Padding: Uncheck Same for all
       i) Top: 5 pixels
       ii) Bottom: 5 pixels

20) Click on the OK button in the Insert Div Tag window. This is what your first "row"
    should look like.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 15 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                              October 5, 2011
This process added the following styles to your style sheet.

 .FormRow {
        width: 100%;
        margin: 0px;
        padding: 0px;
        clear: both;
 }

 .FormLeftColumn {
        text-align: right;
        float: left;
        width: 50%;
        padding-top: 5px;
        padding-bottom: 5px;
 }

 .FormRightColumn {
        text-align: left;
        float: right;
        width: 50%;
        padding-top: 5px;
        padding-bottom: 5px;
 }

 .RedText {
        font-weight: bold;
21) The next step is to create a row from each form field, including the submit button and
         color: #FF0000;
    the Required Field notice. It will be easiest to copy the code we just inserted and then
         font-size: 10px;
 } paste it a number of times in order to make the columns. Switch to Code View, select
    and copy the six lines of code that correspond to a single row.
 .FormFieldText {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #003399;                                                         Copy this
        font-size: 13px;                                                        section of
 }                                                                              code, and
                                                                                then paste
                                                                                it below.


   For this example, paste the selection seven additional times for a total of eight (8) rows.
   Switch back to Design View. This is what it should look like in Design View. If there is
   any doubt as to whether or not all of the rows are within the Form tags, check the Code
   View.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 16 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                               October 5, 2011




22) In the left column, start at the top. Remove the generic text and type in your questions.
    Enter an extra space at the end of the line. Clear all of the text out of the right column.
    Your form should look like this.

   Note the two bottom rows are currently blank. This is okay. We will add buttons to the
   second to the last row. In the last row, in the right column, we can add text that
   specifies the required fields, if any.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 17 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                       October 5, 2011




23) In the bottom right division, type: * Indicates a required field

24) In the CSS Styles Panel, create a New CSS Rule.

25) In the New CSS Rule window, select
    a) Class (can apply to any tag)
    b) Name: .RedText (Note, the leading period (.) is
        important.)




   c) Click on the OK button.

26) On the Type Category window, enter the following:
    a) Size: 10 pixels
    b) Weight: bold


4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 18 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                            October 5, 2011
   c) Color: #FF0000




   d) Click on the OK button.

27) Select the text, * Indicates a required field. In the Properties Panel, assign the Style
    to RedText, and then click on the Align Right button.




This step completes the preparation of the form styles. New we will add the Spry Form
Objects.

Form Fields Planning
Before we begin entering the actual form objects, we need to know what type of information
we want to collect. General form guidelines are as follows.

      Ask for no more than you actually need
      The form structure should be as intuitive as possible
      Provide choices as much as possible
      Keep forms as short as possible
      Include a confirmation or "Thank you" page


4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 19 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                             October 5, 2011
       Organize and put like questions together

This table summarizes the fields that we will be using in this exercise.

Field             Name                    Type              Limitations      Required
Visitor's Name    Name                    Single Line of    100 Character    Yes
                                          Text              Maximum
Visitor's Email   EmailAddress            Single Line of    100 Character  Yes
Address                                   Text              Maximum, Email
                                                            Format
Newsletter        Newsletter              Checkbox (Yes / None               No
Subscription                              No)
Format of the     EmailFormat             Radio Group       None             No
Recipient's                               (Visible
Email                                     Selections)
How did the       HeardAboutWebSite Select Menu             None             Yes
Visitor Hear                        (Drop-down
About the Web                       Menu)
Site?
Comments          Comments                Multiple Lines of 500 Character    No
                                          Text              Maximum

The Name column will provide the functional Name or ID for each form element. The Name
of a form field has the following constraints.

       Use only letters and numbers
       Must not use spaces or alternate characters
       Must not start with a number
       Is case-sensitive
       Must be unique in the form (unless you are grouping radio buttons or checkboxes)

With this information, we are ready to insert the form fields.

Spry Form Objects
Entering Dreamweaver Spry Form objects will add a SpryAssets folder will be added to the
root of the site. This folder will need to be uploaded (Put) along with the other assets from
your form page.

The Name Field
1) In the Design View of your forms page, place the cursor into the top-right division,
   associated with the Name. Click on the Forms tab on the Insert toolbar. Then click on
   the Spry Validation Text Field button.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 20 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                              October 5, 2011




2) The Input Tag Accessibility Attributes window should open. Enter the following settings
   a) ID: Name
   b) Style: No label tag




   c) Click on the OK button.

3) In the Properties Panel, the properties for the Spry object will be displayed. Set the
   following attributes.
   a) Hint: Enter Your Name
   b) Max. chars: 100
   c) Required: checked (this is by default)




4) For Accessibility purposes we need to associate the words in the left column with the
   form fields in the right. The way to do this is to use the Label tag. Select the word
   Name: in the first column, and then right-click (Ctrl-Click). Select Quick Tag Editor…
   from the pop-up menu.



4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 21 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                              October 5, 2011




   a) When the Quick Tag Editor appears, type: label for="Name" and then touch Enter.




The Email Address Field
Because all of the rest of the Spry objects are inserted in much the same way, I will use an
abbreviated step list and let you refer back to the Name Field section.

1) In the Design View of your forms page, place the cursor into the division associated
   with the Email Address. Click on the Forms tab on the Insert toolbar. Then click on the
   Spry Validation Text Field button.

2) The Input Tag Accessibility Attributes window should open. Enter the following settings
   a) ID: EmailAddress
   b) Style: No label tag
   c) Click on the OK button.

3) In the Properties Panel, the properties for the Spry object will be displayed. Set the
   following attributes.
   a) Type: Email Address
   b) Hint: Enter Your Email Address
   c) Max. chars: 100
   d) Required: checked (this is by default)

4) Select the words Email Address: in the first column, and then right-click (Ctrl-Click).
   Select Quick Tag Editor… from the pop-up menu.
   a) When the Quick Tag Editor appears, type: label for="EmailAddress" and then
      touch Enter.

The Newsletter Checkbox (Non-Spry)
1) In the Design View of your forms page, place the cursor into the division associated
   with the Newsletter Subscription question.



4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 22 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                            October 5, 2011
2) Select Insert, Form, Checkbox.

3) The Input Tag Accessibility Attributes window should open. Enter the following settings
   a) ID: Newsletter
   b) Style: No label tag
   c) Click on the OK button.

4) In   the Properties Panel set the following attributes.
   a)    Checkbox name: Newsletter
   b)    Checked value: Yes
   c)    Initial state: Checked




5) Select the words I would like to receive the monthly Newsletter: in the first
   column, and then right-click (Ctrl-Click). Select Quick Tag Editor… from the pop-up
   menu.

6) When the Quick Tag Editor appears, type: label for="Newsletter" and then touch
   Enter.

The Email Format Radio Group (Non-Spry)
1) In the Design View of your forms page, place the cursor into the division associated
   with the Email Format question.

2) Select Insert, Form, Radio Group.

3) In the Radio Group window, set the following attributes and values.
   a) Name: EmailFormat
   b) Enter three Labels with the corresponding Values
       i) HTML
       ii) Rich Text
       iii) Plain Text
   c) Select Lay out using: Line breaks (<br /> tags)




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 23 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                            October 5, 2011




   d) Click on the OK button.

4) Select the words I prefer my email in this format: in the first column, and then right-
   click (Ctrl-Click). Select Quick Tag Editor… from the pop-up menu.
   a) When the Quick Tag Editor appears, type: label for="EmailFormat" and then
       touch Enter.

The Heard About the Web Site Field
1) In the Design View of your forms page, place the cursor into the division associated
   with the Heard About the Web Site question. Click on the Forms tab on the Insert
   toolbar. Then click on the Spry Validation Select button.




2) The Input Tag Accessibility Attributes window should open. Enter the following settings
   a) ID: HeardAboutWebSite
   b) Style: No label tag
   c) Click on the OK button.

3) In the Design View windows, click in the pull-down menu to select it, and then click on
   the List Values… button in the Properties Panel.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 24 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                            October 5, 2011




4) In the List Values window, enter the following matrix of values. It is important that the
   Value associates with the first Item Label (Please Select One…) is empty. When you
   have entered all of the values, click on the OK button.

    Item Label                                Value
    Please Select One…
    Search Engine                             Search Engine
    From a Friend                             From a Friend
    SBCC Class                                SBCC Class
    Q's Bathroom Wall                         Q's Bathroom Wall
    I Really Can't Say…                       I Really Can't Say…




1) Select the words I heard about your web site from…: in the first column, and then
   right-click (Ctrl-Click). Select Quick Tag Editor… from the pop-up menu.
   a) When the Quick Tag Editor appears, type: label for="HeardAboutWebSite" and
       then touch Enter.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 25 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                                   October 5, 2011
The Comments Field
2) In the Design View of your forms page, place the cursor into the division associated
   with the Comments. Click on the Forms tab on the Insert toolbar. Then click on the
   Spry Validation Text Area button.

3) The Input Tag Accessibility Attributes window should open. Enter the following settings
   a) ID: Comments
   b) Style: No label tag
   c) Click on the OK button.

4) In the Properties Panel, the properties for the Spry object will be displayed. Set the
   following attributes.
   a) Type: Comments
   b) Hint: Enter Your Comments (500 Characters Maximum)
   c) Max. chars: 500
   d) Required: unchecked (this is by default)

5) Select the words Comments: in the first column, and then right-click (Ctrl-Click). Select
   Quick Tag Editor… from the pop-up menu.
   a) When the Quick Tag Editor appears, type: label for="Comments" and then touch
      Enter.

The Hidden Field
This is an optional field. If the subject is not set here, a “default” is set in the mail
processing script.

Hidden Fields give you, the web designer, a chance to embed information in a form that the
visitor cannot see or change. In this example we will embed the subject of the email that
will be sent to you.

1) In the Design View of your forms page, place the cursor into the division directly under
   the word Comments: in the left column.

2) Select Insert, Form, Hidden Field.

3) In the Properties Panel, enter Subject in the Name field and what ever you would like
   the subject of the email to be. In this example I have entered, MAT 153 Form Testing.




The Submit Button
The Submit button is what initiates the form action. In the case of Spry objects, based on
our selections, the form is validated on Submit.



4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 26 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                           October 5, 2011
1) In the Design View of your forms page, place the cursor into the division directly under
   the Comments: field in the right column.

2) Select Insert, Form, Button.

3) The Input Tag Accessibility Attributes window should open. Enter the following settings
   a) ID: Submit
   b) Style: No label tag
   c) Click on the OK button.

4) If you would like to change the text on the button, change the Value field in the
   Properties Panel.


Create the "Thank You" Page
The Thank You page allows you to let your visitor know that their submission was, or at
least give the appearances that their information was, received by you.

4) File, New…, Page from Template.

5) If you have defined more than one site, click on the appropriate site, click on the Main
   template, and then click on the Create button.




6) Properly title the page and add some text, such as…




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 27 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                               October 5, 2011
       Thank You!

       Your communication has been sent. I appreciate your comments!

       Regards,
       Scott Nelson


7) Save the page as thank_you.htm (this is the name we used in the script), in the root
   folder.


Testing the Form
This form will only work from pages hosted on your server. The form will not work from the
Dreamweaver Preview in Browser option.

In order for the form to work and display properly the following folders and files, at
minimum, must be uploaded (Put) to your site.

       /cgi-bin/            (and all of its contents)
       /SpryAssets/         (and all of its contents)
       /Styles/             (and all of its contents)
       contact.htm
       thank_you.htm

Once uploaded, go to your site and try the form. You will need access to a web-based email
system in order to confirm delivery and view the email sent from your form.


Creative Commons

This document was created by Scott Nelson for the purpose of assisting students of the
Santa Barbara City College, Multimedia Arts and Technologies, Web Design I, (MAT153)
class.

This document is licensed under a Creative Commons Attribution-Noncommercial-Share
Alike 3.0 Unported License. You are free to copy, distribute and transmit this work and to
adapt this work. You must attribute the work to Scott Nelson, Scott@WebDesignSB.com
(but not in any way that suggests that I endorse you or your use of the work). You may not
use this work for commercial purposes. This license verbiage is attributable to Creative
Commons (http://www.CreativeCommons.org/).

Registered Trademarks found in this document and are the sole property of their respective
legal owners.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 28 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                                     October 5, 2011


Appendix
Always refer to the Web Design Santa Barbara web site for the latest version of these
scripts.

The VB.NET Script
 <%@ Page Language="VB" %>
 <%@ Import Namespace="System.Net.Mail" %>
 <script runat="server">
     Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)


         '*******************************************************************************************
 ********************************
                 '* TERMS OF USE
                 '* The purpose of this script is to allow Santa Barbara City College Students to
 create form email.
                 '* This script is licensed under a Creative Commons Attribution-Noncommercial-Share
 Alike 3.0 Unported License.
                 '* This script was designed for use on Tango Students Hosting.
                 '* This script was designed for use on Microsoft IIS Servers that utilize Net.Mail
 using VB.NET 2
                 '* This script must not be used for illegal purposes.
                 '* Version Date: 4/27/2011

         '*******************************************************************************************
 ********************************

                 'Dimension variables (DO NOT CHANGE THIS SECTION UNLESS YOU KNOW WHAT YOU ARE DOING)
                 Dim objSendMail, strUsername, strPassword
                 Dim strTo, strFrom, strHTMLSubject, strSubject, strHTMLHeader, strHTMLBody,
 strHTMLFooter
                 Dim strDateTime, strEmailAddress, strFromURL, strContactName, strReturnURL, objItem,
 strSMTPServer, strExcludedFields
                 Dim strHTTP_REFERER, strHTTP_USER_AGENT, strHTTP_HOST


         '*******************************************************************************************
 ********************************
                 '* Begin User Specified Variables (YOU MAY CHANGE THESE VALUES)

         '*******************************************************************************************
 ********************************
                 strContactName = "Your First and Last Name"      'This is the name of the person who
 is receiving the form email
                 strTo = "YourEmail@yourdomain.com"       'This is the recipient of this Web Form
 email and will usually be your email address.
                 strSubject = "MAT153 Email Form"         'This is the subject of the email that the
 recipient receive (unless there is a form field named Subject)
                 strFromURL = "http://student0.com.tangostudents.com/contact.htm"         'This is the
 fully-qualified URL of your Web Form
                 strReturnURL = "http://student0.com.tangostudents.com/thank_you.htm"     'This is the
 fully-qualified URL of the Thank You or result page
                 strSMTPServer = "mail.tangostudents.com"         'This is the Tango Students SMTP
 server. Your host will provide this information
                 strUsername = "student0"        'Enter username to authenticate to the email server
 (This is your Tango Student Number)
                 strPassword = "password"        'Enter password to authenticate to the email server
 (This is your Tango Student Passoword)

         '*******************************************************************************************
 ********************************
                 '* End User Specified Variables

         '*******************************************************************************************
 ********************************




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 29 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                                    October 5, 2011


         '*******************************************************************************************
 ********************************
                 '* PLEASE DO NOT CHANGE ANYTHING BELOW UNLESS YOU KNOW WHAT YOU ARE DOING

         '*******************************************************************************************
 ********************************

                 'Automatically acquire the referring page and the browser information
                 strHTTP_REFERER = Request.ServerVariables("HTTP_REFERER")
                 strHTTP_USER_AGENT = Request.ServerVariables("HTTP_USER_AGENT")
                 strHTTP_HOST = Request.ServerVariables("HTTP_HOST")

                 'Check to see if the form is on this domain, if so process the mail, if not, sent
 them back to the form
                 If (InStr(LCase(strHTTP_REFERER), LCase(strHTTP_HOST)) = 0) Then
                   Response.Redirect(strFromURL & "?Referer=NotLocal")
                   Response.End()
                 End If

                 'If the form specifies a Subject, use it
                 If Trim(Request.Form("Subject")) <> "" Then
                         strSubject = Trim(Request.Form("Subject"))
                 End If

                 'Encode form information for display in the HTML email and the time of submission
                 strHTMLSubject = Server.HTMLEncode(strSubject)
                 strDateTime = Now
                 strFromURL = Server.HTMLEncode(strFromURL)
                 strContactName = Server.HTMLEncode(strContactName)

                 'Check for the existence of a FromURL Form Field - Use it if it there
                 If Trim(Request.Form("FromURL")) <> "" Then
                         strFromURL = Trim(Request.Form("FromURL"))
                 End If

                 'Check for the existence of a ReturnURL Form Field - Use it if it there
                 If Trim(Request.Form("ReturnURL")) <> "" Then
                         strReturnURL = Trim(Request.Form("ReturnURL"))
                 End If

                 strExcludedFields = "subject, fromurl, returnurl, submit" 'Exclude these fields from
 the email

                 'Check for a valid email address. If the address appears valid, use it as the
 sender, if not use the recipient
                 If Trim(Request.Form("EmailAddress")) <> "" Then
                   If InStr(Trim(Request.Form("EmailAddress")),"@") <> 0 Then
                         If InStr(Trim(Request.Form("EmailAddress")),".") <> 0 Then
                           strFrom = Trim(Request.Form("EmailAddress"))
                           strEmailAddress = strFrom
                         Else
                           strFrom = strTo
                           strEmailAddress = "Invalid Email Address"
                         End If
                   Else
                         strFrom = strTo
                         strEmailAddress = "Invalid Email Address"
                   End If
                 Else
                   strFrom = strTo
                   strEmailAddress = "No Email Address Submitted"
                 End If

                 'Compose the HTML Header for the email
                 strHTMLHeader = vbCr & _
                 "<" & "!" & "DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.01 Transitional//EN""
 ""http://www.w3.org/TR/html4/loose.dtd"">" & vbCr & _
                 "<html lang=""en-us"">" & vbCr & _
                 "<head>" & vbCr & _




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 30 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                                  October 5, 2011
              "<meta http-equiv=""Content-Type"" content=""text/html; charset=iso-8859-1"">" &
 vbCr & _
              "<title>" & strHTMLSubject & "</title>" & vbCr & _
              "<style type=""text/css"">" & vbCr & _
              "<!--" & vbCr & _
              "body {" & vbCr & _
              "       font-family: Verdana, Arial, Helvetica, sans-serif;" & vbCr & _
              "       font-size: 12px;" & vbCr & _
              "       color: #000000;" & vbCr & _
              "       background-color: #FFFFFF;" & vbCr & _
              "}" & vbCr & _
              "td {" & vbCr & _
              "       font-family: Verdana, Arial, Helvetica, sans-serif;" & vbCr & _
              "       font-size: 12px;" & vbCr & _
              "       color: #000000;" & vbCr & _
              "       padding: 3px;" & vbCr & _
              "       background-color: #FFFFFF;" & vbCr & _
              "}" & vbCr & _
              "th {" & vbCr & _
              "       font-family: Verdana, Arial, Helvetica, sans-serif;" & vbCr & _
              "       font-size: 12px;" & vbCr & _
              "       color: #FFFFFF;" & vbCr & _
              "       background-color: #003399;" & vbCr & _
              "       font-weight: bold;" & vbCr & _
              "       padding: 3px;" & vbCr & _
              "       text-align: left;" & vbCr & _
              "}" & vbCr & _
              "h1 {" & vbCr & _
              "       font-size: 18px;" & vbCr & _
              "}" & vbCr & _
              "h2 {" & vbCr & _
              "       font-size: 16px;" & vbCr & _
              "}" & vbCr & _
              "h3 {" & vbCr & _
              "       font-size: 14px;" & vbCr & _
              "}" & vbCr & _
              ".Footer {" & vbCr & _
              "       font-size: 10px;" & vbCr & _
              "       color: #999999;" & vbCr & _
              "}" & vbCr & _
              ".GrayText {" & vbCr & _
              "       color: #999999;" & vbCr & _
              "}" & vbCr & _
              ".BlueText {" & vbCr & _
              "       color: #003399;" & vbCr & _
              "}" & vbCr & _
              ".SectionHeading {" & vbCr & _
              "       background-color: #DDDDFF;" & vbCr & _
              "}" & vbCr & _
              "-->" & vbCr & _
              "</style>" & vbCr & _
              "</head>" & vbCr & _
              "<body>" & vbCr & _
              "<h1>"& strHTMLSubject & "</h1>" & vbCr & _
              "<p>This information was submitted on: " & strDateTime & "</p>"

              'Start the table to display the form fields and values
              strHTMLBody = vbCr & _
              "<table width=""100%"" cellpadding=""0"" cellspacing=""1"" bgcolor=""#DDDDFF"">" &
 vbCr & _
              "   <tr>" & vbCr & _
              "     <th scope=""col"">Field</th>" & vbCr & _
              "     <th scope=""col"">Value</th>" & vbCr & _
              "   </tr>" & vbCr

              'Get each of the form fields and compile them into table rows
              For Each objItem in Request.Form
                      If InStr(strExcludedFields,LCase(objItem)) = 0 Then
                              If Trim(Request.Form(objItem)) <> "" Then
                                      strHTMLBody = strHTMLBody & _
                                      " <tr>" & vbCr & _




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 31 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                                     October 5, 2011
                                         "    <td valign=""top"">" & objItem & "</td>" & vbCr & _
                                         "    <td class=""BlueText"">" &
 Replace(Server.HTMLEncode(Trim(Request.Form(objItem))),vbCr,"<br>") & "</td>" & vbCr & _
                                         " </tr>" & vbCr
                                 Else
                                         strHTMLBody = strHTMLBody & _
                                         " <tr>" & vbCr & _
                                         "    <td>" & objItem & "</td>" & vbCr & _
                                         "    <td class=""GrayText"">No Response</td>" & vbCr & _
                                         " </tr>" & vbCr
                                 End If
                         End If
                 Next

                 'Get the Referer and the User Agent Information and put it at the bottom of the
 table
                 strHTMLBody = strHTMLBody & vbCr & _
                 " <tr>" & vbCr & _
                 "    <td valign=""top"" colspan=""2"" class=""SectionHeading"">Browser
 Information</td>" & vbCr & _
                 " </tr>" & vbCr & _
                 " <tr>" & vbCr & _
                 "    <td valign=""top"">HTTP User Agent</td>" & vbCr & _
                 "    <td class=""BlueText"">" & strHTTP_USER_AGENT & "</td>" & vbCr & _
                 " </tr>" & vbCr & _
                 "</table>" & vbCr

                 'Compose the footer of the email
                 strHTMLFooter = vbCr & _
                 "<p><hr align=""left"" width=""100%"" size=""1"" noshade>" & vbCr & _
                 "<div class=""Footer"">This automated email was sent from <a href=""" & strFromURL &
 """>" & strFromURL & "</a>.<br>" & vbCr & _
                 "Please contact " & strContactName & ", <a href=""mailto:" & strTo & """>" & strTo &
 "</a>, if you have questions or problems with this email.</div></p>" & vbCr & _
                 "</body>" & vbCr & _
                 "</html>"

                 ' Create the Mail object and send the email as HTML
         Dim MailMsg As New MailMessage(New MailAddress(strFrom.Trim()), New MailAddress(strTo))
         MailMsg.BodyEncoding = Encoding.Default
         MailMsg.Subject = strSubject
         MailMsg.Body = strHTMLHeader & strHTMLBody & strHTMLFooter
         MailMsg.Priority = MailPriority.Normal
         MailMsg.IsBodyHtml = True

         'Dimension and instantiate object to send the mail message (new in 2011 to allow for basic
 authentication)
         Dim SmtpMail As New SmtpClient
         Dim basicAuthenticationInfo As New System.Net.NetworkCredential(strUsername, strPassword)
         SmtpMail.Host = strSMTPServer
         SmtpMail.UseDefaultCredentials = False
             SmtpMail.Credentials = basicAuthenticationInfo
         SmtpMail.Send(MailMsg)

                 'Send your visitor to the Thank You page and quit
                 MailMsg = Nothing
                 SmtpMail = Nothing
                 Response.Redirect(strReturnURL)
                 Response.End()


         '*******************************************************************************************
 ********************************
                 '* End Script

         '*******************************************************************************************
 ********************************

     End Sub
 </script>




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 32 of 33
Creating Forms Using Dreamweaver Spry
Form Objects
                                                                           October 5, 2011

Web.Config for Troubleshooting
In order to troubleshoot a VB.NET script, you must direct the server to render a detailed
error message to the client browser. Normally, you would only direct detailed error
messages to the host server console. However, since you do not have access to the server
console, I offer the following file to assist with the troubleshooting process.

Copy the text from the textbox below, paste it into an empty text document (such as an
empty Notepad text-only document), and then save it into the /cgi-bin/ folder on your
web site. Remove the filename extension (.txt) so that the file name becomes Web.Config.
You must delete this file when you have corrected all form-related issues and the
troubleshooting process is complete. Rendering detailed server-side scripting errors to the
public is considered a breach in web site security. The Web.Config file only affects the
folder it is placed in and child or sub-folders.

 <?xml version="1.0" encoding="utf-8" ?>
 <configuration>
   <system.web>
        <customErrors mode="Off" />
   </system.web>
 </configuration>


If there is already a Web.Config file in the cgi-bin folder, rename this file to Web.bak.
After troubleshooting, when you delete the above Web.Config, rename the Web.bak back
to Web.Config.




4cf0c7bd-949b-47af-88c5-497cd900c41b.doc
                                  Page 33 of 33

								
To top