How to Receive Email from HTML Form using PHP

#webdev #php #programming #career

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.

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.

How to Receive Email from HTML Form using PHP

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 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.

<!-- 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 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.

DEV Community

How to Receive Email from HTML Form using PHP