home > html editors > adobe dreamweaver

Use Adobe Dreamweaver to Create an Email Form

Adobe Dreamweaver is a powerful HTML editor that can easily handle the task of email form creation. The steps for doing this are outlined within this article. Please note that this tutorial was created using Adobe Dreamweaver CS3. The process may vary slightly if you are using a different version.

1. Prepare Email Form HTML

Prior to starting the Dreamweaver portion of the tutorial, please make sure to have already generated the HTML code needed to create the email form. The simplest way to do this is using a free email form service such as myContactForm.com. We've written a full article for doing this here.

2. Open up Dreamweaver

Start Adobe Dreamweaver as you would normally do.

3. Create or Open the Page Where you Want the Form

a. To create a new page, go to File > New (or press CTRL+N)

Create New Page in Dreamweaver

b. To open the page where you want the form to be, go to File > Open (or press CTRL+O)

Open up a Page in Dreamweaver

4. Add the Form HTML to Your File

a. Using your mouse, move your cursor to the spot on the page where you would like the form.

Insert the Form HTML

b. Click into the Code View for your website.

Dreamweaver Code View

c. Insert the form HTML into the web site code (Edit > Paste, or CTRL+V, or Right Click and Select Paste).

Paste Form Code

d. Click back to the Design View and make sure the form looks correct.

Dreamweaver Design View

Form Preview in Web Site

5. Save your Form

a. Select File > Save (or CTRL+S)

Save File Screen

6. Upload the Form

Upload the file containing your form to your web server. This procedure will vary depending on whether you are using an external FTP client or Dreamweaver's built-in client.

7. Test the Form

Open a web browser and go to the web page containing your form. Fill out the form and press the submit button to test it. The form should go through without any error messages.

We've created a sample form using Adobe Dreamweaver which can be seen here.

Common Problems Encountered by Users:

The web page is showing a bunch of jumbled HTML instead of a form.

When this occurs, it is caused by the form HTML being pasted into the Design View of your web page instead of the Code View for your web page. Make sure that you are pasting into the Code View.

I submit the form and get a form location error.

If you are using myContactForm.com, you will need to login and make sure that you've set the Form Location setting to the proper URL for your form.

a. Login to myContactForm.com

Login Screen

b. Click the Edit Button

Edit Form

c. Click the Basic Form Information Button

Basic Form Information

d. Enter all variations of the URL where the form will appear. Typically this is the full URL of your web form with and without the www subdomain. You can also use wildcards (*) in this setting. For examples using http://www.mydomain.com/* would allow the form to be placed on any page uploaded to mydomain.com.

Form Location Settings

e. Click Next Button