Building A Form

There are many reasons you might want to create a web form for you site. It can be a contact form to gather specific information from visitors, feedback on a particular topic for a school project or perhaps you’re hosting a tea part and need information from guests in an RSVP.

If you’re a business you may want to design a job application, or service request form for customers to complete. Forms aren’t just for email! You’ve probably filled out dozens of forms online for a wide range of reasons.

There are several ways to design a form and there are two parts to that design. The form itself and a program that processes the data entered into the form. That program can be easy, such as a Contact Form. Or it can be complicated, such as those used by corporations to take in data, process it and give you a specific result.

This post isn’t about the programs. It’s about the forms and how to set up an easy Contact Form that you can use for eMail contact, a questionnaire or that RSVP and anything else you might want to have eMailed to you.

Once again there’s a difference between setting up a form on a standard website and setting one up on a blog. In this tutorial, we are talking about website forms. I’ll get to blog forms in a little bit. So let’s get started.

Finding The Right Program
The key piece to this puzzle is the program that collects the data entered by your visitor, that will be eMailed to you.

Many Host providers have pre-canned programs that you can install onto your site and use for your form. You’ll have to do a little research on their site to find out if they have a program to offer. Or you can do a web search for an email program and find instructions for how to install it.

If your Host does not provide canned programs, you can find a variety of free programs on the internet. You’ll want to search for a free email script. There are a ton of these, so you’ll have to do a little research and expand your horizons a bit.

Or build a customized script specifically for your site at TheSiteWizard.com. At the time of this writing – I really love this place! TheSiteWizard.com’s Free Customized Feedback Form Wizard creates a FREE feedback form for your website. This allows you to put a Feedback Form or Contact Form on your site so that visitors can send you messages / email or make comments.

In full disclosure their site isn’t the greatest user friend site I’ve seen. So I’ve written instructions of my own for how to use it. See HTML 108.1 – SiteWizard for step by step instructions for using their site to generate your customizable script, installing it and customizing it for your specific needs.

If you’re creating a CAPTCHA form, enter the public and private captcha keys you got in from Google (learn more about Captcha and how to install it: HTML 108.2 – Captcha).

What I like best about this Wizard is that it hides your email address from source display. So a spammer can’t go to your form, display the source code, get your email address and start sending you spam. Your email is hidden, at least until you reply to a submitted email.

No matter what email program you choose, you’ll have to follow their instructions for uploading the program to your website. Each one will have its own instructions, so try to choose one that provides a good write up to guide you through each step.

Contact Form Components
In addition to the program, most Contact programs require you to design a couple of pages for your form. So be prepared. When you have filled out forms, you’ve probably gotten a page that said thank you, or you made an error and need to correct something in the form. In a website design, these are additional web page you will have to create in addition to the contact page itself.

The Thank you and Error pages are just like your other html pages. There’s nothing special about them. And you’ll upload them in the same place you put your contact form page.

Contact Form Components:
There are two parts to coding a form in a webpage. The first points to the Contact program to be used, and the second is the form itself. Without the Form action, the form itself cannot work.

<FORM ACTION=”feedback.php” METHOD=”POST”> . For CGI Scripts: /<form action=”/<span class=”>cgi-bin/feedback.php” METHOD=”POST”>	Form Action The Form Action links a web page to the contact program you’re using. In this case, the script is called feeback.php. . This may be different from what your host provides, so you’ll need to do a little research if you don’t already know. Contact form programs written in Perl or that are CGI scripts have a specific library they must be installed into on your host server. You’ll have to verify this with your host.
<!– —Start Email Form— –>	Adding Comments HTML comment tags allow you to add labels or reminders in your web page for easier maintenance, without them being visible through a browser. I highly recommend using these.
<INPUT Type=”text” Name=”subject” Value=”Tea Party RSVP”>	Input Tag The main tag used in the form is the Input tag. By definition the Input tag, ‘inputs data’ that will be sent through the contact form. The parameters will define the type of data to be sent.  You can learn more about all the tag parameters at  W3Schools – Input Tag. These are the most commonly used parameters for a Contact form. Type – The type of field you are defining. This can be: A text field where visitors input their information A hidden field that your visitor doesn’t see, but is needed to pass data through your form. A radio button A drop down box A check box An email Name – is the name you give the field. This is the name that will be passed to your Contact form program. Value – is a pre-determined value of this field that will be sent to the Contact program. Size – When a value is not used, the size parameter defines how big the input field should be in the display. Ie: Your Email:
<INPUT TYPE=”hidden” NAME=”recipient” VALUE= “you@yourdomain.com”>	Hidden Fields If your Contact program doesn’t hide your email address, you’ll need to define it within the form. This tells the program where to send the contact information being collected within your form. . An example would be “burt@mylittlewebsite.com”
<INPUT TYPE=”hidden” NAME=”subject” VALUE=”My Site Feedback”>	Define The Subject Line Next we set up the subject of the email. There are some NAME values that are reserved words. Defaults that set a standard for form usage. . Four of these you will use often in a Contact form: email, subject, required and comments.
<INPUT TYPE=”hidden” NAME=”required” VALUE=”name,email, comments”>	Setting Required Fields Not all scripts allow you to define certain fields in your form as required. In other words you may want to require someone to provide their name and include comments. If they don’t do this you can serve up your error page. . The VALUE field holds the field names of the items you’re will require to be completed in you contact form. The field-names must be exactly the same as the NAME fields you define on your form. In this case, NAME, EMAIL and COMMENTS are required; but keep in mind, the names are also case-sensitive. If you code your email field like this: eMail – then here in the required Input string, you must also type it as: eMail.
<INPUT TYPE=”hidden” NAME=”responsepage” VALUE=”http://youdomain.com /thanks.htm”>	The Thank You Page Most email forms allow you to display a page once the submit button has been selected by the visitor. This can be a thank you page, or a page you provide to define additional information or instructions. . “ResponsePage” is a reserved word for most email script. You will need to tell the browser the full URL address of the thank you page being displayed to your visitor after they press submit and successfully send the contact form.
<!– — Name, Email — –> <P>Your Name: <INPUT TYPE=”text” NAME=”name” SIZE=”25″></P>	Your Contact Form Now we can begin the meat of your form. The previous information is required to set up where you form is sent and how. Now you can begin to set up the form fields your visitors will fill out. . Most forms start with personal information, name and email address of your visitor. Start with the LABEL of the field. In this case the label is “Your Name:”. This is what your visitor will see on the page. . Next define the field that will appear on the screen. The field is identified as  INPUT, the type of input is “TEXT”, the NAME of the field is “name”, and the size or the width the field is set to “25” pixels. Your visitor will see this on the form: . Your Name:
<P> Your Email: <INPUT TYPE=”text” NAME=”email” SIZE=”25″> </P>	For a contact form, most people want to ask for the senders email address so they can respond to them. The structure is the same as the previous field. Type your standard text for the field label. In this case “Your Email:”. . Many form scripts identify “email” as a reserved word for how the script processes this particular field. So you don’t want to use this for anything other than requesting the email address from your visitor. They will see this on the form: . Your Email:
<P>Your WebSite: <INPUT TYPE=”text” NAME=”website” SIZE=”30″ VALUE=”http://”> </P>	Now you might want to know if your visitor has a website so you can check them out. . The size is a little larger, this time so they have room to type in their website address. But here you can also add a “Value” to the field your visitor will see on the screen. What you place in the “Value” parameter, will pre-fill the field on the screen for the visitor. Your visitor will see this on the form: . Your WebSite:
<P> What are you contacting us for? Please choose one of the following: <BR> <INPUT TYPE=”radio” CHECKED=”1″ NAME=”Contact-For” VALUE=”Site Feedback”> Site Feedback <BR> <INPUT TYPE=”radio” NAME=”Contact-For” VALUE=”Site Design”> Site Design </P>	Radio Buttons On your form you may want to have your visitor choose certain options for the type of contact they are making. . The structure is basically the same as the previous fields. But here the TYPE parameter is defined as “radio” to identify this as a radio button. . CHECKED tells your browser to preset this option to checked. . The NAME of the field is “Contact-For”, or what your visitor is contacting you for. And the Value you want sent to your email is “Feedback”. This time, we’re going to put the label at the end of the input field. In this case “Site Feedback”. . Now having 1 radio button doesn’t make much sense. You will need to add a second radio button, but there are key parts to remember. The Name of the field MUST be the same as the previous Input string. So both buttons are sending data for “Contact-For”. Leave out the “CHECKED” parameter. This will make the radio button open or not checked. Set the value for the radio button to “Site Design”. Your visitor will see this on the form: What are you contacting us for? Site Feedback Site Design
<!– — Comments — –> <P>Please enter your comments here: <TEXTAREA NAME=”comments” ROWS=”7″ COLS=”40″> </TEXTAREA> <BR>	Comments Section Contact forms include a section for visitors to send you information or comments. The structure is a little different from previous fields as you will need to define the size of the comments area. . Here we have a start tag to begin the comment section with <TEXTAREA>, and a close tag to end as </TEXTAREA>. . The NAME is the name of the field, in this case “comments”. Instead of a size to define the width, a text area needs to know how high (how many rows) and how wide (how many columns) to make the field. . In this case we’re making the field “7” pixels high and “40” pixels wide. You can play around with these numbers and alter the size of the area to fit your site design. This is what your visitors will see: . Please enter your comments here:
<!– —Submit Form— –> <INPUT TYPE=”submit” VALUE=”Submit Feedback”> <INPUT TYPE=”reset” VALUE=”Clear Form”>	Submission & Canceling Buttons Next define the buttons at the bottom of your webform for your visitors to submit the information they’ve entered. .  This time the TYPE is “submit” and the VALUE you want to see in your button will be “Submit Feedback”. . You should also include a clear button in case your visitor changes their mind about what they entered into the fields of your form. The TYPE is “reset” to clear the form and the VALUE you want to see in the button is “Clear Form”. . Both submit and reset are reserved words for the form syntax. Your visitor will see this on the form: .
</form> </body> </html>	Lastly you need to close out the form and close the HTML page.

Here’s an example of a standard Contact form:

The Source Code <!– ——————— Start Form —————————— –> <input name=”recipient” value=”your-email@yourdomain.com” type=”hidden”> <input name=”subject” value=”My Website Feedback” type=”hidden”> <input name=”required” value=”email,Comments” type=”hidden”> <input name=”redirect” value=”http://yourdomain.com/cont-tks.htm” type=”hidden”> . Your Name: <input name=”Name” size=”27″ type=”text”> Your Email: <input name=”email”size=”27″ type=”text”> ex: yourname@abcdomain.com<p> Please enter your comments here: <textarea name=”Comments” rows=”7″ cols=”65″> . <center><input type=”submit” value=”Submit Feedback” />   <input type=”reset” value=”Clear Form” /> </center> <!– ——————— End Form —————————— –>

The code above will create the following form: . Your Name: Your Email: ex: yourname@abcdomain.com . Please enter your comments here: .

If you’re using Captcha, to secure your form, you’ll also have an additional set of code to add to your form page. Each Captcha installation will be different depending on the Captcha provider. They should give you the code to add to your form page that will display the challenge window like the one below.

If you want to use Captcha, but you’re not sure what to do or where to go, visit my HTML 108.2 – Captcha) for further instructions.

Good Luck.
.

© 1997-2014 Springwolf, D.D., Ph.D., Springwolf’s Kosmos. All Rights Reserved.