HTML forms can be useful for any website no matter what type of content you have on your site. But they can also be one of the most vulnerable parts of a website, if not implemented and designed correctly they can allow hackers to inject code into your site or database. In this article I will build on what was already previously learnt from the article on creating pages in WordPress. We will take our contact page which was created earlier and add a contact form to the WordPress page as well as a PHP file required for processing the POST request and sending out the emails.

In this tutorial I will be using the HTML and PHP code taken from the phpnerds website (http://www.phpnerds.com/article/building-a-secure-contact-form). I will be altering this form so that it fits better with WordPress.

Before we begin I also highly suggest that you install a plug-in that will allow you to insert raw HTML, because WordPress can incorrectly format your HTML using the editor provided by default. I have installed "WP unformatted" and "Advanced custom fields" plug-ins to allow me to insert raw HTML. If you are not familiar with these plug-ins I suggest you read through the instructions when installing them.

First things first, you will need to create a page called "Contact us". Next click on the HTML editor and paste the following code.

<br>

<form name="contact" method="post" action="http://www.example.com/contact.php" style="text-align:left;">

<table>

<tr><td>Your Name:</td><td><input type="text" name="Name"></td></tr>

<tr><td>Your Email:</td><td><input type="text" name="Email"></td></tr>

<tr><td>Subject:</td><td><input type="text" name="Subject"></td></tr>

<tr><td>

Reason:</td><td>

<select name="Reason" style="width:200px;">

<option value="1">General Feedback</option>

<option value="2">Advertising</option>

<option value="3">Privacy Issues</option>

</select>

</td></tr>

</table>

<br />

Message:<br>

<textarea name="Message" cols="50" rows="8"></textarea><br /><br />

<input type="submit" name="submit" value="Contact Us">

</span>

</form>

You will notice if you take a look at the original HTML code I have added a table to the contact form, this allows the description and the input boxes to be aligned up. I have also included CSS styling on the form so that the contact form is positioned on the left. Depending on your template, you may need to make the input boxes larger or smaller, but the sizing should be sufficient for most templates.

Next you will need to alter the action section of the form to point to your php file which we will be creating. To create the php file, simply copy and paste the following code into notepad and save as contact.php.

Be sure to change the appropriate sections with your email addresses and subject.

<?php

$emailSubject = $_POST['Subject'];

$emailMessage = $_POST['Message'];

$emailFrom = $_POST['Email'];

$emailFromName = $_POST['Name'];

$emailList[1] = 'comments@example.com';

$emailList[2] = 'advertising@example.com';

$emailList[3] = 'privacy@example.com';

if (!preg_match('/^([A-Z0-9\.\-_]+)@([A-Z0-9\.\-_]+)?([\.]{1})([A-Z]{2,6})$/i', $emailFrom) || empty($emailFrom)) {

echo 'The email address entered is invalid.';

} elseif (empty($emailSubject)) {

echo 'You must enter a valid subject.';

} elseif (empty($emailMessage)) {

echo 'You must enter a message to send to our team.';

} elseif (($_POST['Reason'] < 1) || ($_POST['Reason'] > 3)) {

echo 'You have selected an invalid department.';

} else {

if (empty($emailSubject)) {

echo 'You must enter a valid subject.';

} elseif (empty($emailMessage)) {

echo 'You must enter a message to send to our team.';

} elseif (($_POST['Reason'] < 1) || ($_POST['Reason'] > 3)) {

echo 'You have selected an invalid department.';

} else {

$emailTo = $emailList[$_POST['Reason']];

if (!empty($emailFrom)) {

$emailHeaders = 'From: "' . $emailName . '" <' . $emailFrom . '>';

} else {

$emailHeaders = 'From: "Your Name" <webmaster@example.com>';

}

/* Send Email */

if (mail($emailTo, $emailSubject, $emailMessage, $emailHeaders)) {

echo 'You message has been sent!';

} else {

echo 'There was an internal error whilst sending your email.<br>';

echo 'Please try again later.';

}

}

}

?>

Next using your FTP client, upload the php file to the main directory of your website. Make sure you test it out so that you know its working before you publish the page. Try testing it out by entering some incorrect information and you will see that you get an error message (which is good).

Finally test it out to see if the form works by submitting the contact form to your self.