HTML5 UP is a website which provides free, fully responsive HTML5 site templates for people to use. Please also check out Pixelarity to support the people behind HTML5 UP. HTML5 UP is a great resource to get excellent web pages without the need to reinvent the wheel desgining the webpages. The source code for the website is completely customizable, and you can use it for pretty much any non-commercial use. While I will let you guys explore the HTML and CSS code in HTML5 UP, I will teach you guys today how to edit the HTML5 UP code to add the email functionality to the contact forms in HTML5 UP templates without the need to use 3rd party services. I will be using the Read Only template as an example for today's exercise.

Requirements:

  • A web server
  • PHP, and all the extensions required for it to integrate with the web server of your choice

Guide

  1. Download the zip file with the source code in it from the HTML5 UP website, and unzip it into the appropriate folder. If it is Apache, place files in /var/ww/html .
  2. Rename the index.html file to index.php. Make sure your Web server knows to look for the index.php file. In Apache, you can perform that by changing the DirectoryIndex directive in the site configuration file. By default, if the PHP module is enabled (check using a2query -m), then the index.php field will be used in absence of index.html.
  3. Next, open the index.php file. Scroll down to the contact form. In the template I am using, it looks like this:
    contact-form-html5up-read-only
    Look at the line that starts with <form method="post" above. Notice that I changed the action=index.php. Basically, what this means is that when the form is submitted, the page is reloaded again, and the script in the webpage is executed by the server.
  4. Next, we will add the first PHP block in the script. I am adding mine just above the Contact form:
<?php
     $name = $_POST['name'];
     $email = $_POST['email'];
     $subject = $_POST['subject'];
     $message = $_POST['message'];                                                   ?>

The script above copies all the values it receives from the form using the POST method to the PHP variables as seen above. This is basically to extract the data from the form.
5. Next, we add a few more variables for our use:

<?php
     $name = $_POST['name'];
     $email = $_POST['email'];
     $subject = $_POST['subject'];
     $message = $_POST['message'];                                                   
     $from = 'From: <the-email-that-you-want-it-to-come-from>';
     $to = '<recipient-email>';
     $email_subject = 'New Contact Form Submission!';
     
     $body = "Name: $name\nE-mail: $email\nSubject: $subject\n\nThe message is below:\n$message";;
?>

I added a few static variables which include sender name of where the email is coming from, where the email is intended to go, the email subject, and the body of the email. You can arrange the Email contents whichever way you want. Just move around the variables to move around the data in the varibales. Please make sure to use double-quotes in the body variable, as single quotes will not substitute the varibales with their values.
6. In the script, go to the line starting with <input type='submit', and add name="submitbtn" to that line, within the <input> tag
7. Next, let's add another PHP script. This script will make use of the mail functionality to send the Email to your desired email address.

<?php
    if (isset($_POST['submitbtn']))
    {
        if (mail($to, $email_subject, $body, $from))
        {
            echo "<font color=\"green\"><p>Your message has been sent!</p></font>";
        }
        else
        {
        echo "<font color=\"red\"><p>Your message sending has failed! Please manually email (your email)!</p></font>";
        }
    }
?>

This script above only executes if the submit button has been pressed! If the email is sent successfully, and a confirmation message is displayed. This script should be placed right above the contents of the Contact form (not above the section, unlike the other script).
8. Make sure Postfix is installed on your system. Additionally, make sure that the appropriate php.ini file has the correct Mail configuration to point to port 25 on localhost.

That's it! You are done! Make sure Postfix, PHP, and Apache2 are installed, configured, and running, and the code above should send you an email every time someone submits a form!