How to Receive Email from HTML Form using PHP | How to Connect Contact form to email in PHP

How to Send an Email on Form Submission Using PHP (1)
How to Send an Email on Form Submission Using PHP (1)
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

Here is a tutorial on how to receive email from an 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 an email and how to use the PHP mail() function.

PHP Mail is most often used by website mods and admins because it is cheap, fast, and easy to set up. Many UK businesses prefer PHP Mail because it can be configured to help with SEO as well as marketing automation.

We also provide a series of tutorials to help you send messages from your theme’s functions.php file. This is a technique that is often referred to as ‘content courtesy of cold messages.’

How to Receive Email from HTML Form using PHP

There are a few 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 the live web hosting server to write PHP script
  3. Open your VS Code editor
  4. Connect VS Code editor to live web server using FTP-Simple extension
  5. Change your file extension from .html to .PHP
  6. Write PHP code to send HTML form data to email using PHP

How does PHP Mail Function Work?

When a user fills 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.

The first way to send a contact form directly from a PHP script is by using the built-in PHP mail() function. To use the PHP send mail feature, you need to host your PHP contact on a web server.

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.

How to Receive Email from HTML Form using PHP
How to Receive Email from HTML Form using PHP

Also Read: How to Send HTML Form Data to Email Using PHP

How to Connect Contact form to email in PHP

  • How can I get the contact form from email in PHP?
  • Receive form data to email using PHP mail function?
  • How do you create a form in HTML and send it to email?
  • Link a contact form to an email in HTML?
  • How to Send Contact Form to Email Using PHP?

HTML Contact Form Source Code

Now I am going to provide you the source codes of HTML, CSS, and PHP for 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.

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
  • Home Address
  • User Date of birth.

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 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 = '[email protected]';

//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 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:

Leave a Reply

Your email address will not be published.