HTML5 and PHPMailer 101
INTRODUCTION
HTML5 is the latest standard for HTML. HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. It was specially designed to deliver rich content without the need for additional plugins. All major browsers (Chrome, Firefox, Internet Explorer, Safari, Opera) support the new HTML5 elements and APIs, and continue to add new HTML5 features to their latest versions.
Read more at http://www.w3schools.com/html/html5_intro.asp
STEPS
0) Pre-requisite:
1) In Notepad++ Project, create Project201.
2) Create an html5 file, contactform101.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact Form</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<header class="body">
<h1>Contact Form</h1>
</header>
<section class="body">
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</section>
<footer class="body">
</footer>
</body>
</html>
|
3) Browse contactform101.html.
4) create css file, style.css
@charset "utf-8";
/* CSS Document */
body {
font-size:100%;
font-family:Georgia, "Times New Roman", Times, serif;
color:#3a3a3a;
}
.body {
width:576px;
margin:0 auto;
display:block;
}
h1 {
width:498px;
height:64px;
background:url(images/h1Bg.jpg);
color:#fff;
font-family:bebas;
padding:17px 0px 0px 78px;
letter-spacing:1px;
font-size:2.2em;
margin:0 auto;
}
form {
width:459px;
margin:0 auto;
}
label {
display:block;
margin-top:20px;
letter-spacing:2px;
}
input, textarea {
width:439px;
height:27px;
background:#efefef;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
}
input:focus, textarea:focus {
border:1px solid #97d6eb;
}
textarea {
height:213px;
font-family:Arial, Helvetica, sans-serif;
background:url(images/textareaBg.jpg);
background-repeat:no-repeat;
background-size:cover;
}
#submit {
background:url(images/submit.jpg);
width:127px;
height:38px;
text-indent:-9999px;
border:none;
margin-top:20px;
cursor:pointer;
}
#submit:hover {
opacity:0.9;
}
footer a img {
border:none;
float:right;
margin:0px 59px 40px 0px;
}
|
5) save the following images to ../images/ folder.
h1Bg.jpg
textareaBg.jpg
submit.jpg
6) Browse
7) Append simple php scripts to send the data (without validation and protection).
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
}
?>
|
Note: mail() function requires some configuration on php.ini. You may try phpmailer instead.
8) PHPMailer.
1) Download phpmailer package, http://www.inmotionhosting.com/support/files/downloads/PHPMailer_5.2.0.zip
2) unzip the folder, rename as “phpmailer”, put it under your application.
3) create the following test file, mailer.php (change your form action target to mailer.php)
<?php
require_once('class.phpmailer.php');
//include("class.smtp.php"); // optional, gets called from within class.phpmailer.php if not already loaded
$mail = new PHPMailer();
//$body = file_get_contents('contents.html');
//$body = eregi_replace("[\]",'',$body);
$body="test"; //$body=$_POST['message'];
$mail->IsSMTP(); // telling the class to use SMTP
$mail->Host = "mail.yourdomain.com"; // SMTP server
$mail->SMTPDebug = 2; // enables SMTP debug information (for testing)
// 1 = errors and messages
// 2 = messages only
$mail->SMTPAuth = true; // enable SMTP authentication
$mail->SMTPSecure = "tls"; // sets the prefix to the servier
$mail->Host = "smtp.gmail.com"; // sets GMAIL as the SMTP server
$mail->Port = 587; // set the SMTP port for the GMAIL server
$mail->Username = "yourusername@gmail.com"; // GMAIL username
$mail->Password = "yourpassword"; // GMAIL password
$mail->SetFrom('name@yourdomain.com', 'First Last');
$mail->AddReplyTo("name@yourdomain.com","First Last");
$mail->Subject = "PHPMailer Test Subject via smtp (Gmail), basic";
//$mail->Subject = $_POST['postTitle'];
$mail->AltBody = "To view the message, please use an HTML compatible email viewer!"; // optional, comment out and test
$mail->MsgHTML($body);
$address = "recipient@gmail.com";
$mail->AddAddress($address, "John Doe");
//$mail->AddAttachment("images/phpmailer.gif"); // attachment
//$mail->AddAttachment("images/phpmailer_mini.gif"); // attachment
if(!$mail->Send()) {
echo "Mailer Error: " . $mail->ErrorInfo;
} else {
echo "Message sent!";
}
?>
|
