Freelance 3D Animator, Designer, Artist

Home > 3D Tutorials > Creating Email Web Forms in Dreamweaver
 

Creating Email Web Forms in Dreamweaver.

What is an email web form?
An email web form is a useful way to allow people to contact you from your website without having to open up there email account.

The one at www.glyndavidson.co.uk/freelance-contact.aspx is an example of this.

This tutorial will guide you through creating one of these using Dreamweaver.

 

 

Open up Dreamweaver and start with a new blank html page.

We want to create a form that looks like this:

Name
Email Address
Message

This will allow us to capture the name of the person who is sending you the email, their email address, and a message.

So go ahead, click on ‘Insert > Form’. This will give you a red dotted line showing where your form is.

 

We now need to start placing the various form components into the web page. But first of all, to get the labels and the text boxes to align correctly we will need to create a table. Click on ‘Insert > Table’. And make a table with four rows and two columns.

 

Type the labels into the left hand column and resize the columns accordingly.

We can now start putting in some text boxes. Click in the top right cell and then click ‘Insert > Form > Text Field’. We have already created the labels for our text boxes so click on the ‘No label’ option and then click ‘OK’.

 

Do the same again in the next row down to capture the email address. Text boxes are useful for capturing short messages such as peoples names. However, for the body of the message, the visitors to your page might want to write something lengthy. So fot his you need to give them a text area instead of a text field. To do this click in the third row down and then click on ‘Insert > Form > Text Area’.

 

The default text area is a little small so we will need to make it bigger. To do this click on the text area to select it. Then in the property inspector (At the bottom of the screen) change the ‘Num Lines’ value to 5.

 

Just above the Num Lines value, type in 47 for the Char Width value. This will make the text area wider. Change the Char Width of the two text boxes above to 50.

 

Merge the two cells in the bottom row by highlighting them both and then clicking on ‘Modify > Tables > Merge Cells’.

Next is to include a submit button. Click in your bottom cell and then go to ‘Insert > Form > Button’.

 

Save the page and test it in a browser.

Hang on a moment, you haven’t told the form where to send email to yet. =D To do this click anywhere inside the red dotted line and then click on <form#form1> just above the property inspector at the bottom of your screen.

The properties for the form will be displayed in the property inspector. Change the enctype to "application/x-www-form-urlencoded”.  Then in the action field type in mailto:yourname@yoursite.com. Replace yourname@yoursite.com with your own email address.

 

That’s it, all done. Try it out in a browser such as Mozilla Firefox or Microsoft Internet Explorer and then in a few moments check your email inbox.

 

 

Where to now?
There are a few problems with sending email this way. Firstly, your users need to have an email program installed and configured on their home computers such as Outlook express, Live Mail or Novell Groupwise. Secondly, the users will sometimes get a nasty pop-up message warning them that the message has not been encrypted. The only way around this is to learn a scripting language such as ASP or PHP.

Or if you don’t fancy learning a scripting language, open up dreamweaver. Got to ‘File > New’. Create a new dynamic page that uses ASP.NET VB.

Go into the code view. Delete all of the code that is there, and copy and paste the text below. Replace "yourname@yoursite.com” with your own email address and finally upload the file to a server. If it doesn’t work then your server might not be configured to run ASP pages. If this is the case you will need to contact your hosting provider. Please note that you cannot usually run ASP pages on your home computer.

<%@Page language="VB" Debug="True" %>
<%@ Import Namespace="System.Web.Mail" %>
<script language="VB" runat="server">
Sub btnSend_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim mail As New MailMessage
mail.From = txtEmail.text
mail.To = "yourname@yoursite.com "
mail.Subject = "~ A message from your web form ~"
mail.Body = "Message from " & txtName.text & ":" & vbcrlf & txtMessage.Text
mail.BodyFormat = MailFormat.Text
SmtpMail.Send(mail)
end sub
</script>
<html>
<body>
<form runat="server">
<table border="0">
<tr>
<td width="130"><div align="right">Name*</div></td>
<td width="308"><asp:textbox Columns="50" Css id="txtName" rows="1" runat="server" TextMode="SingleLine"  /></td>
</tr>
<tr>
<td width="130"><div align="right">Email Address*</div></td>
<td width="308"><asp:textbox Columns="50" Css id="txtEmail" rows="1" runat="server" TextMode="SingleLine"  /></td>
</tr>
<tr>
<td><div align="right">Message*</div></td>
<td><asp:textbox Columns="50" Css id="txtMessage" rows="5" runat="server" textmode="multiline" /></td>
</tr>
<tr>
<td colspan="2" align="center"><asp:button id="btnSend" runat="server" text="Send" onclick="btnSend_Click" /></td>
</tr>
</table>
</form>
</body>
</html>

 
 
Site Map Terms and Conditions Privacy Policy
 

Glyn Davidson - Freelance 3D Designer, 3D Animator, 3D Illustrator, CG Artist, Graphic Designer, Motion Graphics and VFX

Copyright © Glyn Davidson, 2007-2013, ALL RIGHTS RESERVED


Modify Freelance Animator Site Design Modify Freelance CG Designer Site Design Black 3D Design Portfolio Dark Grey 3D Design Portfolio Default 3D Design Portfolio Grey 3D Design Portfolio Light Grey 3D Design Portfolio Lighter Grey 3D Design Portfolio