How to implement a dynamic email form on your website.
Spam robots on the web are a scourge. If you simply put a link to your email address on the web, you are guaranteed 13 Viagra ads and 2 "Free Trips to the Caribbean!" by the end of the week.
As well, simply giving someone a link to your email address doesn't allow you to request specific information from them, and you may miss important opportunities to get the kind of feedback you desire from your website users.
Email forms allow you to specifically tailor your interaction with your customer by asking the exact questions you want the answers to, in addition to giving them a freeform space to get their own point across. Email forms also protect you from having your email address harvested by Spam robots by keeping your actual email address hidden. The email form passes the user's information along to you behind the scenes.
How to Do This Tutorial
For this tutorial you will not need the HostBaby Administration menu. The email form simply requires that you edit the getinfo.html already on your server (or create your own email form) and edit one line on the emailit.html file, also already on your server.
If you don't have "getinfo.html" and "emailit.html" on your hard drive already, go FTP download them from the webserver down to your hard drive, so you can make changes to it.
If you don't know how to download a file from your webserver to your hard drive, check out our FTP Tutorial or contact firstname.lastname@example.org for special help. FTP uploading and downloading are the VERY basics of making your website, so you should learn that before making a concert calendar or anything else.
Once you have the files open in your HTML editor, move to the next step.
emailit.html serves two purposes. First, it contains the code the server needs in order to know that the email form contents should be sent to your email address. Second, it acts as a "Thank You!" page for the website user so they know that their email was successfully sent to you.
At the top of the emailit.html file, you will see something that looks like this;
<? require "hostbaby"; /* WHATEVER EMAIL ADDRESS YOU PUT BETWEEN THE ("") WILL GET THE FORM STUFF BY EMAIL */ email_form_to(""); ?>
What you need to do here is to enter the email address that you wish the contents of the getinfo.html file to be sent to between the "s in the (""). This can be any address, just be certain that you double-check for typos. See the example below. We'll use the email address email@example.com.
<? require "hostbaby"; /* WHATEVER EMAIL ADDRESS YOU PUT BETWEEN THE ("") WILL GET THE FORM STUFF BY EMAIL */ email_form_to("firstname.lastname@example.org"); ?>
Editing the thank you portion of emailit.html
The second function of emailit.html is to act as a confirmation for your website users that their email was sent successfully.
This part of the emailit.html file is completely flexible. Below this line in the existing HTML;
<!-- put your own thank-you page here -->
You may design to your heart's content - change the text, the look and feel, anything you want. The sky is the limit. The only inflexible portion of the page is the lines of PHP code at the top that you've already edited.
But before you start your creative juices flowing, let's make sure it works. Move on to the next step to test your mail form.
Now that emailit.html knows what address to send the information to, let's try testing it out!
Do a [CTRL]-N (or Command-N on Mac) to open a new web browser window. Point that window to http://www.yoursite.com/getinfo.html - leaving THIS window where it is. Flip back and forth between the two. Read things in this browser-window. Try them in the other browser-window.
When you load getinfo.html, you should see something similar to this screen shot. This is a basic form that functions perfectly on its own, but that you may also edit completely, which I'll show you how to do next. First, try sending yourself an email.
Go ahead and fill out the form once and press the "Click HERE to SEND it!" button. When you've done so, move ahead to the next step.
Testing confirmation with emailit.html
After pressing the "Click HERE to SEND it!" button, you should be taken to a page that looks similar to this screenshot:
Now, go ahead and check your email at the address that you previously entered into the emailit.html file. Providing your Internet Service Provider (ISP) is timely, an email sent from your web form should be in your inbox. If it is not, double back and re-check your email address at the top of the emailit.html file to be sure it was entered correctly.
If you confirm that it is entered correctly, give it a few minutes to determine if there is an email latency problem on your ISP's end. If, after waiting and double-checking, you still have not received the email, Contact Hostbaby@Hostbaby.com to troubleshoot.
When you've got it all squared away and you're positive that the email form works, move on to the next step: experimenting with the form itself!
Edit getinfo.html - Form Action
The email form itself is 100% flexible. You can request as little or as much information as you like; from one line to 100 lines of input fields, in all varieties. Drop down boxes, text boxes, radio buttons, check boxes or freeform input fields - anything an HTML form can do, your form can do.
There are two ways to create your own custom email form. The first is to edit the existing getinfo.html file, and the second is to create your own form on any other page of HTML that you care to.
Implementing the form on an existing page of HTML, or putting it on a new HTML page of your own creation is very simple. There are only two lines required to make the form work.
The most important line in the form is the line below:
<form action="emailit.html" method="post">
Unless you change the name of emailit.html, you should not need to edit this line at all. (If you wish to change the name of emailit.html, simply revise the line above to reflect the new page name.) It is necessary to have this line at the top of any email form you wish to use.
The second line is the closing form tag, which tells the HTML page that any information on the page past the closing tag is not part of the form. It looks like this, and should be the very last line of your HTML form:
To implement the HTML form on a page of your own creation, simply cut and paste the data from the beginning of the "form action" tag to the end of the "end form" tag into your document, and then you can edit the form elements in between as you wish to.
To simply use the getinfo.html page make sure it's open in your HTML editor and move on to the next step: Editing the Form Elements!
Edit getinfo.html - Form Elements
Now we get to the fun part; The form elements themselves! This is where you can get as creative as you'd care to. If you're not familiar with form elements, there are a few links listed below to good online tutorials and books to study up on, but even beginners can change the existing form elements by following the instructions below.
Beneath the form action line that we discussed in the previous step, you should see a table row that looks like the following:
<tr><td>Your name:</td> <td><input type="text" size="30" maxlength="40" name="name"></td> </tr>
Now, let's say this was my form and I wanted to ask someone; "Where did you find your Golden Ticket?"
The first line I need to change is the line that currently says "Your name:". There I will want to enter my own question, so it will look like the following:
<tr><td>Where did you find your Golden Ticket?:</td> <td><input type="text" size="30" maxlength="40" name="name"></td> </tr>
The next line I'll need to change is the form element itself, so that when the user presses the 'Click HERE to SEND it!' button and the email arrives in my inbox I'll know which question the user is answering. This also ensures that the form itself knows which bit of information needs to be passed on to you. The form element is currently called "name". I'm going to change the name this form element to "GoldenTicket". See below.
<tr><td>Where did you find your Golden Ticket?:</td> <td><input type="text" size="30" maxlength="40" name="GoldenTicket"></td> </tr>
It's important to name the form elements in a common sense fashion. The names that you give the form elements will indicate to you which questions the user is answering in which order. (note the picture below.)
See how 'GoldenTicket:' precedes the user's input ("in my wonka bar!")? In this fashion, the names that you give the form elements will keep you from having to double-check your form each time you receive an email to decipher the message. You may name the form elements anything you like. Do not, however, use spaces. To space out words, use the underscore (example: "Willy_Wonka" rather than "Willy Wonka".)
If you take the same principles I applied above and edit your form elements on getinfo.html, you can have this form collect any type of information you like. Just be sure to type in the question you wish to have answered and name the form element in the way that will be least confusing to you when you read it.
HTML Form Elements Tutorials
- HTML Forms and Input Tutorial - W3Schools
- So, You Want A Form, Huh? - HTML Goodies
- Forms: Interactivity for the World Wide Web - link to Amazon.Com
- Accessible Forms with CSS - WebWeaver.org
Changing the look of your email form
The getinfo.html page that we created for you on your web server is about as plain as you can get. Simple elements on a white background.
Changing the look of the form is entirely in your hands. You can implement CSS style sheets, paste the form onto an existing page that already has your preferred look and feel or even leave it exactly as it is. The choice is entirely yours.
Here are some good links about CSS stylesheets: