Adding a contact form to WordPress

 

 

 

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. contact Adding a contact form to WordPress

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.

080411 0341 Addingacont1 Adding a contact form to WordPress

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.';

}

}

}

 

?>

080411 0341 Addingacont2 Adding a contact form to WordPress

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).

080411 0341 Addingacont3 Adding a contact form to WordPress

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

080411 0341 Addingacont4 Adding a contact form to WordPress

.

Mo Moumenine
Mo Moumenine, a media professional with more than 20 years experience in setting up media companies and managing them. Previously founder and CEO of the first Integrated converged media house in Dubai. Vice President of Programming for CNBC Middle East ( to 2006). Currently enjoying my free time in South East Asia, working on my first book on Social Media and writing for my blog. google

2 Responses to “Adding a contact form to WordPress”

  1. 2
    heather Says:

    Hey Guys, We do a lot of social media boosting and would love the opportunity to work with you! One of our current offers is 10,000 Twitter followers for 24.99 and 1,000 facebook likes for $19.99. Let me know if you have any questions.

  2. 1
    christopher Says:

    i have followed your instructions on ‘Adding a contact form to WordPress’ and it works fine but it does not list the “Reason” in the email when chosen on the contact form- please advise

Leave a Reply

CommentLuv badge
 
Proudly designed by Theme Junkie.
Wordpress SEO Plugin by SEOPressor