How to Make a Working Contact Form for your Website in Dreamweaver CS3

Transcription

1 How to Make a Working Contact Form for your Website in Dreamweaver CS3 Killer Contact Forms Dreamweaver Spot With this E-Book you will be armed with everything you need to get a Contact Form up and running on your website in no time at all using either PHP or ASP. You will also learn how to style your web form using CSS.

2 Table of Contents Introduction 3 Why is a Contact Form Important? 3 1. Setting up Your Website 4 Choosing a Web Host that Allows 3 rd Party Scripts 4 Connect to Your Website Using Dreamweaver CS Creating the Form 8 Creating the Basic Form 8 3. Apply Some Style Using CSS Create A PHP Script to Handle the Form Data Create an ASP Script to Handle the Form Data Additional Tasks Apply Validation to the Form Further Reading and Content (The End Stuff) 18 Page 2

3 Introduction Lessons Learn The purpose of this Guide is to provide you with some techniques that you can use on your website to create a working contact form, whether you need one using PHP or ASP. When I was first starting out in the Web Design industry I would quite often search the web to find someone that could write a simple explanation and tutorial for what I was looking for. Now creating Contact Forms does not have to be as difficult as many people make out on the web. I have looked at a number of articles related to contact forms on the internet and have never really been that impressed with what I have read or tutorials I have done, hence my reason for creating the E-Book. With this E-Book you WILL be armed with all the necessary ingredients to get a WORKING Contact Form up on your website, even if you have little knowledge of PHP, ASP, CSS, HTML or any other acronym that people may throw at you, in no time at all. Let s face it you do not want to be missing out on prospective clients because they think that your product or service is great but they can t get in contact with you! Contact forms should be simple and require minimal input from users. Don t expect users to fill in 20 fields of personal data. They simply won t do it. Keep them simple and easy to fill out and you will have another avenue for people to get in contact with you and in turn may become a client or prospective buyer for your product. I have had a great response from readers at Dreamweaver Spot about these tutorials so I hope you will find this E-Book both useful and easy to follow and understand. This can be used as a reference if needed on projects that you are undertaking. Page 3

4 1. Setting up your Website The key to any good website is the Web Host. From my experience and especially from the comments of readers at Dreamweaver Spot there are a few hosts around that do not like you running any third party scripts like this on their Servers. I use a Web Host called Blue Host and I would highly recommend. Here are some of the features that they offer for $6.95 / month 1,500 Gigabyte Hosting Space Host UNLIMITED Domains!!! 2,500 POP / IMAP Accounts 15,000 GIGS of Transfer SSH (Secure Shell), SSL, FTP, Stats CGI, Ruby (RoR), Perl, PHP, MySQL 2000/2002 Front Page Extensions Free Domain Forever! Free Site Builder 24/7 Superb/Responsive Sales/Support Now I can tell you that the PHP version of the Contact Form works a treat with Blue Host. Once you have created an account with them you can log into CPanel then find the Files Section: You then can click on FTP Accounts and create an FTP Account so that we can set Dreamweaver up using FTP to upload your website files. I like to create a new account here that is different to the default one. Page 4

5 Now if you already have a host then what you need to know is the account the enables you FTP Access to your files. If you don t know then their Support Team should be able to help you out or even their FAQ s. Now that we have got all that sorted we can go ahead and open up Dreamweaver CS3. If you don t have a copy of this then you can just download a trial version and that will get you through. Download a trial version from here. Once you have Dreamweaver open go to the top menu and select Site > New Site Page 5

6 Fill in the fields above and then click NEXT, you will then be presented with these options Depending on your host and what server technology they provide will determine what you will choose here. For the case of this example I will chose PHP MySQL. But if your host supports ASP then there is an option for that as well. The next page you will be presented with options on how you would like to work on your files during development. Choose Edit Locally, then upload to remote testing server. Browse to a location that you would like to store your local files and click NEXT Next we will be asked how we want to connect to the testing server. From the drop down list select FTP, and fill in the FTP Address, the Folder Location (the home folder of your website), for most users it will be public_html, FTP Login and FTP Account Password. Page 6

7 Next Enter the URL of your Website eg: then Click Next and leave the next screen as is and Click NEXT again. Now our website is set up in Dreamweaver CS3. On the right hand side in Dreamweaver under the Heading of FILES you should see something similar to this. Congratulations you have now set up your first site in Dreamweaver CS3!!! Page 7

8 2. Create the Basic Form Ok First things First lets create a Form for your visitor to fill out. Begin by inserting a form and the fields you would like your visitors to fill out onto the page. For this example I am going to create a New Page, but you can easily add this to an existing page if you already have one in mind for the form to be placed on. 1. In Dreamweaver, choose File > New The New Document Dialog Box appears. 2. In the Blank Document list, choose HTML, then click Create to create a new HTML document. 3. In the Title text field in the Document toolbar, enter Contact Form to add a title to your document. 4. Choose File > Save, then save the document in your local site folder. Name it ContactForm.htm. 5. Next we are going to Insert a Form onto the page, Choose Insert > Form then Form from the Flyout Menu. A Form dialog box will then open. In the Action text box type in Formto .php (this is the file you extracted to the root of your website earlier). Change the Method to POST and then in the NAME text box type in ContactForm. <form name="contactform" method="post" action="formto .php"> 6. Next step is to place the form objects onto the page (the information we would like to collect). In this example I have placed a text box for Name and Address, and also a Text Area for Comments. To do this click inside your form object and then from the top menu select Insert > Form > Label. From the Code Window click in between the LABEL Tags and type in Name:. Next from the top menu again select Insert > Form > Text Field. Name the Text field name from the properties box at the bottom. Repeat those steps and add another Label and Text Field and name it . Page 8

9 7. Add another Label and type in Comments. Then add a Text Area, go to Inset > Form > Text Area in the top menu. Name the Text Area comments from the Properties box at the bottom and give the Character Width a value of 50 and the Number of Lines a value of Add a Button. From the top menu select Insert > Form > Button. Your Form should now look like this: (note I have put each element on a different line to help with the usability). <form name="contactform" method="post" action="formto .php"> <label>name:</label><br /> <input name="name" type="text" id="name" /> <br /> <label> </label><br /> <input name=" " type="text" id=" " /> <br /> <label>comments:</label><br /> <textarea name="comments" cols="50" rows="10" id="comments"></textarea> <input name="submit" type="submit" id="submit" value="submit" /> </form> Now that we have a basic form let s add a bit of style to it. The next Section is devoted to Using CSS to style your web form. Page 9

10 3. Using CSS to Style your Form The Fieldset element is used to group related blocks of information and is used here to group the form information. The Legend is used as a title for the form My Contact Form. 1. Now we will use some CSS to add some style. Open up your style sheet or if you haven t created one then create one. Add the following code to it to style the FIELDSET element. fieldset{ border:1px solid #778D1D; margin:1em 0; padding:1em; } Then add the following to style the LEGEND Element. legend{ font-family: "Trebuchet MS"; } 2. The next thing we will do is add some color and style to the text boxes and text area. input, textarea{ border:1px solid #778D1D; background-color:#ecf4ca; } Page 10

11 And that is all there is to it. As you can see with 2 minutes of work you can improve the look and feel of those standard web forms that you still see on websites today. Take it a Step Further... As an added example you could also take it a step further and create two Fieldsets and separate the form even further which is very handy when you have a big and complicated form with different sections. All I have done here is put the Comments Text Area and Label inside an additional Fieldset. Page 11

12 4. Editing the FormTo .php File Now that we have got a nice looking Form placed on our page we need to get the script that will handle the form input up and running. This is the Simple Step and it amazes me that people on the web make this out to be more difficult than it really is. Download this ZIP file that contains the FormTo ,php file. Extract the file and then place it in the same location as the Contact Form that you created in the last section. Only A Couple of Changes to Make... Now we need to edit a couple of lines in the Formto .php file. Open the file in Dreamweaver. The first line you need to edit is the line that starts with $my_ . Change the address to the address you want the s to be sent to. The other line that you may wish to change is this one: This is where the visitor will be directed after they have pressed the SUBMIT button. If you have a page that you like to direct them to then place the location of the file in there, or simply leave it blank and they will get a thank you message on the same page. Page 12

13 5. Creating a Contact Form Using ASP 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 Contact Form Page you created earlier. Copy the ASP Code Below and Paste it in between the <body> tags of the ASP Page. <% Const cdosendusingmethod = _ " Const cdosendusingport = 2 Const cdosmtpserver = _ " Const cdosmtpserverport = _ " Const cdosmtpconnectiontimeout = _ " Const cdosmtpauthenticate = _ " Const cdobasic = 1 Const cdosendusername = _ " Const cdosendpassword = _ " Dim objconfig ' As CDO.Configuration Dim objmessage ' As CDO.Message Dim Fields ' As ADODB.Fields Dim Name, , Comments Name = Request.Form("name") = Request.Form(" ") Comments = Request.Form("comments") ' 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 >" End With.Update Page 13

14 Set objmessage = Server.CreateObject("CDO.Message") Set objmessage.configuration = objconfig With objmessage.to = "< Address That The Will Be Sent To >".From = "< Address That The Will Be Sent FROM >".Subject = "SMTP Relay Test".TextBody = "SMTP Relay Test " & 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 Address that the will be sent to and also the Address that the will be sent from..to = "< Address to Send To >".From = "< Address To Be Sent From >".Subject = "SMTP Relay Test".TextBody = "SMTP Relay Test " & 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 " & Now() & vbcrlf & "Surname: " & Surname & vbcrlf & "First Name: " & FirstName & vbcrlf & " " & & vbcrlf & "Message: " & Message The last step you will need to do is open your Contact Form and change the action property of the form so that it sends the form data to the right script eg: <form name="contactform" method="post" action="contact_us.asp"> Page 14

15 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, , Website, Message, PhoneNumber FirstName = Request.Form("FirstName") Surname = Request.Form("Surname") = Request.Form(" ") 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 that is sent..textbody = "SMTP Relay Test " & Now() & vbcrlf & "Surname: " & Surname & vbcrlf & "First Name: " & FirstName & vbcrlf & " " & & vbcrlf & "Message: " & Message & "Phone Number: " & PhoneNumber Page 15

16 7. Form Validation in Dreamweaver In Dreamweaver CS3 there is a very easy way to apply form field validation let me show you. Apply the Validation To The Form Elements Ok open your form in Dreamweaver click on the Submit Button. Now on the Top Menu Select Window > Behaviours you will now notice on the right hand side under the TAG Heading that the Behaviours Tab is now active. Click the Plus Icon and then Select Validate Form. You will then be presented with the Validate Form Dialog Box. Here you will find all the Fields that we can apply Validation to. For this example I went through and marked all the fields required, and also for the text box I only want to accept and address so I selected the Radio Button next to the Accept Section. Page 16

17 After you have applied the Validation that you require, Save the Document and test it by not entering in anything into the fields. You should get a pop up box like this. There we have it, you can now apply form validation to your Contact Forms. Page 17

18 More Great Content For more great content on Web Design, Blog Design, CSS Tutorials, Dreamweaver Tutorials then visit Daniel s Blog at Version You are currently reading Version 1.0 of this E-Book that was published in May There will continue to be updates to this Book as the need arises so make sure you have the latest version. Page 18