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

Posted on 25th August, 2014 53 Comments

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

Comments

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]

Andrea

13th, Aug, 20

Hi

Body Revolution – Medico Postura™ Body Posture Corrector – Improve Your Posture INSTANTLY!

Get it while it’s still 60% OFF! FREE Worldwide Shipping!

Get yours here: medicopostura.online

Regards,

WPtricks | WordPress Theme Development

Regalado

20th, Aug, 20

Good Morning

Work out to a whole new level with our P-Knee™ power leg knee joint support!

Order here: p-knee.online

60% OFF + FREE Worldwide Shipping – TODAY ONLY!

Best,

WPtricks | WordPress Theme Development

Billy Starnauld

21st, Aug, 20

I’m excited to uncover this great site. I want to to thank you for ones time due to this fantastic read!! I definitely savored every part of it and i also have you bookmarked to look at new information on your blog.

Lidia

22nd, Aug, 20

Good Morning

CAREDOGBEST™ – Personalized Dog Harness. All sizes from XS to XXL. Easy ON/OFF in just 2 seconds. LIFETIME WARRANTY.

Click here: caredogbest.online

The Best,

WPtricks | WordPress Theme Development

Herb Gaudreau

24th, Aug, 20

I was pretty pleased to find this great site. I want to to thank you for ones time just for this wonderful read!! I definitely really liked every bit of it and i also have you bookmarked to look at new information in your web site.

Tony

27th, Aug, 20

Hey

CAREDOGBEST™ – Personalized Dog Harness. All sizes from XS to XXL. Easy ON/OFF in just 2 seconds. LIFETIME WARRANTY.

FREE Worldwide Shipping!

Click here: caredogbest.online

Best regards,

WPtricks | WordPress Theme Development

Katharina

30th, Aug, 20

Hi there

Wear with intent, live with purpose. Fairly priced sunglasses with high quality UV400 lenses protection only $19.99 for the next 24 Hours ONLY.

Free Worldwide Shipping!

Order here: kickshades.online

Many Thanks,

WPtricks | WordPress Theme Development

Phoebe Upton

02nd, Sep, 20

The best SEO & Most Powerful link building software for your business.

I just checked out your website wptricks.co.uk and wanted to find out if you need help for SEO Link Building ?

If you aren’t using SEO Software then you will know the amount of work load involved in creating accounts, confirming emails and submitting your contents to thousands of websites.

With THIS SOFTWARE the link submission process will be the easiest task and completely automated, you will be able to build unlimited number of links and increase traffic to your websites which will lead to a higher number of customers and much more sales for you.

IF YOU ARE INTERESTED, We offer you 7 days free trial => https://bit.ly/2ZPZrOn

Latrice Sandes

03rd, Sep, 20

YOU NEED HELP FOR SEO LINK BUILDING?

We offer you the BEST SEO STRATEGY for 2020, my name is Latrice Sandes, and I’m a SEO Specialist.

I just checked out your website wptricks.co.uk, and wanted to find out if you need help for SEO Link Building ?

Build unlimited number of Backlinks and increase Traffic to your websites which will lead to a higher number of customers and much more sales for you.

SEE FOR YOURSELF=> https://bit.ly/3dhrKtA

Horacio

20th, Sep, 20

Hey there

Buy all styles of Ray-Ban Sunglasses only 19.99 dollars. If interested, please visit our site: framesoutlet.online

Kind Regards,

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

Klaus Coode

24th, Sep, 20

YOU NEED FAST PROXY SERVERS ?

Check it out this Anonymous and Private Proxy Servers.
HTTP & SOCKS5 Proxy supported.
IP Authentication or Password Authentication available.
HERE: https://bit.ly/3ifZkmL

Ana

25th, Sep, 20

Hello

Buy all styles of Ray-Ban Sunglasses only 19.99 dollars. If interested, please visit our site: framesoutlet.online

Best,

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

Finn

04th, Oct, 20

Hello

Defrost frozen foods in minutes safely and naturally with our THAW KING™.
50% OFF for the next 24 Hours ONLY + FREE Worldwide Shipping for a LIMITED time

Buy now: thawking.online

Have a great time,

WPtricks | WordPress Theme Development

Elena

13th, Oct, 20

Hi there

Buy all styles of Oakley Sunglasses only 19.99 dollars. If interested, please visit our site: sunglassoutlets.online

Best Wishes,

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

Verlene

18th, Oct, 20

Hey there

Buy all styles of Oakley Sunglasses only 19.99 dollars. If interested, please visit our site: sunglassoutlets.online

To your success,

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

JamesVen

20th, Oct, 20

occasion a envelope death of d soluble with tumeric or. [url=https://ciamedusa.com/]buy cialis online[/url] home in on into it and rarely end my chest.

JamesVen

21st, Oct, 20

avian near frothy an reverse who was an bi habitat [url=https://ciamedusa.com/#]buy generic cialis canada online[/url] online safely that only one is occupied into the drug.

Melvina

26th, Oct, 20

Hi

CAREDOGBEST™ – Personalized Dog Harness. All sizes from XS to XXL. Easy ON/OFF in just 2 seconds. LIFETIME WARRANTY.

FREE Worldwide Shipping!

Click here: caredogbest.online

Cheers,

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

Basil

26th, Oct, 20

Good day

Buy all styles of Ray-Ban Sunglasses only 19.99 dollars. If interested, please visit our site: framesoutlet.online

Enjoy,

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

Kunze

01st, Nov, 20

Hey there

Buy all styles of Ray-Ban Sunglasses only 19.99 dollars. If interested, please visit our site: framesoutlet.online

Kind Regards,

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

Frankie

08th, Nov, 20

Good day

Buy all styles of Oakley Sunglasses only 19.99 dollars. If interested, please visit our site: designeroutlets.online

Sincerely,

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

Pedro

09th, Nov, 20

Hi

CAREDOGBEST™ – Personalized Dog Harness. All sizes from XS to XXL. Easy ON/OFF in just 2 seconds. LIFETIME WARRANTY.

FREE Worldwide Shipping!

Click here: caredogbest.online

Best Wishes,

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

Johnson

16th, Nov, 20

Good Morning

World’s Best Neck Massager. Get it Now 50% OFF + Free Shipping!
Wellness Enthusiasts! There has never been a better time to take care of your neck pain!

Our clinical-grade TENS technology will ensure you have neck relief in as little as 20 minutes.

Get Yours: hineck.online

Best,

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

Sheila

20th, Nov, 20

Hi

Buy all styles of Oakley Sunglasses only 19.99 dollars. If interested, please visit our site: designeroutlets.online

Best Wishes,

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

Ismael

28th, Nov, 20

Hi there

Black Friday Offer! Buy all styles of Ray-Ban Sunglasses only 19.99 dollars. If interested, please visit our site: sunglassusa.online

Many Thanks,

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

Imogen

29th, Nov, 20

Hello

Black Friday Offer! Buy all styles of Ray-Ban Sunglasses only 19.99 dollars. If interested, please visit our site: sunglassusa.online

Best regards,

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

Beatriz

01st, Dec, 20

Morning

Wellness Enthusiasts! There has never been a better time to take care of your neck pain!

Our clinical-grade TENS technology will ensure you have neck relief in as little as 20 minutes.

Get Yours: hineck.online

Get it Now 50% OFF + Free Shipping!

To your success,

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

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]