How to Send HTML Form Data to Email Using PHP

How to send form data to email using PHP
How to send form data to email using PHP
Hi, This article will show you how to send HTML form to direct mail address and at the same time a confirmation email will sent to client on form submission. A Simple PHP contact form to send email with source code.
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

Can I send HTML form data to email?

Yes, you can send your html form data to your email address by using PHP. In this toturial I will show you How to Send HTML Form Data to Email Using PHP mail( ) function.

Moreover, this toturial will explain How to send HTML form to direct mail and at the same time a confirmation email will sent to client on HTML form submission. A Simple PHP contact form to send email with source code.

How to make an HTML form send data to an email address?

When a user fill the contact form and press submit button, it will send HTML form data to email using 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 submission directly to an email address:

  1. Create a contact form using HTML and CSS
  2. Host HTML form on live web hosting server to write PHP script
  3. Open your VS Code editor
  4. Connect VS Code editor to live web server using SFTP extension
  5. Change your file extension from .html to .php
  6. Write PHP code to send HTML form data to email using 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 Get Email from HTML Form Using PHP

How to Send HTML Form Data to Email Using PHP

Now I am going to provide you 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 the 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?

SFTP remote editing visual studio code

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 customer can write the 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.

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

21 Responses

  1. Aw, this was a really nice post. In concept I want to put in writing like this moreover – taking time and precise effort to make a very good article… however what can I say… I procrastinate alot and not at all seem to get one thing done.

  2. Simply wish to say your article is as astonishing. The clarity in your post is just spectacular and i could assume you are an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please keep up the enjoyable work.

  3. I can not participate now in discussion – there is no free time. I will be released – I will necessarily express the opinion. [url=https://westio.site/]Click here…[/url]

  4. Hello, the community and at the beginning I would like to ask you what web portals are most often hosted in your browsers and what are your preferences in this “matter”?

    For example, I visit a news aggregator from various portals [url=https://xmc.pl]XMC SYSTEM[/url] what distinguishes it from other websites of this type? Check it out for yourself 🙂

    I look forward to an interesting and substantive discussion 🙂

  5. Hi

    I have followed your instructions, however when I hit submit although I get the message “Your Message was sent Successfully!” The email is not being received and yes I have changed the email in the php script

Leave a Reply

Your email address will not be published.