Create a PHP Email Script and Form

Forms on websites can be used for a lot of purposes besides being a place to contact the website administrators. In previous posts, I covered how to create a fully functional contact form in PHP and how to build your own Captcha and integrate it in your contact forms. In this tutorial, our focus will be on creating forms in PHP that are meant to serve other purposes like gathering information about a job applicant, booking hotel rooms or getting information about marriage events from clients.

Choosing the Right Fields for your Forms

In the contact form tutorial, we learned that different organizations and websites will most probably want to get specific information from people contacting them in order to assist them in the best possible way. For instance, a contact form on a school website might ask parents information about their kids enrolled in that school. Similarly, the contact form on a shopping website might gather information about the last product people bought in order to serve them better.

If contact forms can vary so much between different websites and organizations, it is reasonable to assume that forms which are supposed to serve completely different purposes have very different fields. For instance, you will most probably ask people booking a hotel room if they will be accompanied by any other adults or children. Asking the same thing of a job applicant would make no sense.

This is an important thing to remember when you follow this tutorial. The basic concept of creating a form, gathering all the information and sending it somewhere ,by email will stay the same but the code will almost certainly need changes to work for your case. You might want to add different input fields to your forms and assign different names to those fields. This will then affect the PHP code in the backend. If you make changes in the forms, make sure you update the PHP code as well.

You can take a look at this list of 20 Best PHP email forms to get some inspiration about the layout of form elements or different input fields that you might want to add to your forms.

  • PHP
    20 Best PHP Email Forms
    Eric Dye

Creating an HTML Form

In this tutorial, we will create a form to book hotel rooms as an example. For simplicity, we will also not use any additional JavaScript or PHP libraries.

With this in mind, lets write the markup of our form. We need to ask people making a reservation their name, email address and phone number. After that, we ask them to provide details about the number of children and adults that will accompany them, the check-in and check-out dates along with the types of room they prefer. In the end we will ask them if there is anything else that we show know before their arrival.

<form action="reservation.php" method="post">
  <div class="elem-group">
    <label for="name">Your Name</label>
    <input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z]{3,20} required>
  </div>
  <div class="elem-group">
    <label for="email">Your E-mail</label>
    <input type="email" id="email" name="visitor_email" placeholder="john.doe@email.com" required>
  </div>
  <div class="elem-group">
    <label for="phone">Your Phone</label>
    <input type="tel" id="phone" name="visitor_phone" placeholder="498-348-3872" pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4}) required>
  </div>
  <hr>
  <div class="elem-group inlined">
    <label for="adult">Adults</label>
    <input type="number" id="adult" name="total_adults" placeholder="2" min="1" required>
  </div>
  <div class="elem-group inlined">
    <label for="child">Children</label>
    <input type="number" id="child" name="total_children" placeholder="2" min="0" required>
  </div>
  <div class="elem-group inlined">
    <label for="checkin-date">Check-in Date</label>
    <input type="date" id="checkin-date" name="checkin" required>
  </div>
  <div class="elem-group inlined">
    <label for="checkout-date">Check-out Date</label>
    <input type="date" id="checkout-date" name="checkout" required>
  </div>
  <div class="elem-group">
    <label for="room-selection">Select Room Preference</label>
    <select id="room-selection" name="room_preference" required>
        <option value="">Choose a Room from the List</option>
        <option value="connecting">Connecting</option>
        <option value="adjoining">Adjoining</option>
        <option value="adjacent">Adjacent</option>
    </select>
  </div>
  <hr>
  <div class="elem-group">
    <label for="message">Anything Else?</label>
    <textarea id="message" name="visitor_message" placeholder="Tell us anything else that might be important." required></textarea>
  </div>
  <button type="submit">Book The Rooms</button>
</form>

We have used two basic patterns to check if the provided name and phone numbers are valid. Phone numbers follow different formats depending on the locale. This means that you will have to update the value of pattern attribute accordingly.

We have also set the minimum value of adults and children to 1 and 0 respectively. This way we can prevent people from mistakenly adding negative values.

You can add more elements to this form for other services that the hotel provides like pickup, room service etc.

Right now, visitors can set both the check in and check out dates to a past value. We can avoid that by simply setting the value of min attribute on both the check in and check out dates. In our case, we will set the minimum possible check in date to be the current day. The value of min attribute of the check out date will be the check in date.

The JavaScript code below will handle all the logic for us. The months are zero-based so we add 1 to the returned value to get the actual month. The returned date value can be any integer from 1 to 31 depending on the current time.

When the date and month values are in single digits, they are padded with an extra 0 so that the final string stays in a valid format.

var currentDateTime = new Date();
var year = currentDateTime.getFullYear();
var month = (currentDateTime.getMonth() + 1);
var date = currentDateTime.getDate();

if(date < 10) {
  date = '0' + date;
}
if(month < 10) {
  month = '0' + month;
}

var dateTomorrow = year + "-" + month + "-" + date;
var checkinElem = document.querySelector("#checkin-date");
var checkoutElem = document.querySelector("#checkout-date");

checkinElem.setAttribute("min", dateTomorrow);

checkinElem.onchange = function () {
    checkoutElem.setAttribute("min", this.value);
}

The following CodePen demo shows the us how the form behaves after adding the above markup and JavaScript functionality.

Sending the Form Data by Email with PHP

The final step involves collecting all the data from our form and sending it to concerned people in an email. This is actually very easy to do. First we gather all the information using $_POST variables. Once we have the required information we sanitize it to remove anything malicious. Finally, we create the body of our HTML email and then send it using the mail() function in PHP.

The following code will go into a file called reservation.php. The file name will be different if you changed the value of action attribute of the from in previous section.

<?php

if($_POST) {
    $visitor_name = "";
    $visitor_email = "";
    $visitor_phone = "";
    $total_adults = "";
    $total_children = "";
    $checkin_date = "";
    $checkout_date = "";
    $room_type = "";
    $visitor_message = "";
    
    if(isset($_POST['visitor_name'])) {
        $visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING);
    }
    
    if(isset($_POST['visitor_email'])) {
        $visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']);
        $visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL);
        
    }
    
    if(isset($_POST['visitor_phone'])) {
        $visitor_phone = filter_var($_POST['visitor_phone'], FILTER_SANITIZE_NUMBER_INT);
    }
    
    if(isset($_POST['total_adults'])) {
        $total_adults = filter_var($_POST['total_adults'], FILTER_SANITIZE_NUMBER_INT);
    }

    if(isset($_POST['total_children'])) {
        $total_children = filter_var($_POST['total_children'], FILTER_SANITIZE_NUMBER_INT);
    }

    if(isset($_POST['checkin'])) {
        $checkin_date = filter_var($_POST['checkin'], FILTER_SANITIZE_NUMBER_INT);
    }

    if(isset($_POST['checkout'])) {
        $checkout_date = filter_var($_POST['checkout'], FILTER_SANITIZE_NUMBER_INT);
    }

    if(isset($_POST['room_preference'])) {
        $room_type = filter_var($_POST['room_preference'], FILTER_SANITIZE_STRING);
    }
    
    if(isset($_POST['visitor_message'])) {
        $visitor_message = htmlspecialchars($_POST['visitor_message']);
    }


    $recipient = "booking@demo.com";
    
    $headers  = 'MIME-Version: 1.0' . "\r\n"
    .'Content-type: text/html; charset=utf-8' . "\r\n"
    .'From: ' . $visitor_email . "\r\n";

    $email_content = "<html><body>";
    $email_content .= "<table style='font-family: Arial;'><tbody><tr><td style='background: #eee; padding: 10px;'>Visitor Name</td><td style='background: #fda; padding: 10px;'>$visitor_name</td></tr>";
    $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Visitor Email</td><td style='background: #fda; padding: 10px;'>$visitor_email</td></tr>";
    $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Visitor Phone</td><td style='background: #fda; padding: 10px;'>$visitor_phone</td></tr>";
    $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Total Adults</td><td style='background: #fda; padding: 10px;'>$total_adults</td></tr>";
    $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Total Children</td><td style='background: #fda; padding: 10px;'>$total_children</td></tr>";
    $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Check-in Date</td><td style='background: #fda; padding: 10px;'>$checkin_date</td></tr>";
    $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Check-out Date</td><td style='background: #fda; padding: 10px;'>$checkout_date</td></tr>";
    $email_content .= "<tr><td style='background: #eee; padding: 10px;'>Room Type</td><td style='background: #fda; padding: 10px;'>$room_type</td></tr></tbody></table>";

    $email_content .= "<p style='font-family: Arial; font-size: 1.25rem;'><strong>Special Request from $visitor_name &mdash;</strong><i> $visitor_message</i>.</p>";
    $email_content .= '</body></html>';

    echo $email_content;
    
    if(mail($recipient, "Hotel Room Reservation Confirmation", $email_content, $headers)) {
        echo '<p>Thank you for booking a hotel room with us. We hope you have a pleasant stay.</p>';
    } else {
        echo '<p>We are sorry but the booking confirmation email did not go through.</p>';
    }
    
} else {
    echo '<p>Something went wrong</p>';
}

?>

We begin by sanitizing the name and email address of the visitor. After that we sanitize the check-in date, check-out date, number of adults and number of children using the FILTER_SANITIZE_NUMBER_INT flag. This flag removes all characters from the input except digits and + or - signs. It works out great for sanitizing our dates because we expect them in the format YYYY-MM-DD—just digits and the minus sign. You should go through the PHP documentation to learn about all the sanitization and validation flags.

Once we have sanitized all the input, we start preparing our headers. By including Content-type: text/html in the email headers, we will be able to use HTML tags inside our email. For this tutorial, we are keeping it simple and showing all the user data inside a table. Any special message left by people booking a hotel rooms is shown below the table.

Final Thoughts

In this tutorial, we have covered the basics of creating a PHP email script that sends data from forms filled out by people. When creating forms, it is important to lay the elements out properly and make sure that you only ask for information that is actually required. Creating an unnecessarily long form with improperly laid out elements will discourage users from filling out the form. You should also make sure that every element is named properly. Proper sanitization of user input is important as well.

If you have never created your own forms and are unfamiliar with PHP, it might be better to consider using scripts created by professionals. We have created this list of 20 Best PHP Email forms to help you get started. These form come with extra features like Captcha, scheduling emails and file uploads.

  • PHP
    20 Best PHP Email Forms
    Eric Dye

If you have any questions related to this tutorial, please let me know in the comments.






from Envato Tuts+ Tutorials

Comments

Post a Comment

Popular posts from this blog

How to Build Self-Confidence: 10+ Steps to Improve Your Self-Esteem

Image
Do you have friends who can walk up to someone at a party and they’d instantly hit it off? These are the people who often get free drinks, invites to cool events, and make new friends whenever they go out. You can gain confidence in yourself and improve different aspects of your life. (Image source:  Envato Elements ) Meanwhile, there are people who feel anxious in almost every social encounter. Their first day on a job, a big company meeting, and even a housewarming party all make them feel vulnerable and unsure of themselves. Questions like the following often spring to mind during these events:  “ What will I say? ”  “Who do I talk to?” “ What will I do if there’s an awkward silence? ”  While social awkwardness is common, it’s not a lifetime thing. You can learn how to build self-confidence that doesn’t feel forced or unnatural. You can still be yourself and have the self-confidence to try new things, meet new people, and all the benefits that come with...
Read more

Best of 2020: Great Landing Pages for Design Inspiration (Showcase Examples)

Image
A great landing page design is crucial when it comes to announcing new products or services as well as the launch of your company. Great landing pages help visitors focus on a singular action. That makes them great for driving conversions and signups. Zimed is one of our best landing page design examples on Envato Elements. Nowadays, you don’t have to be a web design expert to create a landing page. There's no shortage of  quality landing page samples on various marketplaces so all you need to do is find the one you like, buy it, and set it up. That's why we've set up this landing page showcase. In today's post, we'll share our best landing page examples from Envato Elements and ThemeForest. Find Great Landing Page Design Examples on Envato Elements for 2020 Envato Elements is a great starting point when it comes to the best  landing page design . Envato Elements is a subscription-based marketplace with dozens of landing page templates. When you start bro...
Read more

18+ Best Free PowerPoint Puzzle Pieces Templates (Infographic PPT Slides)

Image
Many people are visual learners. The population of visual learners is why it helps to use visual infographics to explain an idea in your PowerPoint presentation.  One of the best examples is using a PowerPoint puzzle pieces template.  Each piece of the puzzle can fit together into a singular idea. Templates like the premium  PANDAWA  template have all the PowerPoint puzzle pieces you need to explain a complex idea. Using a PowerPoint puzzle pieces will help you explain concepts more clearly. You can quickly and easily change professionally designed PowerPoint puzzles to fit your needs. This round-up will show you some of the best free PowerPoint puzzle templates. You'll also see top PowerPoint puzzle pieces templates from Envato Elements, and more puzzle pieces templates from GraphicRiver. Download the Best PowerPoint Puzzle Templates From Envato Elements Later in this tutorial, you'll see free template options. But for now, let's focus on the bes...
Read more