14 Forms

Posted on by

Forms are vital tools for collecting information from users, such as their name, email address, opinions, etc. A form will take input from the user and may store that data into a file, place an order, gather user statistics, register the person or subscribe them to a newsletter.

HTML

The form itself is created in HTML, and starts with the <form>element and ends when that element closes. All the form elements are within the form element, mostly consisting of various input elements.

The input element changes according to its attributes. If there are no attributes, it provides a one line text field:

HTML Code:

<form>
	<input>
</form>

Result:


Attributes

You add the type="text" or type="submit" attributes to the <input> tag to specify if it is text or a submit button. Add a name="name" attribute to reference the form element when it is sent. The size attribute sets the width, measured in blank spaces, and the number of characters can be limited using the maxlength="" attribute.

The submit button is created by using the input tag with a type attribute set to submit. The value="Send" attribute provides the text for the button, so the value send will label the submit button as “send”. Pressing the button engages the <form> action.

There has to be a mechanism for the form to send the information it collects. The <form> element contains a method attribute method="post" that is usually set to post. It can also be set to get, which appends the form information to the URL.

The <form> also has an action attribute action="url.php", which specifies the URL the data is sent to. In this example, it is set to use the email client with the “mailto:” command.

HTML Code:

<form method="post" action="mailto:name@address.com">
	Name: <input type="text" size="30" maxlength="60" name="name"> <br />
	<input type="submit" value="Send"> 
</form>

Result:

Name:

Filling out your name and sending it will open up your email client, and create an email addressed to name@address.com. and the body of the email contains whatever name you’ve entered. This paring up of the name of the form element with the information entered needs to happen for each form element that gets sent.

Radio Buttons

Of the different types of input, the type=radio allows for only one choice out of a number of options. This is accomplished by using the same name for each of the options, so that only one can be chosen. Each option has its own value however, which is sent when that option is selected.

HTML Code:

<input type="radio" name="color" value="red"> Red  
<input type="radio" name="color" value="green"> Green  
<input type="radio" name="color" value="blue"> Blue

Result:

Additive Colors:

Red

Green

Blue

Check Boxes

Check boxes are similar to radio buttons but its possible to click on more than one option.

HTML Code:

<input type="checkbox" name="color" value="cyan"> C 
<input type="checkbox" name="color" value="magenta"> M 
<input type="checkbox" name="color" value="yellow"> Y 
<input type="checkbox" name="color" value="black"> K

Result:

Subtractive Colors:

C

M

Y

K

Drop Down Lists

Another way to present the choices is as a drop down menu, which are especially good when there are lots of options. The drop down list is created by the <select> with each choice enclosed by an option tag.

HTML Code:

<select name="shade">
<option>white</option> 
<option>light grey</option>
<option>grey</option>
<option>dark grey</option>
<option>black</option>
</select>

Result:

Shade?

HTML Text Area

All of the input fields have been single lines up to this point. The textarea provides a larger area to enter text, specified in rows and columns. A row is one line of text high while column unit is a character wide. Another setting is the wrap, which can be either virtual, which wraps the words for the person entering the text, but the text is sent without returns, or, physical, where the text is sent wrapped, just as it appears in the text area. You can also turn text wrap off.

HTML Code:

<textarea rows="5" cols="80" wrap="physical" name="comments">
Enter Comments Here:
</textarea>

Result:

Enter Comments Here:


If you enter text and press the send button, you can see that the words are concatenated (meaning added together) with plus signs and because the wrap is physical, the return is represented by the code: %0D%0A.

PHP script

Thus far the actions for all of these examples has been the “mailto:” which sent the text to the email client. Sending an email with PHP is easy enough. All you need is the PHP mail() function: 

mail("recipient@domain.com", "This is the message subject", "This is the message body");

It gets more complicated when you need to connect up and receive the information, to add security measures, verify the form entry, and so on. Most hosting services have an email script that you can use, and all you need to do is send the form to that script in the action="email-script.php" attribute.

Setting Up Your Form

There are a lot of PHP email scripts on the web, and Free Contact Form is one that is simple and easy to set up. It has all the parts you need. See the demo.

  1. These instructions are for the first version of this script: Download the package.
  2. installation.txt contains basic instructions:
  3. METHOD 1 (Automated)
    1. Upload all files to your website.
    2. In your browser, open the file freecontactforminstall.php and install.
  4. METHOD 2 (Manual)
    1. Create the file ‘freecontactformsettings.php’ using a code/plain text Editor.
    2. Insert the following code into this file : 
      <?php

$email_to = "youremailaddress@yourdomain.com"; // your email address
$email_subject = "Contact Form Message"; // email subject line
$thankyou = "thankyou.htm"; // thank you page

// if you update the question on the form -
// you need to update the questions answer below
$antispam_answer = "25";
?>
    3. Enter your email address in place of youremailaddress@yourdomain.com
    4. Change the email subject (if you like)
    5. Change your thank you page reference (if you like)
    6. Save the file.
    7. Copy ALL files onto your website using an FTP program
  5. Test it out. The thank you page has been redirected with the return button bringing you back here.


Fields marked with * are required.

Alternatives

You need not develop your own php file if you use Form Spree. This allows you to go beyond the options provided for in the php script.

Setting it up is easy and free. Here’s how: You don’t even have to register.

  1. Setup the HTML form

    Change your form’s action attribute to the action input given below. Replace “your@email.com” with your own email.

    <input type=”text” value=”http://formspree.io/your@email.com” />

  2. Submit the form and confirm your email address.

    Go to your website and submit the form once. This will send you an email asking to confirm your email address, so that no one can start sending you spam from random websites.

  3. All set, receive emails

    From now on, when someone submits that form, we’ll forward you the data as email.

HTML5 Forms

Before HTML5, forms had to be carefully vetted with JavaScript to make sure that the information the user input was fundamentally correct, like an email address actually had the form of an email address, and a URL actually had the form of a URL. With HTML5 greatly enhanced forms support, this can be taken care of by the browser. Though there are still some browser compatibility problems, the time is coming when form checking is built right in.

Leave a Reply