To do this, you need to change the entire code !!! The structure is perhaps as follows:
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<ul>
<li>
<label>
<span>Name</span>
<input type="text" name="name" />
<small class="errorText"><?php echo ($_POST["name"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Email</span>
<input type="text" name="email" />
<small class="errorText"><?php echo ($_POST["email"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Subject</span>
<input type="text" name="subject" />
<small class="errorText"><?php echo ($_POST["subject"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Message</span>
<textarea name="message" cols="80" rows="7"></textarea>
<small class="errorText"><?php echo ($_POST["message"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<input type="submit" name="submit" value="Send" />
</li>
</ul>
</form>
And CSS for the same:
* {font-family: Segoe UI, Tahoma;}
h1 {font-weight: bold; font-size: 14pt; padding: 5px 0; margin: 5px 0; border: 1px solid #999; border-width: 1px 0;}
input[type='submit'] {padding: 5px 20px; cursor: pointer;}
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul li {padding: 5px 0;}
ul li label span {display: block; cursor: pointer;}
ul li label .errorText {color: #f00; font-weight: bold; vertical-align: top;}
ul li label textarea {width: 300px;}
Here you can see a live demo: Demo
PHP error handling
Keep error variable for each field. Let's say
<?php
$error = array(
"name" => "",
"email" => "",
"subject" => "",
"message" => ""
);
?>
.
<?php
if (empty()$_POST["email"])
$error["email"] = "Email is required!";
elseif (!isEmail($_POST["email"]))
$error["email"] = "Not a Valid Email!";
?>
, , . - :
<small class="errorText"><?php echo $error["name"]; ?></small>
<small class="errorText"><?php echo $error["email"]; ?></small>
$error["email"] "This field is required", "Not a valid email address!".