Carol's Easy HTML

Forms

There are a number of ways to use HTML forms. A form can contain textfields, checkboxes, radio-buttons and more. In this section you will find several different ways to use forms. A very common use of forms is to generate email.

Our Avon websites do not allow outside linking in the normal way. By following my simple instructions you'll soon be able to link your email address - or even an outside website - on your very own Avon website.

Form Buttons

This is a basic FORM BUTTON for email. Just copy and paste my code into your site - inserting your own information where you see the blue text.

* You will need to put your e-mail address immediately after the "mailto:" without a space!

The Code

<CENTER>
<form method="link" action="mailto:your email address"><input type="submit" value="EMAIL ME"></form>
</CENTER>

Want to add some pizazz to your EMAIL FORM BUTTON?

You can change my font color and background color to any color you choose. Just fill in your own information where you see the blue text.

The Code

<CENTER>
<FORM METHOD="link" ACTION="mailto:your email address"><INPUT TYPE="submit" VALUE="EMAIL ME"input style="background-color: #FF6699; color: #FFFFFF; font-weight: bold; font-size: 10pt;"></FORM></CENTER>

Email Form Button
with subject line

How would you like your EMAIL FORM BUTTON to have a Subject Line? One that will catch your reader's eye and entice him/her to open your email.

Your subject line should clearly state what your reader can expect from your email. Keep in mind that you are working with a very small space and plan your subject line accordingly.

SPAM SUCKS! Two tricks that could trip a spam filter: subject lines in all capital letters, and using more exclamation points than necessary.

Here is my EMAIL FORM BUTTON with SUBJECT LINE. Go ahead and give it try. Pretty cool, huh?

To use this EMAIL FORM BUTTON with SUBJECT LINE just copy and paste my code into your site - inserting your own information where you see the blue text.

You can also change my font color and background color to any color you choose. Just copy the color code you like and replace it with the numbers in my code.

* IMPORTANT - NO SPACES! There cannot be any spaces in your email address or your subject.

The Code

<center>
<form action="mailto:your email address?subject=your subject" method="post" enctype="text/plain"><INPUT TYPE="submit" value="EMAIL ME" style="color: #FFFFFF; background-color: #3299CC"></FORM>
</center>

Image As An Email Link

To use an image as an email link, you will have to first choose an image. You may use any of the following EMAIL GRAPHICS - but please right-click and save all images to your own computer/server. If you are not sure how to save images to your computer please click IMAGES and read my tutorial.

* Linking directly to my graphics is considered bandwidth theft and is illegal. Thanks!

Click here for EMAIL GRAPHICS

Here is my IMAGE AS AN EMAIL LINK with a SUBJECT LINE.

The Code

<CENTER>
<FORM onclick="location.href='mailto:your email address?subject=AVON'"><IMG src="your filename.gif (or .jpg)" border=0 alt="email"></FORM>
</CENTER>

Here is the code WITHOUT a SUBJECT LINE.

Avon's Personal Beauty System

Here are a few 'copy & paste' codes for Avon's Personal Beauty System.

If you would like to change the background color just change my GREEN color code to any color you choose.

If you would like to change the color of the text just change my RED color code to any color you choose.

The Code

<CENTER>
<form action="http://avoncustomerbeauty.com" target="_blank" method="get"><input style="background-color: #FF6699; color: #fffaf0; font-weight: bold; font-size: 10pt;" style="width: 225px" type="submit" value="AVON Personal Beauty System"></form>
</CENTER>

The Code

<CENTER>
<form action="http://avoncustomerbeauty.com" target="_blank" method="get"><input style="background-color:#0073EB; color: #fffaf0; font-weight: bold; font-size: 10pt;" style="width: 225px" type="submit" value="AVON Personal Beauty System"></form>
</CENTER>

The Code

<CENTER>
<form action="http://avoncustomerbeauty.com" target="_blank" method="get"><input style="background-color: #3DE697; color: #000000; border: 2px inset #000000;" font-weight: bold; font-size: 10pt;" type="submit" style="width: 225px" value="AVON's Personal Beauty System">

Using An Image For Your
Form Background

In this section I am going to show you how to add a background image to your form button. You will find several examples below.

In order to have your own Form Button Background you must first choose your background image. After your image is chosen you must then download the image to your computer. After it is saved to your computer you will need to upload it to a server. If you are not sure how to do this click on IMAGES and read my tutorial.

If you are using Photobucket for your web host you must substitute your own information where you see the blue "your filename.gif (or .jpg)".

You can also change the font color and the border color. Just copy and paste the color code you like and replace it with the numbers in my code.

Here are a few examples of what you can do with background images in a form button.

The Code

<CENTER>
<form method="link" action="mailto:your email address"><input style="background-image: url(your filename.gif (or .jpg)); border: 3px solid #2F5B87; color: #2F5B87;font-weight: bold;font-size: 10pt;" type="submit" value="EMAIL ME"></form>
</CENTER>

The Code

<CENTER>
<form action="http://avoncustomerbeauty.com" target="_blank" method="get"> <input style="background-image: url (your filename.gif (or .jpg)); border: 1px solid #327D5B; color: #327D5B;font-weight: bold;font-size: 10pt;" style="width: 225px" type="submit" value="AVON Personal Beauty System"> </form>
</CENTER>

Image Linking

Now we're going to set up an image that becomes a clickable link. Your viewer clicks on the image, instead of clicking on text.

For example - I'll make a link to my Avon Website using the image below. Go ahead and give it a try. Just click on the image.

You can use this code on your Avon website to link to any outside website. Just replace my blue text with your own information - without spaces!

<CENTER><FORM onclick="location.href='website address goes here'"><img src="your filename.gif (or .jpg)" border=0 </FONT></FORM></CENTER>

Top of Page

visitors are currently browsing this site

Forms

Categories