Lesson 07 - Making it pretty

Features

The previous forms were very ordinary in appearance. This lesson is about cosmetic changes to the form. We also split the name in to first name and last name because it will help us in another lesson.

 Request Info Pretty
Click here to see a larger image

Actions

Arrow Red Right Click to see Lesson07_Pretty.php in action on this tutorial site. Note: if you enter name an email in this form, you will send me an email.

Download this file: Lesson07_Pretty.txt to your PC. You will also need to downoad the style sheet. Change the txt extension to php. Change the “recipient address” and the pointer to the style sheet and then upload to your website.

Surf to the Lesson07_Pretty.php file on your website with your browser. You should see results similar to the image above on the right.

After completing the form and clicking “Send me more info”, you should receive an email with this in the body:

Please send me more information about Acme products
First Name = your first name
Last Name = your last name
 Email = sender@sendersdomain.com

Gotchas

None that I know of.

Source Code

The form was placed inside a table with a light colored background. This helps the form standout on the page in a manner similar the block of source code below.

A Cascading Sytle Sheet (CSS) was employed to format the text. You can view the style sheet.

  <html>
<head>
  <title>A Pretty Request Info Form</title>
  <link rel="stylesheet" href="/PHP_Tutorials/Styles/PHP_Tutorials_Forms_Style.css" type="text/css">
</head>

<body>
<h1>Request Information from the Acme Company
</h1>
<form method="POST" name="FirstEmailForm" action="<?php echo($PHP_SELF); ?>" >
  <table width="550" border="0" cellspacing="0" cellpadding="0" bgcolor="#DFDFDF">
    <tr>
      <td colspan="2" class="FormCategoryName">About You</td>
    </tr>
    <tr>
      <td width="200" class="FormVariableName" align="right">
        First Name:
      </td>
      <td width="350">
        <input type="text" name="contactFirstName">
      </td>
    </tr>
    
    <tr>
      <td width="200" class="FormVariableName" align="right">
        Last Name:
      </td>
      <td width="350">
        <input type="text" name="contactLastName">
      </td>
    </tr>
    <tr>
      <td width="200" class="FormVariableName" align="right">
        Email:
      </td>
      <td width="350">
        <input type="text" name="contactEmail">
      </td>
    </tr>
    <tr>
      <td width="200" class="FormVariableName" align="right">
      </td>
      <td width="350">
        <input type="hidden" name="firstPass" value="No">
        <input type="submit" name="subRequestButton" value="Send me more info">
      </td>
    </tr>
  </table>
</form>

<?php
/* Set variables equal to their "posted" values". We need to do this because "register_globals = off" is the default.  */
$contactFirstName = $_POST['contactFirstName'];
$contactLastName = $_POST['contactLastName'];
$contactEmail = $_POST['contactEmail'];
$firstPass = $_POST['firstPass'];

if($firstPass == "No")
{
  /* Construct the email message  */
  $messageToAcme = "Please send me more information about Acme products";
  $messageToAcme .= "\n\n First Name = " . $contactFirstName;
  $messageToAcme .= "\n Last Name = " . $contactLastName;
  $messageToAcme .= "\n Email = " . $contactEmail;
  $fullName = $contactFirstName ." " .$contactLastName;
  $mailHeaders = "From: \"".$fullName."\"<".$contactEmail.">\n";  
  $mailHeaders .= "Reply-to: ".$contactEmail;
  
  /* You need to change dave@marketingtactics.com to YOUR email address  */
  mail("dave@marketingtactics.com", "Please Send Acme Info", $messageToAcme, $mailHeaders);
}
?>


</body>
</html>

Final Thoughts

You might wonder why the form does not have “cancel” or ”reset” button next to the submit button. I never have a reset button because it is way too easy for your visitor to accidently click on it and destroy all their input.

 

Go To MarketingTactics home