A while back, my colleague Karthik posted a CSS styled form. This time, I am going to show how to build the backend of an HTML form using PHP.
To begin with, you can take the code from Karthik’s example and paste it into a file called ‘contact.php’ or a name of your own choosing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Form Styling!</title>
</head>
<body>
<h2>Input Form</h2>
<form id="input-form" name="input-form">
<label for="first-name">First Name: </label>
<input type="text" id="first-name" name="first-name" class="field" />
<label for="last-name">Last Name: </label>
<input type="text" id="last-name" name="last-name" class="field" />
<label for="e-mail">E-mail: </label>
<input type="text" id="e-mail" name="e-mail" class="field" />
<label for="text">Message: </label>
<textarea id="text" name="text" class="field"></textarea>
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
</body>
</html>Of course, Karthik’s form doesn’t supply a method or action, as it is just an example. Let’s add that in. For this example, we will have the method be POST, because it can handle longer messages, and have the action be blank, meaning it will call the same page.
<form id="input-form" name="input-form" method="post" action="">So, let’s put some PHP into it before the Doctype.
<?php
$first_name = isset($_POST['name']) ? $_POST['first-name'] : '';
$last_name = isset($_POST['subject']) ? $_POST['last-name'] : '';
$e_mail = isset($_POST['email']) ? $_POST['e-mail'] : '';
$text = isset($_POST['content']) ? $_POST['text'] : '';
$ip = $_SERVER['REMOTE_ADDR'];
?>What this does is fetch the values posted by the form if it exists, otherwise sets the variable to empty. If the variable has not been set, and we try to assign it to a variable, PHP might choke on it, so we should check before we assign just in case. The next step is to check if the person has submitted the form, or if they’ve only opened the page. If the person has submitted the form but has left certain fields, we’ll want to tell him/her. Now we’ll add a piece of PHP between the body tag and the form tag.
<?php
if (isset($_POST['email']) && (empty($first_name) || empty($last_name) || empty($e_mail) || empty($text)) {
echo "<ul class=\"validation\">\n";
if (empty($first_name)) echo "<li>First name not entered</li>\n";
if (empty($last_name)) echo "<li>Last name not entered</li>\n";
if (empty($e_mail) || !is_valid_email($email)) echo "<li>Email adress not entered</li>\n";
if (empty($text)) echo "<li>No message entered</li>\n";
echo "</ul>\n";
} elseif (isset($_POST['email'])) {
$content = "$first_name $last_name ($ip) write:\n\n$text";
$sent = mail("[email protected]", "Message from Mars", $content, "From: $e_mail");
if ($sent) {
echo "<ul class=\"success\">\n";
echo "<li>Your message has been sent</li>\n";
echo "</ul>\n";
} else {
echo "<ul class=\"error\">\n";
echo "<li>Your message could not be sent at this time. Please try again later.</li>\n";
echo "</ul>\n";
}
}
?>What this does is first check if the form has been submitted (if it has been submitted, all the variables will be set, so we can just check for one of them) and if it has, if it’s missing any one of the fields, then it will throw out an error message with a list of missing parts. You can style this how you like.
The next part checks that the form has been submitted, and since it passed the first test, everything has been filled in, so it sends an email off. The PHP mail() function takes arguments in the order: send-to address, subject, content, other headers and returns whether or not the message was sent. In the other headers, we specify the From address. Replace the email address with the one you want the emails sent to and the subject to your preferred subject. We then output a message telling the user if the message was sent.
Since the PHP segments only write out if the form has been submitted, only the form is shown. However, what if the person wrote a beautiful 5-page essay and put it in, but forgot to put in his name? Then his entire message will be gone! We can rectify this by echoing the posted variables into the form. If nothing’s been submitted, the variables will be empty and he won’t know any better. If it’s been submitted, the filled in elements will be retained.
<form id="input-form" name="input-form" method="post" action="">
<label for="first-name">First Name: </label>
<input type="text" id="first-name" name="first-name" class="field" value="<?php echo $first_name; ?>" />
<label for="last-name">Last Name: </label>
<input type="text" id="last-name" name="last-name" class="field" value="<?php echo $last_name; ?>" />
<label for="e-mail">E-mail: </label>
<input type="text" id="e-mail" name="e-mail" class="field" value="<?php echo $e_mail; ?>" />
<label for="text">Message: </label>
<textarea id="text" name="text" class="field"><php echo $text; ?></textarea>
<input type="submit" id="submit" name="submit" value="Submit" />
</form>So, the final product:
<?php
$first_name = isset($_POST['name']) ? $_POST['first-name'] : '';
$last_name = isset($_POST['subject']) ? $_POST['last-name'] : '';
$e_mail = isset($_POST['email']) ? $_POST['e-mail'] : '';
$text = isset($_POST['content']) ? $_POST['text'] : '';
$ip = $_SERVER['REMOTE_ADDR'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Form Styling!</title>
</head>
<body>
<?php
if (isset($_POST['email']) && (empty($first_name) || empty($last_name) || empty($e_mail) || empty($text)) {
echo "<ul class=\"validation\">\n";
if (empty($first_name)) echo "<li>First name not entered</li>\n";
if (empty($last_name)) echo "<li>Last name not entered</li>\n";
if (empty($e_mail) || !is_valid_email($email)) echo "<li>Email adress not entered</li>\n";
if (empty($text)) echo "<li>No message entered</li>\n";
echo "</ul>\n";
} elseif (isset($_POST['email'])) {
$content = "$first_name $last_name ($ip) writes:\n\n$text";
$sent = mail("[email protected]", "Message from Mars", $content, "From: $e_mail");
if ($sent) {
echo "<ul class=\"success\">\n";
echo "<li>Your message has been sent</li>\n";
echo "</ul>\n";
} else {
echo "<ul class=\"error\">\n";
echo "<li>Your message could not be sent at this time. Please try again later.</li>\n";
echo "</ul>\n";
}
}
?>
<h2>Input Form</h2>
<form id="input-form" name="input-form" method="post" action="">
<label for="first-name">First Name: </label>
<input type="text" id="first-name" name="first-name" class="field" value="<?php echo $first_name; ?>" />
<label for="last-name">Last Name: </label>
<input type="text" id="last-name" name="last-name" class="field" value="<?php echo $last_name; ?>" />
<label for="e-mail">E-mail: </label>
<input type="text" id="e-mail" name="e-mail" class="field" value="<?php echo $e_mail; ?>" />
<label for="text">Message: </label>
<textarea id="text" name="text" class="field"><php echo $text; ?></textarea>
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
</body>
</html>And that’s it. Have fun.