Fully Functional PHP Contact Form

To integrate this contact form into your own website, complete these steps. (We will do this together today in class.)

1. Put your site online.

2. Rename your contact.html file to contact.php. (This is necessary since you will be inserting PHP code into this file.)

3. Place this folder of captcha code in your online web folder. It should look something like this:

This is what should be inside the captcha folder:

4. Place this code in the very top of the document where your form will reside, above the doctype. (Note that the error message is located near the bottom of this section of code. Change the words between the quotes will change the error message.)

<!-- //////////////////////////////////////////////////////

 FORM DOCTOP (above doctype) PHP: 

  PASTE IN THE VERY TOP OF YOUR FORM HTML PAGE 

  //////////////////////////////////////////////////////  -->

<?php

  session_start();

  if($_POST){

  if(($_SESSION['security_code'] == $_POST['security_code']) && (!empty($_SESSION['security_code'])) ) {

  // Set success message

  $message = "Form submitted properly message...";

  // process form post data...

  $html = "<p>The following was submitted:</p>";

  foreach($_POST as $key => $value){

  if($key != "security_code"){

  $html .= "<p><strong>".$key.": </strong>".$value."</p>";

  }

  }

  // set your email address and subject...

  $to = "yourmail@domain.com";

  $from = "yourmail@domain.com";

  $subject = "contact form submission";

  // set headers and send email...

  $headers  = 'MIME-Version: 1.0' . "\r\n";

  $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

  $headers .= 'From: '.$from.''. "\r\n";

  $mail = mail($to, $subject, $html, $headers);

  } else {

  // Set error (captcha) message...

  // possible here to say...

  // if security code is wrong, or invalid email, etc.

  // see php's ctype and google valid email methods.

  $error = "WOOPS! Please try again.";

  }

  }

  ?>

<!-- //////////////////////////////////////////////////////

 END FORM DOCTOP PHP

//////////////////////////////////////////////////////  -->

5. Place this code where you want the form to appear. Modify the form elements, error and success messages, as desired:

<!-- //////////////////////////////////////////////////////

 FORM CODE: 

  PASTE WHERE YOU WANT YOUR FORM TO APPEAR

  Modify labels, inputs, values, etc., as needed

  Also modify error and success messages as needed

  (Error and Success styles are in Forms section of stylesheet)

//////////////////////////////////////////////////////  -->

<?php if(!$_POST || $error){ ?>

 <h2>Contact Me!</h2>

 <form action="contact.php" method="post">

  <p class="error">

  <?=$error?>

  </p>

 <fieldset> 

  <legend>Contact Form</legend> 

  <p>Fields marked * are required.</p> 

  <dl> 

  <dt><label for="subject">Subject *</label></dt> 

  <dd><select name="subject" id="subject" tabindex="1"> 

  <option value="">Pick one</option> 

  <option value="I need help!">I need help!</option> 

  <option value="I have a suggestion.">I have a suggestion.</option> 

  <option value="I really like your site.">I really like your site.</option> 

  <option value="I want to hire you.">I want to hire you.</option> 

  </select></dd> 

  <dt><label for="name">Name *</label></dt> 

  <dd><input type="text" name="name" id="name" tabindex="2" /></dd> 

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

  <dd><input type="text" name="email" id="email" tabindex="3" /></dd> 

  <dt><label for="message">Message below</label></dt> 

  <dd><textarea name="message" id="message" rows="9" cols="30"➥ 

  tabindex="4"></textarea></dd> 

  <dt><label for="updates">I would like to receive updates: </label></dt> 

  <dd><input type="radio" name="updates" id="updates" value="yes" ➥ 

  tabindex="5"/>Yes <br />

  <input type="radio" name="updates" id="updates" value="no" ➥ 

  tabindex="6"/>No

  </dd>

  </dl> 

 <p>

  <label for="captcha">Security Code:</label><br />

  <img src="captcha/image.php"  /><br /> 

  <input type="text" id="captcha" name="security_code" />

  </p>

  <p>

  <input type="submit" value="Submit Form" tabindex="6" />

  </p>

 </fieldset> 

  </form>

  <? } else { ?>

  <h2>Thank you!</h2> 

  <p class="success">Your request has been successfully submitted.</p>

  <p>What would you like to do next?</p>

  <ul>

  <li>Return to <a href="portfolio.html">my portfolio</a>.</li>

  <li>Return to <a href="index.html">my homepage</a>.</li>

  <li>Read something cool at <a href="http://www.smashingmagazine.com">Smashing Magazine</a>.</li>

  <li>Learn about the new degree in <a href="http://think.ingcreative.com/2009/03/11/new-degree-program-graphic-design-marketing-dynamics/">Graphic Design and Marketing Dynamics at Oklahoma Wesleyan University</a>.</li>

  </ul>
  <? } ?>

<!-- //////////////////////////////////////////////////////

 END FORM 

//////////////////////////////////////////////////////  -->

Notes

Here is
a functioning version of the code above.

Here I have highlighted the areas in the above code you should change, or can change, to suit your needs.