Here is a tutorial on how to receive email from HTML form using PHP. Here is a demo and tutorial on how to make the email recipient target land on your contact form.
And how to connect a contact form to Receive Email from HTML Form using PHP and how to use the PHP mail() function.
How to Receive Email from HTML Form using PHP
Video Tutorial
There are a few steps to Receive Email from HTML Form using PHP and send the HTML form submission directly to an email address:
- Create a contact form using HTML and CSS
- Host HTML form on the live web hosting server to write PHP script
- Open your VS Code editor
- Connect VS Code editor to live web server using FTP-Simple extension
- Change your file extension from .html to .php
- Write PHP code to send HTML form data to email using PHP
Important Note: First of all, host your contact form on any live web server in order to execute PHP code. And change your file extension to .php to run a PHP script.
HTML Source Code
<!-- connect with php file -->
<?php include 'mail.php' ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form id="contact" action="" method="post">
<h3>Contact Details</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<div class="row">
<div class="col">
<fieldset>
<input placeholder="First Name" name="firstName" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" name="tel" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Date of birth" type="text" onfocus="(this.type='date')" name="date" tabindex="4" required>
</fieldset>
<fieldset>
<input type="text" name="city" placeholder="City/State Name" tabindex="5" required>
</fieldset>
</div>
<div class="col">
<fieldset>
<input type="text" placeholder="Last Name" name="lastName" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input type="text" name="address" placeholder="Home Address" tabindex="5" required>
</fieldset>
<fieldset>
<p>What is your employment status?</p>
<div class="radio">
<input type="radio" id="job" name="status" value="job">
<label for="job">Employed</label>
</div>
<div class="radio">
<input type="radio" id="business" name="status" value="business">
<label for="business">Business</label>
</div>
<div class="radio">
<input type="radio" id="student" name="status" value="student">
<label for="student">Student</label>
</div>
</fieldset>
<!-- <fieldset>
<label for="file">Upload</label>
<input type="file" id="file" name="file">
</fieldset> -->
</div>
</div>
<!-- Error display -->
<div>
<p class="success"> <?php echo $success; ?> </p>
<p class="failed"> <?php echo $failed; ?> </p>
</div>
<fieldset>
<button type="submit" name="submit" id="contact-submit" data-submit="...Sending">Submit Now</button>
</fieldset>
</form>
</div>
</body>
</html>
CSS Source Code
Now, you will get the source code for CSS (Cascading Style Sheet).
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
* {
margin:0;
padding:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body {
font-family:"Open Sans", Helvetica, Arial, sans-serif;
font-weight:400;
font-size: 16px;
line-height:30px;
color:rgb(32, 32, 32);
background: rgb(55, 170, 107);
}
.container {
max-width:900px;
width:100%;
margin:0 auto;
position:relative;
}
#contact input, textarea, button
{ font:400 16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
background:#e7e7e7;
padding:25px;
margin:50px 0;
}
#contact h3 {
color: green;
display: block;
font-size: 30px;
font-weight: 700;
margin-left: 20px;
}
#contact h4 {
margin:5px 0 15px;
display:block;
color: rgb(31, 31, 31);
font-size:13px;
margin-left: 20px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#contact input:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid rgb(134, 134, 134);
}
#contact button {
cursor:pointer;
width: 20%;
border:none;
background:rgb(3, 153, 212);
color:#FFF;
margin:0 0 5px 20px;
padding:10px;
font-size:15px;
}
#contact button[type="submit"]:hover {
background:#09C;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus {
outline:0;
border:1px solid rgb(112, 112, 112);
}
::-webkit-input-placeholder {
color:rgb(66, 66, 66);
}
.row {
display: flex;
width: 100% !important;
}
.row .col {
width: 50%;
margin: 20px;
}
input[type="radio"] {
width: 10% !important;
}
#contact .row .radio {
border: 1px solid rgb(97, 97, 97) !important;
background-color: rgb(255, 255, 255);
margin-bottom: 5px !important;
}
.success{
color: green;
font-weight: 700;
padding: 5px;
text-align: center;
}
.failed{
color: red;
font-weight: 700;
padding: 5px;
text-align: center;
}
PHP Source Code – How to Send HTML Form to Direct Mail?
Following is the PHP Source code to get an email from an HTML form using PHP and send the HTML form to direct mail. Create a new mail.php file and paste the code inside it.
<?php
if( isset($_POST['submit']) ) {
//getting user data
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$fromEmail = $_POST['email'];
$phone = $_POST['tel'];
$dateOfBirth = $_POST['date'];
$cityName = $_POST['city'];
$homeAddress = $_POST['address'];
$employmentStatus = $_POST['status'];
//Recipient email, Replace with your email Address
$mailTo = 'hmawebdesign@hotmail.com';
//email subject
$subject = ' A New Message Received From ' .$firstName;
//email message body
$htmlContent = '<h2> Email Request Received </h2>
<p> <b>Client Name: </b> '.$firstName . " " . $lastName . '</p>
<p> <b>Email: </b> '.$fromEmail .'</p>
<p> <b>Phone Number: </b> '.$phone .'</p>
<p> <b>Date of Birth: </b> '.$dateOfBirth .'</p>
<p> <b>City Name: </b> '.$cityName .'</p>
<p> <b>Home Address: </b> '.$homeAddress .'</p>
<p> <b>Employment Status: </b> '.$employmentStatus .'</p>';
//header for sender info
$headers = "From: " .$firstName . "<". $fromEmail . ">";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
//PHP mailer function
$result = mail($mailTo, $subject, $htmlContent, $headers);
//error checking
if($result) {
$success = "The message was sent successfully!";
} else {
$failed = "Error: Message was not sent, Try again Later";
}
}
?>
Final Words
The tutorial explained how do I send an email from the client side using the PHP mailer function. If you find it helpful don’t forget to SUBSCRIBE to my YouTube Channel.
Welcome to my channel, HMA WebDesign! The purpose of this channel is to provide you a complete training course on Web development and freelancing techniques. This channel will teach you WordPress Website, eCommerce Website, Custom CMS, Error Fix, Usability Test, Performance Optimization, Security, and SEO. Blog Website: https://www.hmawebdesign.com/ Please subscribe to our channel for learning and earning money online! ------------------------------------------------------------------- Contact me through social media for web development work: - witter: https://twitter.com/HmaWebdesign - Facebook: https://web.facebook.com/HmaWebdesign - LinkedIn: https://www.linkedin.com/hmawebdesign/ - Instagram https://www.instagram.com/hmawebdesign/
youtube.com
Top comments (0)