home > html editors > coffeecup

Insert a HTML Contact Form Using CoffeeCup

Using CoffeeCup to add an email form to your website is very easy. The steps for doing so are outlined within this tutorial. Please note that this tutorial was created using CoffeeCup 2008. The procedure may vary slightly if you are using a different version.

1. Build Your Contact Form HTML

Before getting started in CoffeeCup, you should first generate the HTML form code that will be used to display the form on your site. The easiest way to do this is using an email form service called myContactForm.com which we've written a full tutorial for, here.

2. Open up the CoffeeCup Software

Start CoffeeCup 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 Blank Page (or press SHIFT+CTRL+N).

New Blank Page

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

Open

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.

Select Where You Would Like to Insert the Code

b. Click into the Code Editor for your website.

Code Editor

c. Move the cursor to the location within the HTML that you would like to locate the form.

Select Location

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

Paste HTML Code

e. Click the Preview tab and make sure the form looks correct.

Preview Tab

Preview Screen

5. Save Your Newly Created Form

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

Save

6. Upload The Form to Your Server Space

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 CoffeeCup's built-in client.

7. Send a Test Form Submission

Open a web browser and navigate to the web page containing your contact form. Fill out the form and press the submit button to test it. Be sure to check your email and ensure that the form submission was a success.

A demonstration form created using CoffeeCup can be seen here.