How To Create A Contact Form In Dreamweaver CS3 Using ASP--tutorial.jcwcn.com

On the back of my tutorial on How Create a Working Contact Form In Dreamweaver CS3 which used PHP. There have been a few requests from readers here at Dreamweaver Spot if I could provide an article on How To Create A Contact Form in Dreamweaver using ASP. So for all you people that have sites hosted on a server that has ASP Support then you will find this article of great use.

There are quite a few of these around but I found, especially when I was looking at this that most of them are very hard to configure and follow. So I have written this in an easy to follow way. You can download the files for this Article from Heres.

NOTE: This form does not have any Form Validation as yet. This is the Topic of an upcoming article so make sure you Subscribe To The RSS Feed so you don’t miss it.

Step 1. Setup the Contact Form
Create a New Page in Dreamweaver. File > New > Blank Page > HTML > Create. Insert a Form. So From the Insert Menu Select Form.

Dreamweaver ASP Form To Email Contact Form Tutorial

From the Form Dialog Box that pops up give the Form an action of contact_us.asp (this will be the name of the page that we send this info to to process it and send you an email). Also change the Method to Post.

Now Using a combination of Labels and Text Boxes and a Text Area Layout the Form the way you would like it. In this example I have placed the Labels directly above the Input Boxes for useability purposes. I have also used a field set to group the elements together. If you need to know more about styling web forms with CSS then read this article.

Now when you are placing the Text Boxes and the Text Area on the page make sure that you give them the following names:
FirstName, Surname, Email, Website, Message. This is very very important as the ASP Script that I will be using will require these names.

To make it really simple. The text box that you are using for the users first name give it a name FirstName etc etc. You get the drift. In this Article I am not going to go into to much detail about using css to style the form and its elements you can check out how do do that here. You can see my simple form below.

Now that we have a simple Contact Form set up let’s move onto to the important stuff, the ASP Page that will handle the form processing.

Step 2. Create the ASP Page to Handle The Form and Send You an Email

In Dreamweaver, create a new ASP Page. File > New > Blank Page > ASP VBscript. Save this page as contact_us.asp and into the same location as the Form Page you created earlier.

Copy the ASP Code Below and Paste it in between the <body> tags of the ASP Page.


<%
Const cdoSendUsingMethod        = _
	"http://schemas.microsoft.com/cdo/configuration/sendusing"
Const cdoSendUsingPort          = 2
Const cdoSMTPServer             = _
	"http://schemas.microsoft.com/cdo/configuration/smtpserver"
Const cdoSMTPServerPort         = _
	"http://schemas.microsoft.com/cdo/configuration/smtpserverport"
Const cdoSMTPConnectionTimeout  = _
	"http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout"
Const cdoSMTPAuthenticate       = _
	"http://schemas.microsoft.com/cdo/configuration/smtpauthenticate"
Const cdoBasic                  = 1
Const cdoSendUserName           = _
	"http://schemas.microsoft.com/cdo/configuration/sendusername"
Const cdoSendPassword           = _
	"http://schemas.microsoft.com/cdo/configuration/sendpassword"

Dim objConfig  ' As CDO.Configuration
Dim objMessage ' As CDO.Message
Dim Fields     ' As ADODB.Fields
Dim FirstName, Surname, Email, Website, Message

FirstName = Request.Form("FirstName")
Surname = Request.Form("Surname")
Email = Request.Form("Email")
Website = Request.Form("Website")
Message = Request.Form("Message")

' Get a handle on the config object and it's fields
Set objConfig = Server.CreateObject("CDO.Configuration")
Set Fields = objConfig.Fields

' Set config fields we care about
With Fields
	.Item(cdoSendUsingMethod)       = cdoSendUsingPort
	.Item(cdoSMTPServer)            = "< Enter SMTP Server Name Here >"
	.Item(cdoSMTPServerPort)        = 25
	.Item(cdoSMTPConnectionTimeout) = 10
	.Item(cdoSMTPAuthenticate)      = cdoBasic
	.Item(cdoSendUserName)          = "< Enter SMTP Server Username >"
	.Item(cdoSendPassword)          = "< Enter SMTP Server Password >"

	.Update
End With

Set objMessage = Server.CreateObject("CDO.Message")

Set objMessage.Configuration = objConfig

With objMessage
	.To       = "< Email Address That The Email Will Be Sent To >"
	.From     = "< Email Address That The Email Will Be Sent FROM >"
	.Subject  = "SMTP Relay Test" 
	.TextBody = "SMTP Relay Test Sent @ " & Now() 
	.Send
End With

Set Fields = Nothing
Set objMessage = Nothing
Set objConfig = Nothing
%>

Now what you will need to do is change the values of the lines that I have highlighted in RED. Enter the name of your SMTP Server (eg: mail.yourdomain.com), SMTP Username (if your server requires authentication, which most do) and also your SMTP Password.

Just Check Your POP3 Account Settings and you will find the details there if you do not know them.

The Next Values to change are the Email Address that the email will be sent to and also the Email Address that the email will be sent from.


.To = "< Email Address to Send To >"
.From = "< Email Address To Be Sent From >"
.Subject  = "SMTP Relay Test" 
.TextBody = "SMTP Relay Test Sent @ " & Now()

Now I want to change the text body to display the values that the visitor entered into the form, so I am going to add those variables into the Text Body Section.


.TextBody = "SMTP Relay Test Sent @ " & Now() & vbCrLf & "Surname: " & Surname
& vbCrLf & "First Name: " & FirstName & vbCrLf &
"Email: " & Email & vbCrLf & "Message: " & Message

And that is all there is to it. You should now have a Simple Easy To Use Contact Form Created with ASP and Dreamweaver.

Additional Tasks

1. Add a Thank you Message to the Body of the contact_us.asp Page
2. If you need or want to add some more fields to the form then you will need to do the following:

Find This Section of Code in the contact_us.asp page and add the value (let’s say we wanted phone number) in a couple of spots. On the line that starts with DIM and their also needs to be an entry in the section below that.


Dim FirstName, Surname, Email, Website, Message, PhoneNumber

FirstName = Request.Form("FirstName")
Surname = Request.Form("Surname")
Email = Request.Form("Email")
Website = Request.Form("Website")
Message = Request.Form("Message")
PhoneNumber = Request.Form("PhoneNumber")

The Value that is inside the () needs to be the same as the name of the Text Box on the Form Page and is Case Sensitive. So phonenumber is different to PhoneNumber.

You will then need to edit this section to make that new field appear in the email that is sent.


.TextBody = "SMTP Relay Test Sent @ " & Now() & vbCrLf & "Surname: " & Surname
& vbCrLf & "First Name: " & FirstName & vbCrLf &
"Email: " & Email & vbCrLf & "Message: " & Message
& "Phone Number: " & PhoneNumber

I hope that makes all your life’s a lot easier when creating a Contact Form using ASP. Make sure you SUBSCRIBE TO THE RSS FEED so you don’t miss any more of these easy to follow tutorials. In an upcoming Article I will be showing you How To Configure Form Validation Using Dreamweaver.

If you would like to be like everyone else and receive Tips on How To Improve Your Website then SIGN UP to my Web Design Tips Newsletter

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

How To Create A Contact Form In Dreamweaver CS3 Using ASP

relation tutorial

Category

New

Hot