[Frede]

How to design a good looking email for your server

What will i show
i will show you how you can make some really nice mails for your server instead of the mails you send when you use slice mailer include. This will be a welcome mail

Why
i have seen a few use slice mailer_include to sending mails from a server, but of some reason people dont make a design to them, so they are basicly text. Therefore i wanted to create this tutorial so i can show people how they can design...
i have also created a file to show you the outcome of the tutorial - http://stunts-paradise.com/mail.php
Basicly we are going to learn some CSS and HTML and PHP

This is a mail with slice:

Quote:

Thank you for registering at Stunts-Paradise S-P Community. Your username is [YG]Frede. If you forget your password, you may change it at http://stunts-paradise.com/index.php?action=reminder. Regards, The Stunts-Paradise S-P Community Team.

Personal i will say this is a ugly mail, so with HTML and CSS i will turn a welcomemail into a nice new colored mail. Again you can see the result of what you will be told here, here

Lets get started
First lets start with the PAWN

pawn Код:

new pname[MAX_PLAYER_NAME], str[150];
GetPlayerName(playerid, pname, MAX_PLAYER_NAME);
format(str, sizeof(str), "e=%s&n=%s",PlayerInfo[playerid][email], pname);//You will of cause need to have a place where you get the persons email
HTTP(playerid, HTTP_POST, "stunts-paradise.com/mail.php", str, "MyHttpResponse"); //since my website is stunts-paradise.com, then ill use my website

This will send a message to the website in this case stunts-paradise.com/mail.php and post the data: e=your_email&n=your_name.
f.ex. e=frederik.v@live.dk&n=[YG]Frede (acctully it will be e=frederik.v@live.dk&n=%05bYG%05dFrede, but i dont need to explain why)

HTML & PHP
First of all, we need to catch the info we are sending. We can catch the info with $_POST['bla...']; but since we cant send a email to nobody will i instead show a HTML box that you can post some informations with.
This is the basic we shall start with i will explain what and how

PHP код:


<?php
if(empty($_POST['e'])||empty($_POST['n']))
{
?>
<form name="input" action="mail.php" method="post">
email: <input type="text" name="e" /> <br /> 
name: <input type="text" name="n" /> <br /> 
<input type="submit" value="Submit" />
</form>
<?php
}
else
{
    $to  = $_POST['e'];
    $name = $_POST['n'];
    
    // subject
    $subject = '';
    
    // message
    $message = '';
    // To send HTML mail, the Content-type header must be set
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    // Additional headers
    $headers .= 'To: '.$name.' <'.$to.'>' . "\r\n";
    $headers .= 'From: Frederik Vester <Frederik@example.com>' . "\r\n";
    
    
    // Mail it
    mail($to, $subject, $message, $headers);
    echo($message);
}
?>

Explaination

PHP код:

<?php 
if(empty($_POST['e'])||empty($_POST['n'])) 
{ 
?>

This will simply catch the postes and see if they got any info in them...

Код HTML:

<form name="input" action="mail.php" method="post"> 
email: <input type="text" name="e" /> <br />  
name: <input type="text" name="n" /> <br />  
<input type="submit" value="Submit" /> 
</form>

If the $_POST['bla...'] then it will post this HTML form that will show us two inputlines where we can write our email and name.
The <form> tag is made so you can post a input. - well together with the <input> tag.

PHP код:

<?php 
}

This will start the PHP again and close the tag. If you dont do this, the browser will print a error.


This will i explain in the PHP tag

PHP код:

else 
{ 
    $to  = $_POST['e']; //get the post called "e" that is our email
    $name = $_POST['n']; //get the post called "n" that is our name
     
    // subject 
    $subject = ' ';  //This is of cause our subject, selfexplaining
     
    // message 
    $message = ' '; //This is the mail itself, right now it is a total empty mail, we are going to post some HTML in later.
    // To send HTML mail, the Content-type header must be set 
    $headers  = 'MIME-Version: 1.0' . "\r\n"; 
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";  
    // Additional headers 
    $headers .= 'To: '.$name.' <'.$to.'>' . "\r\n"; 
    $headers .= 'From: Frederik Vester <Frederik@example.com>' . "\r\n"; 
     
     
    
    mail($to, $subject, $message, $headers); //simply mail it 
    echo($message); //show us the message we send, you can comment this if you want
} 
?> 


CSS & HTML
CSS is Cascading Style Sheets. that is used to form the style of the HTML that we write.

two thing about HTML.
1. is the comments, a comment in HTML looks like this:

Код HTML:

<!--text here-->

2. is that you cannot set a background in a email... well you can if you use a pic, but if you try to color the email, it wont work. This is because the popular email browsers doesnt accept background colors.

well in my mail the HTML looks like this:

Код HTML:

	<html>
	<head>
	  <title>Stunts-Paradise - Welcome mail</title>
	  <div style="background:#F00000; border-radius: 15px; width:2000px; color:FFFFFF";><table border="1">
	  <tr><td><a href="http://stunts-paradise.com"><img src="http://stunts-paradise.com/img/logo.png"></img></a></td>
	  <td><a href="http://stunts-paradise.com/?page=home"><h1 style="color:white; width:200px;"><center>HOME</center></h1></a></td><td><a href="http://forum.stunts-paradise.com/"><h1 style="color:white; width:200px;"><center>FORUM</center></h1></td><td><a href="http://stunts-paradise.com/?page=download"><h1 style="color:white; width:200px;"><center>DOWNLOADS</center></h1></td><td><a href="http://stunts-paradise.com/?page=info&p='.$name.'"><h1 style="color:white; width:200px;"><center>UCP profile</center></h1></td></tr></table></div>
	</head>
	<body>
	<center>
	<table style="background:#00BBBB; border-radius:15px;">
	<tr>
	<td>
	
	<center><a href="http://stunts-paradise.com"><img src="http://stunts-paradise.com/img/sigle.png"></img></a>
	<br>
	<h1 style="color:green">
	Welcome to stunts paradise.com we hobe you will enjoy your stay
	</h1></center></td>
	</tr>
	</table>
	</center>
	<center><p style="background:#000; border-radius: 15px; color:#FFFFFF">
	Copyright© 2013-2014 - stunts-paradise.com</p>
	</center>
	</body>
	</html>

But lets part it up to see how it works...
First without CSS - looks ugly

Код HTML:

<html><!--show the browser that this is HTML-->
<head>
<title>Stunts-Paradise - Welcome mail</title><!--title of the mail-->
<div><table border="1"><!--this will show a table with alot small boxes, border is so we can see where the box end and the new start-->
<tr><td><!--show start the first line in the table and place it-->
<a href="http://stunts-paradise.com"><!--this is a start of a link--><img src="http://stunts-paradise.com/img/logo.png"><!--start of a picture - here a LOGO--></img><!--end of the pic tag--></a><!--end of the link--></td><!--new box in the table-->
<td><a href="http://stunts-paradise.com/?page=home"><!--again a link--><h1><!--This will get the HOME to look mutch better--><center><!--will but the HOME in the mittle of the box-->HOME</center></h1></a></td><td><a href="http://forum.stunts-paradise.com/"><h1><center>FORUM</center></h1></td><td><a href="http://stunts-paradise.com/?page=download"><h1><center>DOWNLOADS</center></h1></td>
<td><a href="http://stunts-paradise.com/?page=info&p='.$name.'"><!--this is both HTML and PHP--><h1><center>UCP profile</center></h1>
</td></tr></table></div>
</head>

This is only the head since i dont need to explain the same in the <body> and <footer>. instead i will show you my code and how the outcome will be:

PHP код:

<?php
if(empty($_POST['e'])||empty($_POST['n']))
{
?>
<form name="input" action="mail.php" method="post">
email: <input type="text" name="e" /> <br /> 
name: <input type="text" name="n" /> <br /> 
<input type="submit" value="Submit" />
</form>
<?php
}
else
{
    $to  = $_POST['e'];
    $name = $_POST['n'];
    
    // subject
    $subject = 'Welcome to Stunts-Paradise.com';
    
    // message
    $message = '
    <html>
    
    <head>
      <title>Stunts-Paradise - Welcome mail</title>
      <div style="background:#F00000; border-radius: 15px; width:2000px; color:FFFFFF";><table border="1">
      <tr><td><a href="http://stunts-paradise.com"><img src="http://stunts-paradise.com/img/logo.png"></img></a></td>
      <td><a href="http://stunts-paradise.com/?page=home"><h1 style="color:white; width:200px;"><center>HOME</center></h1></a></td><td><a href="http://forum.stunts-paradise.com/"><h1 style="color:white; width:200px;"><center>FORUM</center></h1></td><td><a href="http://stunts-paradise.com/?page=download"><h1 style="color:white; width:200px;"><center>DOWNLOADS</center></h1></td><td><a href="http://stunts-paradise.com/?page=info&p='.$name.'"><h1 style="color:white; width:200px;"><center>UCP profile</center></h1></td></tr></table></div>
    </head>
    <body>
    <center>
    <table style="background:#00BBBB; border-radius:15px;">
    <tr>
    <td>
    
    <center><a href="http://stunts-paradise.com"><img src="http://stunts-paradise.com/img/sigle.png"></img></a>
    <br>
    <h1 style="color:green">
    Welcome to stunts paradise.com we hobe you will enjoy your stay
    </h1></center></td>
    </tr>
    </table>
    </center>
    <center><p style="background:#000; border-radius: 15px; color:#FFFFFF">
    Copyright© 2013-2014 - stunts-paradise.com</p>
    </center>
    </body>
    </html>';
    // To send HTML mail, the Content-type header must be set
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    // Additional headers
    $headers .= 'To: '.$name.' <'.$to.'>' . "\r\n";
    $headers .= 'From: Frederik Vester <Frederik@example.com>' . "\r\n";
    
    
    // Mail it
    mail($to, $subject, $message, $headers);
    echo($message);
}
?>

As i think you can see, is that here i have the style=""> stuff. this is CSS. so when i say:

Код HTML:

<a href="http://******.com"><p style="color:green; background:#F00000;">some text</p></a>

Then the text, with a link, will be green and the backgroundcolor will be red. You could also do "color:#hex_for_green;" the most importan is just that the server know what you try to color and you remember to put the ; in the end else nothing will happen.

So remember you can send a mail to yourself with the outcome so you can see how it works - click HERE

So the last thing i will say is that if you will learn about this and see what you can with CSS and HTML in a mail then goto http://www.w3schools.com/ they really show the most of what you can.

[RiChArD_A]

REAL NICE! REP+