Style Email

Question

<M/> 170 Why so serious?

13 Years Ago

I created an and I can not style it.. The problem I have is that the form I wiant to show in the email shows up right on top of form and it won't reveal in email with the inputs displaying?

Can someone give me some sources/assistance/snippets/etc. for this?

email user-interface web-design

2 Contributors
3 Replies
96 Views
6 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by <M/>

Dani AI

Generated 10 Months Ago

Quick diagnosis and what’s actually happening

Two separate issues are causing the behavior you describe. First, the HTML you build for the email is being printed into the page because it’s echoed inside the form (the <?= $message; ?> spot). That is why the table appears “on top of” the form in the browser. Second, the email is missing input values because the field names you read from $_POST don’t match the name attributes in the form (for example req-name vs fn). Also note a few correctness problems that will stop HTML email working reliably: mail() must be called after you set $to, $headers and $message, you should build the $message with concatenation (or a single heredoc) instead of repeatedly overwriting it, and the header must be Content-Type: (not Content=Type:).

Concrete, practical fixes

Remove the unconditional <?= $message; ?> from the form HTML (only show a preview in a debug mode and render it with htmlspecialchars() if needed).
Make the form field names and the $_POST keys match (or change the form to use name="name" etc.).
Build the full $message first, set correct headers, then call mail() once. Use a fixed From: address and put the user email in Reply-To: to avoid header/spoofing issues.
Use absolute URLs for images (remote https://.../logo.png) or embed attachments if you need the image to display in email.

Minimal header example to use before mail():

$headers  = "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
$headers .= "From: no-reply@example.com\r\n";

Styling, testing and security

Inline styles and table-based layouts are much more reliable across mail clients; <style> blocks in <head> are often stripped. Test across clients (see Campaign Monitor’s email CSS guide) and read the PHP mail() docs for correct usage and caveats. Validate and sanitize all inputs (use filter_var() for emails) to prevent header injection.

Resources

All 3 Replies

JorgeM 958 Problem Solver

13 Years Ago

The problem I have is that the form I wiant to show in the email shows up right on top of form and it won't reveal in email with the inputs displaying?

I dont understand what you mean by that statement.

I created an and I can not style it..
First, I noticed that you are building your email message, with more than one set of HTML and BODY elements. You should only have one set of each. You may want to delete lines 23-25.

Secondly, to style the HTML just update line 21 as follows (for example):

    $message = "<html><head>";
    $message = "<style>";
    $message = "h1 {color:#blue;}";
    $message = "table {border:1px solid black;}";
    $message = "</style></head><body>";

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

<M/> 170 Why so serious? Featured Poster · Answer 1 · 2012-10-19T16:35:54+00:00

Sorry guys, here is my code if you need it in order to assist me:

<?php

$fn = $_POST['fn'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$comments = $_POST['comments'];

mail($to, $subject, $message, $headers);

$to = "email@gmail.com";

$subject = "Form Submission";

    $headers = "From: " . strip_tags($_POST["req-email"]) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($_POST["req-email"]) . "\r\n";
    $headers .= "CC: email2@gmail.com\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content=Type: text/html; charset=ISO-8859-1\r\n";

    $message = "<html><body>";
    $message = "<h1>Hello, this form has been submitted!</h1>";
    $message = "</body></html>";

    $message = "<html><body>";
    $message .= '<img src= "logo.png" />';
    $message .= '<table rules="all" style="border-color: #ffb300;" cellpadding="10">';
    $message .= '<tr style="background: #ffb300;"><td><strong>Name:</strong> </td><td>' . strip_tags($_POST['req-name']) . '</td></tr>';
    $message .= '<tr><td><strong>Email:</strong> </td><td>' . strip_tags($_POST['req-email']) . '</td></tr>';
    $message .= '<tr><td><strong>Phone:</strong> </td><td>' . strip_tags($_POST['req-phone']) . '</td></tr>';
    $message .= '<tr><td><strong>Comments:</strong> </td><td>' .strip_tags($_POST['comments']) . '</td></tr>';

$message .= "</table>";
$message .= "</body></html>";

?>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PHP Form</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
<table class="formatTblClass">
<tr>
<th colspan="6"><?=$message;?></th>
</tr>
<tr>
<td width="68"><span>Name</span></td>
<td width="215"><input class="<?=$aClass;?>" type="text" name="fn" id="fn" /></td>
</tr>
<tr>
<td><span>Email</span></td>
<td><input class="<?=$aClass;?>" type="text" name="email" id="email" /></td>
</tr>
<tr>
<td><span>Phone</span></td>
<td><input class="<?=$aClass;?>" type="text" name="phone" id="phone" /></td>
</tr>
<tr>
<td colspan="6"><span>Comments
<textarea name="comments" id="comments" col="45" rows="5"></textarea>
</span>
<div align="center">
<input type="submit" name="Submit" id="Submit" value="Submit" />
</div></td>
</tr>
</table>
</form>

<?php

$fn = $_POST['fn'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$comments = $_POST['comments'];
//$emailMe = (isset($_POST['emailMe'])) ? $_POST['emailMe'] : 'No';

//validate
if(empty($fn) || empty($name) || empty($email) || empty($phone)){
$message = 'Fill in areas in red!';
$aClass = 'errorClass';}

$cvsData = $fn . "," . $name . "," . $email . "," . $phone . "," . $comments . "\n";

$fp = fopen("data.csv", "a" );


if($fp){
    fwrite($fp, $cvsData);
    fclose($fp);
    }
?>

</body>
</html>

<M/> 170 Why so serious? Featured Poster · Answer 2 · 2012-10-19T22:37:08+00:00

Well, what I meant to say is that the table that I want to see in the email shows up ontop of the form..

<?php
$fn = $_POST['fn'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$comments = $_POST['comments'];
mail($to, $subject, $message, $headers);
$to = "email@gmail.com";
$subject = "Form Submission";
    $headers = "From: " . strip_tags($_POST["req-email"]) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($_POST["req-email"]) . "\r\n";
    $headers .= "CC: email2@gmail.com\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content=Type: text/html; charset=ISO-8859-1\r\n";

    $message = "<html><head>";
    $message = "<style>";
    $message = "h1 {color:#blue;}";
    $message = "table {border:1px solid black;}";
    $message = "</style></head><body>";

    $message = "<h1>Hello, this form has been submitted!</h1>";

    $message .= '<img src= "logo.png" />';
    $message .= '<table rules="all" style="border-color: #ffb300;" cellpadding="10">';
    $message .= '<tr style="background: #ffb300;"><td><strong>Name:</strong> </td><td>' . strip_tags($_POST['req-name']) . '</td></tr>';
    $message .= '<tr><td><strong>Email:</strong> </td><td>' . strip_tags($_POST['req-email']) . '</td></tr>';
    $message .= '<tr><td><strong>Phone:</strong> </td><td>' . strip_tags($_POST['req-phone']) . '</td></tr>';
    $message .= '<tr><td><strong>Comments:</strong> </td><td>' .strip_tags($_POST['comments']) . '</td></tr>';
$message .= "</table>";
$message .= "</body></html>";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PHP Form</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF'];?>">
<table class="formatTblClass">
<tr>
<th colspan="6"><?=$message;?></th>
</tr>
<tr>
<td width="68"><span>Name</span></td>
<td width="215"><input class="<?=$aClass;?>" type="text" name="fn" id="fn" /></td>
</tr>
<tr>
<td><span>Email</span></td>
<td><input class="<?=$aClass;?>" type="text" name="email" id="email" /></td>
</tr>
<tr>
<td><span>Phone</span></td>
<td><input class="<?=$aClass;?>" type="text" name="phone" id="phone" /></td>
</tr>
<tr>
<td colspan="6"><span>Comments
<textarea name="comments" id="comments" col="45" rows="5"></textarea>
</span>
<div align="center">
<input type="submit" name="Submit" id="Submit" value="Submit" />
</div></td>
</tr>
</table>
</form>
<?php
$fn = $_POST['fn'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$comments = $_POST['comments'];
//$emailMe = (isset($_POST['emailMe'])) ? $_POST['emailMe'] : 'No';
//validate
if(empty($fn) || empty($name) || empty($email) || empty($phone)){
$message = 'Fill in areas in red!';
$aClass = 'errorClass';}
$cvsData = $fn . "," . $name . "," . $email . "," . $phone . "," . $comments . "\n";
$fp = fopen("data.csv", "a" );
if($fp){
    fwrite($fp, $cvsData);
    fclose($fp);
    }
?>
</body>
</html>

This is what it looks like right now, but it looks the same as before unfortunately... Anymore solutions? But I do see what you are trying to do it makes sense, but now I have to fix what I see.

I also forgot to mention, the inputs/data that is supposed to be in the custom table don't show up in my email... can you also assist me with that?
Screen_Shot_2012-10-19_at_3.31_.49_PM_

Style Email

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers