How to Create a WordPress Contact Form Without a Plugin

There are a lot of different plugins available to put a contact form on your WordPress site, but I like to use as few plugins as i can get away with. So if you feel the same way, here’s a simple way to add a contact form, with some simple cut & paste of your site’s existing page.php file.

First step – Create your page template

Copy the code from your page.php file into a new file and name it page-contact.php.

In order to let WordPress know this file should be treated as a page template, we need to add a comment at the beginning of this new file:

[php]
<?php
/* Template Name: Contact */
?>
[/php]

 

The page-contact.php file should now look something like this:

[php]<?php

/*

Template Name: Contact

*/

?>

 

<?php get_header() ?>

 

        <div id="container">

               <div id="content">

                       <?php the_post() ?>

                       <div id="post-<?php the_ID() ?>">

                               <div>

                               </div><!– .entry-content ->

                       </div><!– .post–>

               </div><!– #content –>

        </div><!– #container –>

 

<?php get_sidebar() ?>

<?php get_footer() ?>[/php]

 

Build the Form

Now you’ll need to create a simple contact form. This is very basic, allowing only name, email and comment fields.  It should be pasted into your page-contact.php file, within the entry-content div.

[php]</pre>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">

<ul>

<li>

<label for="contactName">Name:</label>

<input type="text" name="contactName" id="contactName" value="" />

</li>

<li>

<label for="email">Email</label>

<input type="text" name="email" id="email" value="" />

</li>

<li>

<label for="commentsText">Message:</label>

<textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>

</li>

<li>

<button type="submit">Send email</button>

</li>

</ul>

<input type="hidden" name="submitted" id="submitted" value="true" />

</form>
<pre>[/php]

 

Processing and Error Handling

Your form is taking shape now, but you still need it to verify submission and that required fields have been filled. When that is verified, it will get the admin’s email address and send the form to that address. if there’s a required field left blank, an error will be displayed.

Paste this code just before the get_header() function:

[php]<?php

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

if(trim($_POST['contactName']) === ”) {

$nameError = ‘Please enter your name.';

$hasError = true;

} else {

$name = trim($_POST['contactName']);

}

&nbsp;

if(trim($_POST['email']) === ”)  {

$emailError = ‘Please enter your email address.';

$hasError = true;

} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {

$emailError = ‘You entered an invalid email address.';

$hasError = true;

} else {

$email = trim($_POST['email']);

}

&nbsp;

if(trim($_POST['comments']) === ”) {

$commentError = ‘Please enter a message.';

$hasError = true;

} else {

if(function_exists(‘stripslashes’)) {

$comments = stripslashes(trim($_POST['comments']));

} else {

$comments = trim($_POST['comments']);

}

}

&nbsp;

if(!isset($hasError)) {

$emailTo = get_option(‘tz_email’);

if (!isset($emailTo) || ($emailTo == ”) ){

$emailTo = get_option(‘admin_email’);

}

$subject = ‘[PHP Snippets] From ‘.$name;

$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";

$headers = ‘From: ‘.$name.’ <‘.$emailTo.’>’ . "\r\n" . ‘Reply-To: ‘ . $email;

&nbsp;

wp_mail($emailTo, $subject, $body, $headers);

$emailSent = true;

}

&nbsp;

} ?>[/php]

 

Now, you’ll get an error message beneath the applicable field of the form if an email address is incorrect  or a required field is left blank (such as  “Invalid email address”, or “Please enter your name”). Your entire page-contact.php file should now look like this:

[php]

<?php

/*

Template Name: Contact

*/

?>

&nbsp;

<?php

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

if(trim($_POST['contactName']) === ”) {

$nameError = ‘Please enter your name.';

$hasError = true;

} else {

$name = trim($_POST['contactName']);

}

&nbsp;

if(trim($_POST['email']) === ”)  {

$emailError = ‘Please enter your email address.';

$hasError = true;

} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {

$emailError = ‘You entered an invalid email address.';

$hasError = true;

} else {

$email = trim($_POST['email']);

}

&nbsp;

if(trim($_POST['comments']) === ”) {

$commentError = ‘Please enter a message.';

$hasError = true;

} else {

if(function_exists(‘stripslashes’)) {

$comments = stripslashes(trim($_POST['comments']));

} else {

$comments = trim($_POST['comments']);

}

}

&nbsp;

if(!isset($hasError)) {

$emailTo = get_option(‘tz_email’);

if (!isset($emailTo) || ($emailTo == ”) ){

$emailTo = get_option(‘admin_email’);

}

$subject = ‘[PHP Snippets] From ‘.$name;

$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";

$headers = ‘From: ‘.$name.’ <‘.$emailTo.’>’ . "\r\n" . ‘Reply-To: ‘ . $email;

&nbsp;

wp_mail($emailTo, $subject, $body, $headers);

$emailSent = true;

}

&nbsp;

} ?>

<?php get_header(); ?>

<div id="container">

<div id="content">

&nbsp;

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

<h1><?php the_title(); ?></h1>

<div>

<?php if(isset($emailSent) && $emailSent == true) { ?>

<div>

<p>Thanks, your email was sent successfully.</p>

</div>

<?php } else { ?>

<?php the_content(); ?>

<?php if(isset($hasError) || isset($captchaError)) { ?>

<p>Sorry, an error occured.<p>

<?php } ?>

&nbsp;

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">

<ul>

<li>

<label for="contactName">Name:</label>

<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" />

<?php if($nameError != ”) { ?>

<span><?=$nameError;?></span>

<?php } ?>

</li>

&nbsp;

<li>

<label for="email">Email</label>

<input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" />

<?php if($emailError != ”) { ?>

<span><?=$emailError;?></span>

<?php } ?>

</li>

&nbsp;

<li><label for="commentsText">Message:</label>

<textarea name="comments" id="commentsText" rows="20" cols="30"><?php if(isset($_POST['comments'])) { if(function_exists(‘stripslashes’)) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>

<?php if($commentError != ”) { ?>

<span><?=$commentError;?></span>

<?php } ?>

</li>

&nbsp;

<li>

<input type="submit">Send email</input>

</li>

</ul>

<input type="hidden" name="submitted" id="submitted" value="true" />

</form>

<?php } ?>

</div><!– .entry-content –>

</div><!– .post –>

&nbsp;

<?php endwhile; endif; ?>

</div><!– #content –>

</div><!– #container –>

&nbsp;

<?php get_sidebar(); ?>

<?php get_footer(); ?>
<pre>
[/php]

If you have the coding skills, you can customize that contact form as you see fit, adding fields or exporting to a database. But this is a good start, and you’ll have eliminated one more plugin.