As part if a recent project I was tasked with building a data capture wordpress plugin. Of course I could have adapted an already existing plugin for my needs but I fancied the challenge and wanted a bit of ownership over a function I provided. Here’s the breif-

Display multiple forms on a website that not only send notification emails but also store the submitted information in a database that allows the client to download all email addreses as a csv file.

Sounds like a laugh!

I’ll be doing this it 2 sections. Part one (this one) will concentrate on building a simple web form that submits to another page and sends an email. In part 2 we’ll look at building the plugin and saving the form data to that plugin.

So. Here we go.

Here’s the code for the form

<form id="contact" action="<?php bloginfo('template_url'); ?>/thanks.php" method="POST">

 <p>Your Name:</p>

 <input type="text" id="name" name="name">

 <p>Your Email:</p>

 <input type="text" id="email" class="input" name="email">

 <input type="text" id="confirm" class="confirm" name="confirm">

 <p>Your Message:</p>

 <textarea rows="10" id="message" class="textarea" name="message"></textarea>

 <input type="submit" value="Submit">

 </form>

Simple right? Take note of the text field with an id of “confirm”. We’ll be using that in a rather nifty way…

And here’s the css-

.input, .textarea {
 color:#bbbbbb;
 display:block;
 font-size:23px;
 margin-bottom:10px;
 padding-left:10px;
 padding-top:2px;
 width:300px;
}

.textarea {
 width:304px;
}

.submit {
 color:#333333;
 float:right;
 height:30px;
 width:200px;
}

.input, .textarea, .submit {
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 border:1px;
 cursor:pointer;
}

.confirm {
 display:none;
}

As you can see, the only special markup here is on the “confirm” class. We’ve set a property of display:none. We’re going to be using this input as our nifty spam catcher. Essentially we are going to check if that field is empty or not. If it’s not empty then it was a bot! Bots will not notice the css applied to the field and just fill it out as normal.

The form submits to a page “thanks.php”. This is where the magic happens!

Here’s the code for thanks.php in full -

<?php include('../../../wp-blog-header.php'); ?>

<?php get_header(); ?>

 <?php    

if (!empty($_POST['confirm'])) {

 echo "ARE YOU HUMAN?";

} else {

 if (isset($_POST['name'])) {

 ?>

 <?php

 $name = $_POST['name'];

 $email = $_POST['email'];

 $messagebody = $_POST['message'];

 $to = "info@jealousdesigns.co.uk";

 $subject = 'New message from ' . $name;

 $message = $messagebody;

 $from = $email;

 $headers = "From: $from";

 mail($to,$subject,$message,$headers);    

 ?>

 <h1>Thanks <?php echo $name ?>!</h1>

 <span>

 <p>You will hear from me soon!</p>

 <p>Andy</p>

 </span>

 <?php

}

}

?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

There’s a whole bunch of code in their so lets go through it step by step.

First of all we make this page part of the WordPress framework so that we can use all of the handy in built functions-

<?php include('../../../wp-blog-header.php'); ?>

Then we include our header -

<?php get_header(); ?>

Now comes the fun part. First of all we want to check to see if our phoney confirm field has been filled in and if it has stop the process. We then carry on with a little fail-safe and just double check that the field “name” HAS been filled in. (NB. I am using jquery to validate this form in real life but if you wanted to add server side validation here would be the place to do it.)

 <?php    

if (!empty($_POST['confirm'])) {

 echo "ARE YOU HUMAN?";

} else {

 if (isset($_POST['name'])) {

 ?>

Next up we define our variables that have been passed from our form for easy reference later on.

<?php

 $name = $_POST['name'];

 $email = $_POST['email'];

 $messagebody = $_POST['message'];

And now we set up and send our email notification-

$messagebody = $_POST['message'];

 $to = "info@jealousdesigns.co.uk";

 $subject = 'New message from ' . $name;

 $message = $messagebody;

 $from = $email;

 $headers = "From: $from";

 mail($to,$subject,$message,$headers);    

 ?>

And then show a little thank you message-

 <h1>Thanks <?php echo $name ?>!</h1>

 <p>You will hear from me soon!</p>

 <p>Andy</p>

And that’s it! You now have a fully functional online contact form.

Next up we’ll look at building a WordPress plugin to save and display all of this data and how to integrate this form in to it.