Make a Simple Html + Css + Php form mail
This time i try to make a html – php form, and customize it, with a css file.The html defines the form interface, ( two text fields , one for the Name and one for the e-mail, and a text Box , for the message ), the php file is the ones that is calling when the user pushes the “send” button, the css file is the ones that contains the guideline for the graphics customization.show Example ►
Start to analize the html file :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<!– link to an external css page –>
<link rel=”stylesheet” type=”text/css” href=”formStyle.css” />
<title>Simple-Mail-Form Html-Php by Choosepizzi.com</title>
</head>
<body>
<!– insert the form in a “div” helps you if you wants to customize the graphic of the form –>
<div id=”formMail”>
<h2>************Form Mail by Choosepizzi.com*****************</h2>
<!– Define the form; “action” field is where we write the name of the php file, the “method” field define with method “get” or “post” you want use–>
<!– the “name 2 is the name of the from , and, the “target” is the filed that controls where the new document will be displayed when the user follows a link–>
<form action=”contact.php” method=”post” name=”form” target=”_blank”>
<!– The first field of the form –>
<h1>Name :
<input name=”name” class=”textName” type=”text” />
<br />
</h1>
<h1>@mail :
<input name=”email” class=”textMail” type=”text” />
<br />
<!– the text Area for the message –>
</h1>
<h1>Message:
<textarea name=”message” class=”box” cols=”20″ rows=”5″></textarea>
<br />
<!– the button that send the form to the php page –>
<input name=”Send” class=”btn” type=”submit” value=”Send” />
</h1>
<h2>*****************************************************************</h2>
</form>
</div>
</body>
</html>
Analize the Css file :@charset “utf-8”;
/* CSS Document */
/* Define the style for the title of the box */
h1{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
}
/* Define the style for the title of the form */
h2{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}
/* Define the style for form */
#formMail{
width:330px;
height:230px;
background-image:url(source/backScrollIsa.png);
padding-left:40px;
padding-top:40px;
padding-bottom:40px;
padding-right:40px;
}
/* Define the style for the input box of the Name box */
input.textName {
font: bold 12px Arial, Helvetica, sans-serif;
margin-left:16px;
margin-bottom:-14px;
width:225px;
}
/* Define the style for the input box of the Mail box */
input.textMail {
font: bold 12px Arial, Helvetica, sans-serif;
margin-left:14px;
margin-bottom:-14px;
width:225px;
}
/* Define the style for the text area */
textarea.box {
font: bold 12px Arial, Helvetica, sans-serif;
padding-right: 5px;
padding-left: 5px;
margin-left:00px;
width:214px;
}
/* Define the style for the button */
input.btn {
margin-left:230px;
margin-top:10px;
}
And now the php file :
<?php
// your mail
$to = “pizzi@sfuocati.net”;
// mail Object
$subject = ‘Form Contatto’;
//var taken from the html file
$nome = $_POST[‘name’];
$email = $_POST[’email’];
$messaggio = $_POST[‘message’];
if(!empty($_POST))
{
//starts to build the message
$message = “Nome: “. $nome .”\n”;
$message .= “Email: “. $email .”\r\n”;
$message .= “Messaggio: “. $messaggio .”\r\n”;
//define the object of the message
$emailHeaders = “From: $nome<$email>”;
//email of the user who have compiled the form
$emailHeaders .= “\r\nReply-To: $email”;
//check if the mail was sent,
if(mail($to, $subject, $message, $emailHeaders))
{
//you can add other function
print “resultSend=SENT”;
}
else
//in case the mail wasn’t sent
{
//you can add other function
print “resultSend=ERROR”;
}
}
?>
this wants to be an introduction to a html-css-php form mail , here you can download the .zip file with the source
that’s all
By by Pizzi