Part 1 | Getting Started
HTML forms are an important element of Web design. Most HTML forms use PHP scripts to process and Email form data to a recipient. PHP (Hyper Text Preprocessor) is an open source server side scripting language that can be embedded in, or called from, HTML. It is widely used in Web design for collecting and delivering form data.
– “Success is a journey – not a destination.”
HTML Forms & PHP
HTML Forms | HTML & CSS Form Example
Most websites utilize contact and sign up forms. HTML <form> tags are used in connection with PHP scripts to collect input information from the user and email the data to a recipient. Nearly all websites include a simple contact form to request information. Many sites require more complex forms including sign up and login forms associated with memberships. In a simple contact form, the HTML might only include a form tag, a few input fields, and a submit button to send the form.
The Form Tag
The HTML <form> tag element wraps nested form elements containing the user input to be collected in a form.
Form Elements
HTML Form Elements are types of user input including text fields, text area fields, radio buttons, checkboxes and submit buttons:
The <input> Element
HTML Input Elements are the most common type of form elements and can include a wide variety of different input types including:
<input type=“text”> = defines a single line text field.
<input type=“textarea”> = defines a multi-line text field.
<input type=“radio”> = defines a radio button for choices.
<input type=“checkbox”> = defines a checkbox for choices.
HTML Input Types can also define the preferred method of input such as text, numerals, email and more using programming to validate the format:
<input type=”tel“> = can be validated for phone number formats.
<input type=”email“> = can be validated for email address formats.
The <select> Element
The Select Element defines a drop-down list in a form for input:
<select name=”inquiry-type”>
<option value=”sales“>Sales Question</option>
<option value=”support“>Support Question</option>
<option value=”general“>General Question</option>
<option value=”donate“>How to Donate</option>
</select>
Input Attributes
Form elements can also contain a variety of attributes to control the default state of the input type and identify the input element. For example, the following text input element defines placeholder text “Your Name”, has a visible size (length) of “36” characters, and has an id of “name”:
<input type=“text” placeholder=“Your Name” size=“36” id=“name” >
Input elements may also include the required attribute that can be programmed to make input a requirement by the user to be able to submit the form:
<input type=”tel” size=“36” id=“phone” required>
<input type=”email“size=“36” id=“email” required>
The Action Attribute
A <form> tag usually includes an action attribute that calls a script to process the form input data:
<form action=”contact_form.php” method=”post” id=”contact-form”>
PHP Scripts | contact_form.php
PHP is a server side scripting language that can be embedded into HTML. It is widely used in websites to collect and deliver data and can generate HTML from the server dynamically based on user input. Unlike client side Javascript that is processed by the browser, PHP scripts run from the Web server. Many open source CMS frameworks such as WordPress, Drupal and Joomla are built on PHP.
PHP form scripts are typically used to collect data from a contact form to send an Email to a recipient. PHP mail scripts include the form input element id’s to identify to the data to be collected and the order in which that data should be displayed in an Email sent when the form is submitted.
PHP scripts (and Javascript) can also be used for validation , which requires the user to fill out some or all of the input fields. Input element validation can also require the data to be input in a specific format or syntax including text, numerals, phone numbers or a valid email address.
HTML forms can be very complex and often require custom backend programming to facilitate the desired functionality. For a more in-depth explanation of PHP form scripts, including validation attributes, visit:
HTML / CSS Form Example
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
<style>
#contact-form {
width: 420px;
height: 200px;
border: #666666 solid 1px;
padding: 10px;
margin: 20px auto 20px auto;
font-family: Helvetica, Arial, sans-serif;
}
.form-group-1 {
float: left;
margin-bottom: 8px;
}
.form-group-2 {
float: right;
}
.clear {
clear: both;
padding-top: 10px;
}
</style>
</head>
<body data-rsssl=1 data-rsssl=1 class="contact-form">
<form action="contact_form.php" method="post" id="contact-form">
<h2> Contact Form</h2>
<div class="form-group-1">
<input type="text" placeholder="Your Name" size="36" id="name" >
</div>
<div class="form-group-2">
<textarea cols="24" rows="5" placeholder="Your Message" id="message"></textarea>
</div>
<div class="form-group-1">
<input type="email" placeholder="Your Email" size="36" id="email">
</div>
<div class="form-group-1">
<input type="tel" class="form-control" placeholder="Your Phone" size="36" id="phone">
</div>
<div class="clear">
<button type="submit">Send Message</button>
<div class="form-group-2">
<select name="inquiry-type">
<option value="sales">Sales Question</option>
<option value="support">Support Question</option>
<option value="general">General Question</option>
<option value="donate">How to Donate</option>
</select>
</div>
</div>
</form>
</body>
</html>
contact_form.php
<?php
// Collect form field data
$name = $_POST['name'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
// Create the email and send the message
$to = 'yourname@yourdomain.com';
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n";
mail($to,$email_subject,$email_body,$headers);
return true;
?>Proceed to the next part of the guide if you feel you have a solid understanding of the topics covered so far. Review the related links to study these concepts in more detail.