Dreamweaver contains many built-in tools to aid in quickly building dynamic sites. Part 1 of this series showed the Record Insertion Form Wizard to set up a simple user registration form on a web site. The registration form allows a user to register for a site. Part 2 will show validation and the user agreement, using more built-in tools of Dreamweaver and a little rudimentary JavaScript. The tutorial will apply equally to PHP, ASP, ColdFusion, and JSP using built in tools. Part 3 will show how to pass registration details to Paypal or other payment processor for a paid membership-type of site.

The User Agreement

Many sites require that you agree to a specific agreement before signing up for the site. This can be for legal reasons, licensing, or just agreeing to abide by certain rules. We'll add this using a simple checkbox -- checking the box allows the user to submit the form.

There are many ways to implement an agreement -- a popup window, textarea, layer, or a separate page. I will implement it as an iframe. Using an iframe makes sense for something like this because the agreement can be stored centrally and used in other places -- changes to the agreement can be made in one place. It also has the advantage of allowing scrolling easily within the page -- the agreement is typically longer than is desired on a form page, pushing the submit button too far down the page. Using an iframe, the area can be kept small and the user has to scroll to see the entire agreement. Of course, you can do this other html elements as well, but in an iframe you have the added benefit of the separate page.

Set up a page called agreement.php (or agreement.cfm, agreement.asp, etc. depending on your server language.) On that page, include the text of the agreement, like the following:

User Agreement

TERMS OF USE (EULA) AND GENERAL DISCLAIMER FOR xxx.COM

THE FOLLOWING TERMS AND CONDITIONS SET FORTH HEREIN THIS DOCUMENT ARE UNDER THE ASSUMPTION THAT YOU AGREE AND ABIDE BY ALL TERMS AND CONDITIONS SET FORTH IN THIS DOCUMENT, AND IF YOU DO NOT AGREE TO THESE TERMS AND CONDITIONS, YOU ARE NOT PERMITTED TO USE THIS WEBSITE. PLEASE READ THE TERMS CAREFULLY AND UNDERSTAND THAT BY USING THIS WEBSITE YOU HAVE INESCAPABLY AGREED TO THESE TERMS AND CONDITIONS.

1. blah blah blah

2. etc.

Save the page and include it as an iframe in the signup page created in Part 1 of this series. Dreamweaver doesn't have a built-in iframe tool, but you can type the tag into code view (or use the HTML tab of the Insert bar to insert the tag) and use the Tag inspector (Window > Tag Inspector) to add attributes, as shown in Figure 1:

Figure 1: Using the Tag Inspector to set <iframe> attributes
Figure 1: Using the Tag Inspector to set <iframe> attributes

With the iframe in place, you can save and browse the signup page. It should look something like this:

Figure 2: The Signup form with the user agreement
Figure 2: The Signup form with the user agreement

The next step is to add a checkbox to the form and some text like "I agree to the terms and conditions set forth below." I usually work in design view at this point and use some of Dreamweaver's built in table tools, such as right-click > Table > Insert Rows or Columns:

Figure 3: Inserting a row for the checkbox
Figure 3: Inserting a row for the checkbox

Add the checkbox (named "agree") and text into the row, and you are now ready for the JavaScript validation.

Validation

Dreamweaver comes with a rudimentary JavaScript validation tool. In Window > Behaviors there is a Validate Form entry that allows simple JavaScript validation for required fields, email addresses, and some other simple validations. The best place to add this validation is on the <form> tag onsubmit event. To do this, simply select the <form> tag in the tag selector, then choose Validate Form from the Behaviors panel. Check the "Required" checkbox for each form element that you want to make required, and click the Email Address radio button for the MemberEmail field:

Figure 4: The Validate Form behavior
Figure 4: The Validate Form behavior

You'll notice that the checkboxes in the form do not show up in this behavior. The agreement checkbox will have to be validated manually by coding some JavaScript in code view, but must also be used in conjunction with the existing validation. To do this, we will use some Boolean logic. Boolean logic is easy if you understand the foundation: true and true is true, false and false is false, true and false is false. The form currently has this in the onsubmit event:

onsubmit="MM_validateForm('MemberUsername','','R',
'MemberPassword','','R','MemberEmail','','RisEmail',
'MemberFirstName','','R', MemberLastName','','R',
'MemberAddress','','R', 'MemberCity','','R',
'MemberPostalCode','','R');
return document.MM_returnValue"

The MM_validateForm function sets a variable in the browser window -- document.MM_returnValue. This value will be either true (the form validates) or false (the form does not validate). Because this is in the onsubmit event, we can return either true (to allow submission) or false (to prevent submission.) Using this logic, we can use something like this (using the JavaScript for "AND" -- &&):

return document.MM_returnValue && MM_findObj('agree').checked

The first value (document.MM_returnValue) will be either true or false, and the second value (MM_findObj("agree").checked) will be either true or false. The form will only be submitted if both expressions are true.

Tip: The Dreamweaver Validate Form behavior also added the Adobe/Macromedia function MM_findObj(), which is handy for finding the reference to a form element. We could also have given the checkbox an ID and used document.getElementById('agree').checked instead, but the MM_findObj() function works well for element references.

Now, the form elements have to be filled out in order to submit the form, and the agreement box has to be checked. Unfortunately, at this point there is no error message for the agreement checkbox. We can rectify this by putting the test into another JavaScript function instead of directly in the onsubmit event. Add this function to the head of the document:

function validateAgreement() {
  if(MM_findObj('agree').checked) {
    return true;
  }else{
    alert("Must agree to the agreement");
    return false;
  }
}

Now, write the onsubmit return statement like this instead:

return document.MM_returnValue && validateAgreement();

The effect is the same -- the function returns true or false.

Conclusion

User membership or signup forms are a staple of the web, and one can be created easily in Dreamweaver using built-in tools. The next part in the series will show how to pass some of this information to a system like Paypal to accept a membership fee or donation.