How to send HTML email using PHP
Sending mail to the website is a very crucial feature. It is important to get inquiries from websites by mail. PHP mail() function is used to send an email. We will learn by the following steps:
Step1: Add method POST in your form method attribute and properly give name attribute to input fields.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contact form</h2>
<form method="post">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" id="email" placeholder="Enter name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
<div class="form-group">
<label for="email">Mobile:</label>
<input type="text" class="form-control" id="email" placeholder="Enter Mobile" name="mobile">
</div>
<div class="form-group">
<label for="email">Message:</label>
<input type="text" class="form-control" id="email" placeholder="Enter name" name="message">
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Step2: Write PHP Code before <!DOCTYPE> Tag
PHP CODE:
<?php
$to = "your email id";
$subject = "Website Enquiry";
$message = "
<html>
<head>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
<th>Message</th>
</tr>
<tr>
<td>'".$_POST['name']."'</td>
<td>'".$_POST['email']."'</td>
<td>'".$_POST['mobile']."'</td>
<td>'".$_POST['message']."'</td>
</tr>
</table>
</body>
</html>
";
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// More headers
$headers .= 'From: <nextg>' . "\r\n";
$mail=mail($to,$subject,$message,$headers);
if($mail)
{
echo "<script>alert('Thanks')</script>";
}
else
{
}
?>
In this PHP Code, headers play an important role in sending emails in inboxes. If we don’t correctly set headers, the email will become spam, so we should always use headers.
In headers, we set what type of email we are sending, such as text, HTML, or attachment.
Complete Code:
<?php
$to = "your email id";
$subject = "Website Enquiry";
$message = "
<html>
<head>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
<th>Message</th>
</tr>
<tr>
<td>'".$_POST['name']."'</td>
<td>'".$_POST['email']."'</td>
<td>'".$_POST['mobile']."'</td>
<td>'".$_POST['message']."'</td>
</tr>
</table>
</body>
</html>
";
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// More headers
$headers .= 'From: <nextg>' . "\r\n";
$mail=mail($to,$subject,$message,$headers);
if($mail)
{
echo "<script>alert('Thanks')</script>";
}
else
{
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contact form</h2>
<form method="post">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" id="email" placeholder="Enter name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
<div class="form-group">
<label for="email">Mobile:</label>
<input type="text" class="form-control" id="email" placeholder="Enter Mobile" name="mobile">
</div>
<div class="form-group">
<label for="email">Message:</label>
<input type="text" class="form-control" id="email" placeholder="Enter name" name="message">
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
