How to Build a Single Page Portfolio Theme – Part 4 – Contact Form

Posted on 25th August, 2014 Leave a Comment

I’m using the built in mail function that wordpress has, so this will use the default email set in the “General Settings” the email used for the receipt of notifications. So to begin we need to add our mail script to a new file “mail-function.php” then use an includes(); above everything else in the header.php right above the <DOCTYPE >. If you look at the bottom of the script below you’ll see where it needs to be added.

Header.php

<?php // LOAD OUR SCRIPT FOR THE CONTACT FORM TO SEND
 if ( is_front_page() ) {  
	require_once dirname( __FILE__ ) . '/mail-function.php'; 
 }
?>
<?php 
	/*
	 * ADD ABOVE HERE!
	 **/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
	<head>

		<!-- "WPtricks Starter": The HTML-5 WordPress Template Theme -->
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>">

Mail-function.php

Lets add the actual mail function to our theme. Create a new document and call it mail-function.php, then add this.

<?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);
 
?>

Options.php

We’re going to add a blurb to the contact form which will be added through the theme customizer. To do this open up the options.php file in our theme folder.

Find this line:

} add_action( 'customize_register', 'wptricks_customize_register' );

Just above it add the following code, which will create a custom control and add it to our options.

	/*
	 * ADD A CUSTOM TEXTAREA FIELD FOR THE CONTACT FORM TEXT
	 **/	
	 
	 class Example_Customize_Textarea_Control extends WP_Customize_Control {
		public $type = 'textarea';
	 
		public function render_content() {
// THIS IS THE CUSTOM CONROL "TEXTAREA" BIT.
			?>
			<label>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<textarea rows="12" style="width:100%;" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
			</label>
			<?php
			}
	}
	$wp_customize->add_section('wptricks_contact_form_text', array(
			'title' => __('Contact Form','wptricks'),
			'description' => 'Enter the text for the contact form.',
			'priority' => 55,
		)
	);
	$wp_customize->add_setting( 'wptricks_contact_form_text', array('default' => 'Please Leave you\'re message. This will appear beside the contact form.'));
	$wp_customize->add_control(	new Example_Customize_Textarea_Control( $wp_customize, 'wptricks_contact_form_text', array(
			'section'  => 'wptricks_contact_form_text',
			'settings' => 'wptricks_contact_form_text',
			'label'	=> 'Contact Form Message'
		)
	)
);

Home-page-template.php

Next open up our home-page-template.php and add our form and a call for our contact form blurb that gets added by the theme customizer.

Below the Portfolio loop add this.

<?php 

		/* INCLUDE OUR CONTACT FORM SECTION
		 *****************************************************/
?>
	
	   <section id="contact-form">
    	<header>
			<div class="wrapper">
            	<h2>Contact Us</h2>
        	</div>
        </header>
			<div class="wrapper">
 
<!-- Now for the actual form -->
 
		  <article> 
			<?php echo $response; ?>
            <form action="#contact-form" method="post">
                <fieldset>
				  <div class="form-inputs">
                      <div><label for="name">Name: <span>*</span></label> <br><input type="text" name="message_name" value="<?php echo $_POST['message_name']; ?>"></div>
                      <div><label for="message_email">Email: <span>*</span></label> <br><input type="text" name="message_email" value="<?php echo $_POST['message_email']; ?>"></div>
				  </div>
				  <div class="text-area">
                      <div><label for="message_text">Message: <span>*</span></label> <br><textarea type="text" name="message_text"><?php echo $_POST['message_text']; ?></textarea></div>
                      <div><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked'; ?> /><label for="sendCopy">Send a copy of this email to yourself</label></div>
				  </div>
                  <div class="send-form">
                      <div><label for="message_human"><small>Human Verification: <span>*</span></small></label> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</div>
                      <input type="hidden" name="submitted" value="1">
                      <div><input type="submit"></div>
                  </div>
              </fieldset>
            </form> 
		  </article>
				
				
				
<!-- Output the contact form blurb that was adding in the theme customiser -->
		  <article> 
			  <p><?php // ECHO THE CONTENTS OF THE OPTIONS PAGE TEXTAREA
			  			echo get_theme_mod( 'wptricks_contact_form_text', 'default_value' )."\n"; ?></p>
		  </article>
          
          
			</div> <!-- /.wrapper -->
		</section> <!-- /.contact-form -->

<?php 

		/* END CONTACT FORM SECTION
		 *****************************************************/
?>
		   
		   
<?php get_footer(); ?>

Style.css

We’ll want to style the new section, so open up the theme stylesheet. style.css. Below everything else add this.


/* Contact Form Section
-------------------------------------------------- */
#contact-form form[method="post"] {
	padding-top: 10px;
}
#contact-form article:nth-of-type(1) {
    width: 70%;
	padding-right: 5%;
}
#contact-form article:nth-of-type(2) {
    width: 30%;
}
#contact-form article {
    float: left;
}
#contact-form textarea,
#contact-form input[type=text] {
    width: 100%;
	margin-top: 0;
}
.form-inputs > div,
.send-form > div {
	width: 47.5%;
	float: left;
}
.form-inputs > div:first-of-type,
.send-form > div:first-of-type {
	margin-right: 5%;
}
.send-form > div input[type=submit] {
	float: right;
}
#contact-form label {
	font-size: .9em;
}
#sendCopy {
    margin-right: 12px;
}
body .article > footer, 
body input, body textarea, 
body .single article > footer, 
body input[type="submit"] {
	border-color: #aaa;
}

body input,
body textarea {
	box-shadow: none;
}

Adding a Nwe Blog Section

Ready to go… Click Here

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]