How to format output from php form to html email

Question

Firstly I am not a programmer - so I am trying to adapt things to what I need. I have been working for some weeks on a html form that produces a unique code and emails the data to me and the form owner.

I have managed to get all this to work and build it into my website.

However the last vestige is that I want to format the email into html and I have searched and read and tried many different pieces of code for this - some even from here with no success. I ether get code, nothing or all the info in one uninterrupted sentence.

Here is my php. Near the bottom is the info I need in the mail at $email_message

Form code:

<div style="position:absolute;left:0px;top:546px;width:350px;height:84px;">
<style type="text/css">
.formtxt{color:white;}
</style>
<?php
$tokens = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

$serial = '';

for ($i = 0; $i < 3; $i++) {
for ($j = 0; $j < 4; $j++) {
    $serial .= $tokens[rand(0, 35)];
}

if ($i < 2) {
    $serial .= '-';
}
}
?>
<form name="contactform" method="post" action="bridalcontact.php">
<table width="350px" align="center">
<tr>
<td valign="top">
<label for="first_name"> <span class="formtxt">First Name*</span></label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="20">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name"> <span class="formtxt">Last Name*</span></label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="20">
</td>
</tr>
<tr>
<td valign="top">
<label for="email"> <span class="formtxt">Email*</span></label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="20">
</td>
</tr>
<tr>
<td valign="top">
<label for="security"> <span class="formtxt">What colour is the sky *</span></label>
</td>
<td valign="middle">
<input type="text" name="security" maxlength="80" size="20">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Code</label>
</td>
<td valign="top">
<input type="disabled" name="code" size="20" value='<?php echo "$serial"?>'readonly>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>

Php code:

<?php

if(isset($_POST['email'])) {
  // EDIT THE 2 LINES BELOW AS REQUIRED
  $email_to = "my email address here";
  $email_subject = "Your AODJ voucher";
  function died($error) {
    // your error code can go here
    echo "We are very sorry, but there were error(s) found with the form you submitted.    ";
    echo "These errors appear below.<br /><br />";
    echo $error."<br /><br />";
    echo "Please go back and fix these errors.<br /><br />";
    die();
  }
  // validation expected data exists
  if(!isset($_POST['first_name']) ||
    !isset($_POST['last_name']) ||
    !isset($_POST['email']) ||
    !isset($_POST['security'])) {
      died('We are sorry, but there appears to be a problem with the form you submitted.');
    }
  $first_name = $_POST['first_name']; // required
  $last_name = $_POST['last_name']; // required
  $email_from = $_POST['email']; // required
  $security = $_POST['security']; // required
  $code = $_POST['code']; // not required
  $error_message = "";
  $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
  $security_exp = "/blue/";
  if(!preg_match($security_exp,$security)) {
    $error_message .= 'Wrong solar system - sorry.<br />';
  }
  //$string_exp = "/^[A-Za-z .'-]+$/";
  //if(!preg_match($security_exp,$security)) {
  //$error_message .= 'Wrong solar system - sorry.<br />';
  //}
  $string_exp = "/^[A-Za-z .'-]+$/";
  if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'The First Name you entered does not appear to be valid.<br />';
  }
  if(!preg_match($string_exp,$last_name)) {
    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';
  }
  if(strlen($error_message) > 0) {
    died($error_message);
  }
  $email_message = "Form details below.\n\n";
  function clean_string($string) {
    $bad = array("content-type","bcc:","to:","cc:","href");
    return str_replace($bad,"",$string);
  }
  $email_message .= "First Name: ".clean_string($first_name)."\n";
  $email_message .= "Last Name: ".clean_string($last_name)."\n";
  $email_message .= "Email: ".clean_string($email_from)."\n";
  $email_message .= "code: ".clean_string($code)."\n";
  // create email headers
  $headers = 'From: '.$email_from."\r\n".
    'Reply-To: '.$email_from."\r\n" .
    'X-Mailer: PHP/' . phpversion();
  @mail($email_to, $email_subject, $email_message, $headers);
  @mail($email_from, $email_subject, $email_message, $headers);
?>
<?php
  if( !empty( $_POST ) ) {
    header( "Location: bridaloptionsthanks.html" ) ; exit ;
  }
}
?>

Answer 1

In order to send mail formatted in HTML, you will need to add the proper header information.

Change this line:

$headers = 'From: '.$email_from."\r\n".
...

to this: (and adding a dot/concatenate $headers .=)

$headers = "Content-type: text/html\r\n";
$headers .= 'From: '.$email_from."\r\n".
...

Sidenote: Only the first header line does not have a dot/concatenate. Other headers following it will require it. Consult the manual on PHP.net

Then add your HTML where you wish.

As per the manual:

• http://php.net/manual/en/function.mail.php

Answer 2

Tested and works fine for me. Give this a try.

[FORM]

<?php
$tokens = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

$serial = '';

for ($i = 0; $i < 3; $i++) {
for ($j = 0; $j < 4; $j++) {
    $serial .= $tokens[rand(0, 35)];
}

if ($i < 2) {
    $serial .= "-";
}
}
?>

<!DOCTYPE html>

<head>

<style type="text/css">
.formtxt{color:black;}
</style>

</head>

<body>


<h1>My first heading</h1>

<p align="left">My first paragraph</p>

<div style="position:absolute;left:0px;top:140px;width:350px;height:84px;">
<form name="contactform" method="post" action="bridalcontact.php">
<table width="350px" align="center">
<tr>
<td valign="top">
<label for="first_name"><span class="formtxt">First Name*</span></label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="20">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name"><span class="formtxt">Last Name*</span></label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="20">
</td>
</tr>
<tr>
<td valign="top">
<label for="email"><span class="formtxt">Email*</span></label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="20">
</td>
</tr>
<tr>
<td valign="top">

<label for="security"> <span class="formtxt">What colour is the sky *</span></label>

</td>
<td valign="middle">
<input type="text" name="security" maxlength="80" size="20">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Code</label>
</td>
<td valign="top">
<input type="disabled" name="code" size="20" value="<?php echo "$serial"?>"readonly>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>

</body>
</html>

[PROCESSING]

<?php

if(isset($_POST['email'])) {
  // EDIT THE 2 LINES BELOW AS REQUIRED
  $email_to = "YOUR EMAIL HERE";
  $email_subject = "Your AODJ voucher";
  function died($error) {
    // your error code can go here
    echo "We are very sorry, but there were error(s) found with the form you submitted.    ";
    echo "These errors appear below.<br /><br />";
    echo $error."<br /><br />";
    echo "Please go back and fix these errors.<br /><br />";
    die();
  }
  // validation expected data exists
  if(!isset($_POST['first_name']) || !isset($_POST['last_name']) ||
    !isset($_POST['email']) ||
    !isset($_POST['security'])) {
      died('We are sorry, but there appears to be a problem with the form you submitted.');
    }
  $first_name = $_POST['first_name']; // required
  $last_name = $_POST['last_name']; // required
  $email_from = $_POST['email']; // required
  $security = $_POST['security']; // required
  $code = $_POST['code']; // not required
  $error_message = "";
  $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }


  $security_exp = "/blue/";


  if(!preg_match($security_exp,$security)) {

    $error_message .= 'Wrong solar system - sorry.<br />';
  }

  $string_exp = "/^[A-Za-z .'-]+$/";
  if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'The First Name you entered does not appear to be valid.<br />';
  }
  if(!preg_match($string_exp,$last_name)) {
    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';
  }
  if(strlen($error_message) > 0) {
    died($error_message);
  }
  $email_message = "Form details below.\n\n";
  function clean_string($string) {
    $bad = array("content-type","bcc:","to:","cc:","href");
    return str_replace($bad,"",$string);
  }
  $email_message .= "First Name: ".clean_string($first_name)."\n";
  $email_message .= "Last Name: ".clean_string($last_name)."\n";
  $email_message .= "Email: ".clean_string($email_from)."\n";
  $email_message .= "code: ".clean_string($code)."\n";

  // create email headers

$headers = "Content-type: text/html\r\n";
$headers .= 'From: '.$email_from."\r\n".

    'Reply-To: '.$email_from."\r\n" .
    'X-Mailer: PHP/' . phpversion();
  @mail($email_to, $email_subject, $email_message, $headers);
  @mail($email_from, $email_subject, $email_message, $headers);
?>
<?php
  if( !empty( $_POST ) ) {
    header( "Location: thank_you.php" ) ; exit ;
  }
}
?>

[Thank you]

<?php

echo "Thank you";

?>

Answer 3

Providing a full code to send your email as html could be a long work depending what you want.

1. In your code, I have to mention you that you have might have a security issue since you allow your server to send email from a form with no validation. In some way, someone could use your server to send spam by automating the post from your script.

2. email could be send in html according mime formats which could be quite complex to implement if you want to support multipart content (one version in plain text and one version in html). Fortunately most clients supports html today.

3. If you want to send a beautiful html content well designed and so one, you must learn html and css. You should be aware to mail clients, do not always supports all css attributes, which make development a bit long.