Create a built in contact page for WordPress

I do this for every theme I create and figured most of you would use a plugin, which is not really necessary. WordPress has mail functionality already so all we’re going to need to do is leverage that and add some style in the CSS.

• Uses the administrators email address
• Adds your site title to the subject line
• includes a forward to sender option
• Uses their email as the reply-to email
• Includes a simple validation
• Displays confirmation and error messages

Let’s start by creating a new document.

save this as contact-page.php.

To make this a template we’ll need to give it a name, simply add this to our new contact-page.php and it will instantly become a template.

<?php
/*
Template Name: Contact Page Template
*/
?>

Now add the PHP mailer.

The code has comments so should be easy to read.

<?php

  //response generation function

  $response = "";

  //function to generate response
  function generate_response($type, $message){

    global $response;

    if($type == "success") $response = "<div class='success'>{$message}</div>";
    else $response = "<div class='error'>{$message}</div>";

  }

  //response messages
  $not_human       = "Human verification incorrect.";
  $missing_content = "Please supply all information.";
  $email_invalid   = "Email Address Invalid.";
  $message_unsent  = "Message was not sent. Try Again.";
  $message_sent    = "Thanks! Your message has been sent.";

  //user posted variables
  $name = $_POST['message_name'];
  $email = $_POST['message_email'];
  $message = $_POST['message_text'];
  $human = $_POST['message_human'];

  //php mailer variables
  $to = get_option('admin_email');// include the admin email
  $subject = "Someone sent a message from ".get_bloginfo('name');
  $headers = 'From: '. $email . "rn" .
    'Reply-To: ' . $email . "rn";

  if(!$human == 0){
    if($human != 2) generate_response("error", $not_human); //not human!
    else {

      //validate email
      if(!filter_var($email, FILTER_VALIDATE_EMAIL))
        generate_response("error", $email_invalid);
      else //email is valid
      {
        //validate presence of name and message
        if(empty($name) || empty($message)){
          generate_response("error", $missing_content);
        }
        else //ready to go!
        {
          $sent = mail($to, $subject, $message, $headers);
          if($sent) generate_response("success", $message_sent); //message sent!
          else generate_response("error", $message_unsent); //message wasn't sent
        }
      }
    }
  }
  else if ($_POST['submitted']) generate_response("error", $missing_content);

?>

That takes care of the back-end, now for the actual page…

Directly below the mailer function above, add this code.

*I would check your theme’s page.php to see the code your theme uses for pulling in your pages content.

<?php
/*
 * -  Start the actual page
 */
get_header(); ?>

  <div id="primary" class="site-content">
    <div id="content" role="main">

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

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

            <header class="entry-header">
              <h1 class="entry-title"> <?php the_title(); ?> </h1>
            </header>

            <div class="entry-content">
              <?php the_content(); ?>

<!-- Now for the actual form -->

              <div class="contact-form">
                <?php echo $response; ?>
                <form action="#contact-form" method="post">
                  <div class="left">
                  <p><label for="name">Name: <span>*</span> <br><input type="text" name="message_name" value="<?php echo $_POST['message_name']; ?>"></label></p>
                  <p><label for="message_email">Email: <span>*</span> <br><input type="text" name="message_email" value="<?php echo $_POST['message_email']; ?>"></label></p>
                  </div>
                  <div class="right">
                  <p><label for="message_text">Message: <span>*</span> <br><textarea type="text" name="message_text"><?php echo $_POST['message_text']; ?></textarea></label></p>
                  </div>
                  <p><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Send a copy of this email to yourself</label></p>
                  <p><label for="message_human">Human Verification: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
                  <input type="hidden" name="submitted" value="1">
                  <p><input type="submit"></p>
                </form>
              </div>
 
<!-- End of the form -->

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

          </article><!-- #post -->

      <?php endwhile; // end of the loop. ?>

    </div><!-- #content -->
  </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Finally add the CSS

Open your styles.css and add this.

/* WPT Contact Form
 * Error and confirmation messages
 * Form Styles
---------------------------------------------------------*/
  .error{
  padding: 5px 9px;
  border: 1px solid red;
  color: red;
  border-radius: 3px;
}

.success{
  padding: 5px 9px;
  border: 1px solid green;
  color: green;
  border-radius: 3px;
}
form[method=post] {
	padding-top: 50px;
}
form span{
  color: red;
}
.left {
	float: left;
	width: 35%;
}
.right {
	float: right;
	width: 65%;
}
.left input {
	width: 80% !important;
}
.right textarea {
	min-height: 200px;
	resize: vertical;
}

To select the contact page template simply select “add new page” from the left menu, then under the page attributes on the right select the “contact page template” and save the page. If you included the form below the_content() then you’ll be able to add anything above the contact form through the visual editor.