Can I send HTML form data to email?
Yes, you can send your HTML Form Data to Email Using PHP. In this tutorial, I will show you How to Send HTML Form Data to Email Using PHP mail( ) function.
Moreover, this tutorial will explain How to send an HTML form to direct mail and at the same time, a confirmation email will be sent to the client on HTML form submission. A Simple PHP contact form to send emails with source code.
How to make an HTML form send data to an email address?
When a user fills out the contact form and presses submit button, it will send HTML form data to email using the PHP mailer function. Mostly, people want to get HTML form data to email after form submission.
How to Send Contact Form to Email Using PHP?
Follow these steps to send the HTML Form Data to Email Using PHP:
- 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 SFTP extension
- Change your file extension from .html to .php
- Write PHP code to send HTML form data to email using a PHP mailer
You can watch the step-by-step guide in the following video tutorial to send an email from the client side.
Video Tutorial – How to Send HTML Form Data to Email Using PHP
Now I am going to provide you with the source codes of HTML, CSS, and PHP of the contact form. I have created a separate sentMail.php file to write the PHP script. And add this PHP file with the HTML code of the contact form using the PHP include statement.
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.
If you don’t know how to connect your VS Code editor to a live web server. The SFTP extension is used for remote file editing in Visual Studio Code The following video tutorial will help you to link your Visual Studio Code Editor with the web hosting server.
How do I use SFTP in VSCode?
HTML Contact Form Source Code
Below is the HTML source code of the contact form to send the form details to an email address. This contact form contains the following user data fields.
- User name
- User email address
- Phone number of the customer
- Subject line for the email
- A message field where customers can write a detailed explanation.
<?php include 'sentMail.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>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" name="name" type="text" tabindex="1" autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="email" type="email" tabindex="2">
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" name="tel" type="tel" tabindex="3" >
</fieldset>
<fieldset>
<input placeholder="Type your subject line" type="text" name="subject" tabindex="4">
</fieldset>
<fieldset>
<textarea name="message" placeholder="Type your Message Details Here..." tabindex="5"></textarea>
</fieldset>
<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 of Contact Form
Following is 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:300;
font-size: 12px;
line-height:30px;
color:#777;
background:rgb(3, 153, 212);
}
.container {
max-width:400px;
width:100%;
margin:0 auto;
position:relative;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
background:#F9F9F9;
padding:25px;
margin:50px 0;
}
#contact h3 {
color: blue;
display: block;
font-size: 30px;
font-weight: 700;
}
#contact h4 {
margin:5px 0 15px;
display:block;
color: black;
font-size:13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea: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 #AAA;
}
#contact textarea {
height:100px;
max-width:100%;
resize:none;
}
#contact button[type="submit"] {
cursor:pointer;
width: 100%;
border:none;
background:rgb(3, 153, 212);
color:#FFF;
margin:0 0 5px;
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, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
.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.
<?php
if(isset($_POST['submit'])) {
$mailto = "[email protected]"; //My email address
//getting customer data
$name = $_POST['name']; //getting customer name
$fromEmail = $_POST['email']; //getting customer email
$phone = $_POST['tel']; //getting customer Phome number
$subject = $_POST['subject']; //getting subject line from client
$subject2 = "Confirmation: Message was submitted successfully | HMA WebDesign"; // For customer confirmation
//Email body I will receive
$message = "Cleint Name: " . $name . "\n"
. "Phone Number: " . $phone . "\n\n"
. "Client Message: " . "\n" . $_POST['message'];
//Message for client confirmation
$message2 = "Dear" . $name . "\n"
. "Thank you for contacting us. We will get back to you shortly!" . "\n\n"
. "You submitted the following message: " . "\n" . $_POST['message'] . "\n\n"
. "Regards," . "\n" . "- HMA WebDesign";
//Email headers
$headers = "From: " . $fromEmail; // Client email, I will receive
$headers2 = "From: " . $mailto; // This will receive client
//PHP mailer function
$result1 = mail($mailto, $subject, $message, $headers); // This email sent to My address
$result2 = mail($fromEmail, $subject2, $message2, $headers2); //This confirmation email to client
//Checking if Mails sent successfully
if ($result1 && $result2) {
$success = "Your Message was sent Successfully!";
} else {
$failed = "Sorry! 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 feel any difficulty understanding this post, you can ask in the comment section below. Your suggestion and queries are always welcome. If you find it helpful don’t forget to SUBSCRIBE to my YouTube Channel.
