home > html editors > coffeecup

How to Add Email Forms Using CoffeeCup

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

A demonstration form created using CoffeeCup can be seen here.

1. Create Your Form HTML

The first step in integrating an email form into your website is to build the actual HTML code for the form. The easiest and quickest way to create the form code is to use myContactForm.com.

myContactForm.com features a free online wizard that steps you through the entire form building process. myContactForm.com has just about any feature you could ask for including auto-responders, CAPTCHA, file attachements, CSS styling, data exports (Excel, CSV, Text, HTML, etc.), pre-made templates, and much more.

Click Here to read a tutorial on creating the form HTML using myContactForm.com.

2. Open CoffeeCup

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).

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

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.

b. Click into the Code Editor for your website.

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

d. Paste the form HTML into the code (Edit > Paste, or CTRL+V, or Right Click and Select Paste). If you do not have your form code created and copied, please read this tutorial to learn how to do so.

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

5. Save Your Form

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

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

7. Test Your 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.

A demonstration form created using CoffeeCup 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 Visual Editor of your web page instead of the Code Editor for your web page. Make sure that you are pasting into the Code Editor.

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

b. Click the Edit Button

c. Click the Basic Form Information Button

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.

e. Click