CSS styling html form

Question

I've got a php form and would like to add some css so that the HTML email isn't boring plain text.

     $msg  = "<h2><strong>EMAIL SUBMISSION FROM</strong></h2><br>" . 
  PHP_EOL;
     $msg .= "your website<br>" . PHP_EOL;
     $msg .= "-------------------------------------------------<br><br>" . 
  PHP_EOL . PHP_EOL;
     $msg .= "<strong>Name: </strong>" . PHP_EOL;
     $msg .= "$name <br>" . PHP_EOL . PHP_EOL;
     $msg .= "<strong>Email: </strong>" . PHP_EOL;
     $msg .= "$email <br>" . PHP_EOL . PHP_EOL;
     $msg .= "<strong>Contact Number: </strong>" . PHP_EOL;
     $msg .= "$phone <br>" . PHP_EOL . PHP_EOL;
     $msg .= "<strong>Day in: </strong>" . PHP_EOL;
     $msg .= "$dayin <br>" . PHP_EOL . PHP_EOL;
     $msg .= "<strong>Day out: </strong>" . PHP_EOL;
     $msg .= "$dayout <br><br>" . PHP_EOL . PHP_EOL;
     $msg .= "<strong>Notes / Comments: </strong><br>" . PHP_EOL;
     $msg .= "$comments" . PHP_EOL . PHP_EOL;

How can I make the "EMAIL SUBMISSION FROM" a different color / font? I've tried <span style="color:#FF0000;">EMAIL SUBMISSION FROM</span> and that doesn't work

My Headers:

    $headers = "From: $email" . PHP_EOL;
    $headers .= "Reply-To: $email" . PHP_EOL;
    $headers .= "MIME-Version: 1.0" . PHP_EOL;
    $headers .= "Content-type: text/html; charset=utf-8" . PHP_EOL;
    $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

I'm not sure if anything needs changing in the headers?

Also, at the top of my contact.php file is if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n"); Must this stay the same?

EDIT

  $msg = "<html><body>
     <strong>EMAIL SUBMISSION FROM</strong><br>
     your website<br>
     ------------------------------------------------------<br><br>
     <strong>Name: </strong>
     $name <br>
     <strong>Email: </strong>
     $email <br>
     <strong>Contact Number: </strong>
     $phone <br>
     <strong>Day in: </strong>
     $dayin <br>
     <strong>Day out: </strong>
     $dayout <br><br>
     <strong>Notes / Comments: </strong><br>
     $comments
     </body></html>";

Note; for the sake of readability, you might consider using a heredoc, php.net/manual/en/… — Dan Lugg
– Dan Lugg, Commented Dec 7, 2011 at 8:56

Dan Lugg · Accepted Answer · 2011-12-07 08:57:18Z

1

I found an example for sending emails with css here: http://css-tricks.com/2866-sending-nice-html-email-with-php/

hope it solves your problem :).

edited Dec 7, 2011 at 8:57

Dan Lugg

20.7k19 gold badges116 silver badges180 bronze badges

answered Dec 7, 2011 at 8:55

Stefan Koenen

2,3352 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reflex84 Over a year ago

Thanks ... I've read that article before, though every form seems to be coded differently and it usually never works out the same if I just copied their work. So I'm just focusing on MY form at the moment.

Interrobang · Accepted Answer · 2011-12-07 08:59:47Z

1

Augh, the code...

Okay, the short(est) answer is:

<strong style="color:#FF0000">.....</strong>

Will work for anything. Slightly better, and supported by most e-mail clients, is to use some inline styles:

<style type="text/css">
  .important { color: #ff0000; }
</style>

<strong class="important">....</strong>

This will do the same thing, and now if you want to make something else red later, or if you want to change important things to be orange, you have a single place you can change that.

Finally, with regards to the PHP part... you don't need all those newlines. HTML is whitespace-insensitive, so all they're doing is making your source code prettier. A better format would be something like this:

<?php
  $msg = <<<MESSAGE
  <h2><strong>EMAIL SUBMISSION FROM</strong></h2><br />
  <strong>Name: </strong> $name<br />
  <strong>Email: </strong> $email<br />
  ... etc ...
MESSAGE;
?>

This uses PHP "heredoc" format. You can learn more about it here: http://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc

answered Dec 7, 2011 at 8:59

Interrobang

17.5k3 gold badges57 silver badges63 bronze badges

5 Comments

Reflex84 Over a year ago

Hi, Thanks I've coded my HTML much better (see EDIT in my question above). I've tried doing <strong style="color:#FF0000">.....</strong> and it doesn't work for some reason. I've been doing this before I even posted this question but I don't understand why its not working.

Interrobang Over a year ago

Is it possible that there's another CSS rule that is clobbering the color? What e-mail client are you viewing your result in?

Reflex84 Over a year ago

I doubt it is my email client which is Windows Mail (vista) because I receive html emails on a daily basis. Nothing to do with my headers? Nothing to do with if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");?

Reflex84 Over a year ago

Where do I put this: <style type="text/css"> .important { color: #ff0000; } </style> ?? Between <html> and <body>

Reflex84 Over a year ago

"MIME-Version: 1.0" or "MIME-Version: 1.0\r\n" ? ... and whats better charset=utf-8 or charset=ISO-8859-1\r\n ?

stealthyninja · Accepted Answer · 2011-12-07 09:02:19Z

1

How can I make the "EMAIL SUBMISSION FROM" a different color / font? I've tried EMAIL SUBMISSION FROM and that doesn't work

color:FF0000 should be color:#FF0000.

I'm not sure if anything needs changing in the headers?

Headers seem fine.

Also, at the top of my contact.php file is if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n"); Must this stay the same?

Yes, this is fine.

answered Dec 7, 2011 at 9:02

stealthyninja

10.4k11 gold badges56 silver badges61 bronze badges

2 Comments

stealthyninja Over a year ago

Guide for CSS support in popular web and desktop e-mail clients: campaignmonitor.com/css

Reflex84 Over a year ago

Hi, thanks ... I know sorry typo error #FF0000 (changed in edit)

Collectives™ on Stack Overflow

CSS styling html form

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related