A Simple Form for WordPress

This tutorial describes how to implement a form in a WordPress blog.

The intent is to make the functionality as simple as possible to understand. Therefore, nonessential features are omitted, as are nonessential instructions. You get the basics.

After understanding the basics, additional features can be added, features such as input validation and spam prevention. (Both of those subjects are addressed with numerous articles here at the Willmaster.com site. Use the search box.)

How It Works

This is how it works (the code for the form and the script are further below):

1. The blog post or page with the form is loaded into someone's browser. They fill it in and click the submit button.

2. The data from the form submission is sent to a script for handling. The form handling script sends you an email with the data and redirects the browser to the thank-you page.

3. The thank-you page is loaded into the browser.

The form user never sees step 2. They submit the form and then they see the thank-you page. In the meantime, the form handling script has done it's magic.

(For those of you who prefer to submit the form directly to the WordPress page, it's likely to work with the permalink settings set to default. With any other permalink setting, the URL rewrite loses the POST and GET data, which means the form data never arrives at the WordPress page.)

Implementing the Functionality

Here's are step-by-step instructions. Each step correlates to the How It Works list above.

1. The Form

The form is a simple name-email-comment form.

Here's the code (notes follow):

<form method="post" action="http://example.com/simplecontact.php">
<input type="hidden" name="redirect" value="http://example.com/page.php">
<p>
Name:<br>
<input type="text" name="name" style="width:200px;"></td>
</p>
<p>
Email:<br>
<input type="text" name="email" style="width:200px;"></td>
</p>
<p>
Comment:<br>
<textarea name="comment" style="width:200px; height:100px"></textarea></td>
</p>
<p>
<input type="submit" style="width:200px;" value="Submit Form"></td>
</p>
</form>

Notes:

In the WordPress dashboard, create a post or page with the above form code. Paste the code into the "Text" tab box, not the "Visual" tab box.

Now, make these changes to the form code.

1. At the first line of the form, the value of the action attribute (colored blue) needs to be the URL of the script you'll install in the next step. If you know what its URL will be, go ahead and do the edit now. Otherwise, leave it until after the script is installed at the second step.

2. At the second line of the form, the value of the input type="hidden" field's value attribute (colored orange) needs to be the URL of the thank-you page the form user will see after they submit the form. If you know it's URL, go ahead and do the edit now. Otherwise, leave it until after the third step.

That's all that needs to be edited. The rest of the form may be modified, if you wish, but it's not required.

2. The Script

The script is a PHP script. Here's the code (notes follow):

<?php
if( count($_POST) )
{
   $YourEmailAddress = "name@example.com";
   $YourEmailSubject = "Form Submission From the Blog";
   $name = stripslashes($_POST['name']);
   $email = stripslashes($_POST['email']);
   $comment = stripslashes($_POST['comment']);
   $content = "$name\r\n$email\r\n$comment\r\nScript:http://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
   mail($YourEmailAddress,$YourEmailSubject,$content,"From:$YourEmailAddress");
   header("Location:" . (isset($_POST['redirect']) ? $_POST['redirect'] : '/') );
   exit;
}
?>

Notes:

Copy the code, paste it into a plain text processor (like NotePad or TextWrangler), and save the file as simplecontact.php

Now, make these changes to the file.

1. At the fourth line of the code, the value of the $YourEmailAddress variable (colored blue) needs to be the email address where you want to receive the emails containing the form data.

2. At the fifth line of the code, the value of the $YourEmailSubject variable (colored orange) needs to be the subject of the email containing the form data that's sent to you.

Now, upload the script to your server and make a note of its URL.

The URL of the script is the URL to use as the value of the form's action attribute.

3. The Thank-you Page

The thank-you page can contain whatever you want to say to the person who used the form.

Create the thank-you page through your WordPress dashboard. Load the newly-created page into your browser. The URL in your browser's address bar is the URL to use as the value of the form's input type="hidden" field (see step 1, The Form).

Testing

When the three steps have been implemented, it's time to test the form.

Go ahead. Try it out.

When you submit the form, your browser should be redirected to the thank-you page. And the script should have sent you an email with the form data.

If the form submission yields an error message, it probably has to do with the PHP script. The error message should be fairly clear about what's wrong.

If everything works as it should but you never get the email the script sends, then one of these is likely to be the reason:

• The email address specified in the script is incorrect.
• The email was sent but it was filtered as spam.
• The hosting company doesn't let PHP scripts send email.

To check the first, copy the email address from the script and paste it into the "to" field of an email you send. Does it arrive? (The reason for copying and pasting is because sometimes one doesn't see their own typographical errors and copying is literal.)

To check the second, check your spam/trash folders. Also see if the email might have been filtered into a directory it wasn't expected to filter into.

To check the third, ask your hosting company if they block the use of the PHP mail() function.

The system should work without errors. But sometimes things creep in that weren't expected. They then have to be taken care of.

Once you have it working, you'll know how to implement a form in WordPress.

(This article first appeared in Possibilities ezine.)

Will Bontrager