Creating Contact Form on HTMLy

By using HTMLy latest version we can creating custom layout or content template per page basis for the static page and sub-static page. With this new feature now we can add webform to the page easily.

This example using the ported version of Twenty Fifteen and we can only use GET method instead of POST.

First creating new static page with slug contact so it can be accessed with www.example.com/contact.

Open the static.html.php and copy all of the content:

<article class="page type-page hentry">
    <header class="entry-header">
        <?php if (login()) { echo tab($p); } ?>
        <h1 class="entry-title"><?php echo $p->title ?></h1>
    </header>
    <div class="entry-content">
        <?php echo $p->body; ?>
    </div>
</article>

Create new template file static--about.html.php and paste the copied content previously. Than add the following code on top of it:

<?php 
    if (isset($_GET['submit'])) {
        $submit = $_GET['submit'];
        $to = config('contact.email');
        $from = $_GET['email'];
        $from = filter_var($from, FILTER_SANITIZE_EMAIL);
        $name = strip_tags($_GET['name']);
        $message = strip_tags($_GET['message']);
        $messageCopy = $message;
        $header = "From:" . $from;
        $headerCopy = "From:" . $to;
        $subject = "Form submission";
        $subjectCopy = "Copy of your form submission";
        $messageSend = $name . " wrote the following:" . "\n\n" . $message;
        $messageCopy = $name . ", Here is a copy of your message:" . "\n\n" . $message;
        $captcha = isCaptcha($_GET['g-recaptcha-response']);
    }
    $req = strtok($_SERVER["REQUEST_URI"],'?');
    $b = str_replace('/', '#', rtrim($req, '/'));
    foreach (glob('cache/page/' . $b . '~*.cache', GLOB_NOSORT) as $file) {
        unlink($file);
    }
    $file = 'cache/page/' . $b .'.cache';
    if (file_exists($file)) {
        unlink($file);
    }
?>

Now we need to add this code after the <?php echo $p->body; ?>:

<?php
if (!empty($submit)) {
    if ($captcha && !empty($from) && !empty($name) && !empty($message) && !filter_var($from, FILTER_VALIDATE_EMAIL) === false) {
        mail($to,$subject,$messageSend,$header);
        mail($from,$subjectCopy,$messageCopy,$headerCopy);
        echo '<div class="alert alert-success"><p>Mail Sent. Thank you ' . $name . ', we will contact you shortly.</p></div>';
    } else {
        echo '<div class="alert alert-warning">';
        echo '<ul>';
        if (empty($from)) {
            echo '<li>Your email is required.</li>';
        }
        if (filter_var($from, FILTER_VALIDATE_EMAIL) === false) {
            echo '<li>Not a valid email address.</li>';
        }
        if (empty($name)) {
            echo '<li>Your name is required.</li>';
        }
        if (empty($message)) {
            echo '<li>Your message is required.</li>';
        }
        if (!$captcha) {
            echo '<li>reCaptcha not correct.</li>';
        }
        echo '</ul>';
        echo '</div>';
    }
} ?>
<form action="" method="GET">
    Your Name: (Required)<br>
    <input type="text" name="name"><br><br>
    Email: (Required)<br>
    <input type="text" name="email"><br><br>
    Message: (Required)<br>
    <textarea rows="5" name="message" cols="30"></textarea><br><br>
    <?php if (config('google.reCaptcha') === 'true'): ?>
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <div class="g-recaptcha" data-sitekey="<?php echo config("google.reCaptcha.public"); ?>"></div>
        <br/>
    <?php endif; ?>
    <input type="submit" name="submit" value="Send message">
</form>

This is the full code for static--about.html.php:

<?php 
    if (isset($_GET['submit'])) {
        $submit = $_GET['submit'];
        $to = config('contact.email');
        $from = $_GET['email'];
        $from = filter_var($from, FILTER_SANITIZE_EMAIL);
        $name = strip_tags($_GET['name']);
        $message = strip_tags($_GET['message']);
        $messageCopy = $message;
        $header = "From:" . $from;
        $headerCopy = "From:" . $to;
        $subject = "Form submission";
        $subjectCopy = "Copy of your form submission";
        $messageSend = $name . " wrote the following:" . "\n\n" . $message;
        $messageCopy = $name . ", Here is a copy of your message:" . "\n\n" . $message;
        $captcha = isCaptcha($_GET['g-recaptcha-response']);
    }
    $req = strtok($_SERVER["REQUEST_URI"],'?');
    $b = str_replace('/', '#', rtrim($req, '/'));
    foreach (glob('cache/page/' . $b . '~*.cache', GLOB_NOSORT) as $file) {
        unlink($file);
    }
    $file = 'cache/page/' . $b .'.cache';
    if (file_exists($file)) {
        unlink($file);
    }
?>
<article class="page type-page hentry">
    <header class="entry-header">
        <?php if (login()) { echo tab($p); } ?>
        <h1 class="entry-title"><?php echo $p->title ?></h1>
    </header>
    <div class="entry-content">
        <?php echo $p->body; ?>
        <?php
        if (!empty($submit)) {
            if ($captcha && !empty($from) && !empty($name) && !empty($message) && !filter_var($from, FILTER_VALIDATE_EMAIL) === false) {
                mail($to,$subject,$messageSend,$header);
                mail($from,$subjectCopy,$messageCopy,$headerCopy);
                echo '<div class="alert alert-success"><p>Mail Sent. Thank you ' . $name . ', we will contact you shortly.</p></div>';
            } else {
                echo '<div class="alert alert-warning">';
                echo '<ul>';
                if (empty($from)) {
                    echo '<li>Your email is required.</li>';
                }
                if (filter_var($from, FILTER_VALIDATE_EMAIL) === false) {
                    echo '<li>Not a valid email address.</li>';
                }
                if (empty($name)) {
                    echo '<li>Your name is required.</li>';
                }
                if (empty($message)) {
                    echo '<li>Your message is required.</li>';
                }
                if (!$captcha) {
                    echo '<li>reCaptcha not correct.</li>';
                }
                echo '</ul>';
                echo '</div>';
            }
        } ?>
        <form action="" method="GET">
            Your Name: (Required)<br>
            <input type="text" name="name"><br><br>
            Email: (Required)<br>
            <input type="text" name="email"><br><br>
            Message: (Required)<br>
            <textarea rows="5" name="message" cols="30"></textarea><br><br>
            <?php if (config('google.reCaptcha') === 'true'): ?>
                <script src='https://www.google.com/recaptcha/api.js'></script>
                <div class="g-recaptcha" data-sitekey="<?php echo config('google.reCaptcha.public'); ?>"></div>
                <br/>
            <?php endif; ?>
            <input type="submit" name="submit" value="Send message">
        </form>
    </div>
</article>

Save your new template file and we just need to add new config:

contact.email = your@email.com

Note:

  • If your server using Suhosin make sure to change the suhosin.get.max_value_length value to at least 1024.
  • This contact form using php mail() function so make sure the email server already configured properly.
  • For security reason I recommend to using reCaptcha to securing the contact form. You just need to add the private and public key to your config.ini.

Author: danpros

A self-proclaimed geek, business owner, and part-time blogger.

Comments on “Creating Contact Form on HTMLy”