Yeah, I noticed this bug is gone now.
I did not manage to get Grav 0.9.26 to render the form using SimpleContact 1.0.5, even with the standard config and a markdown file as you describe (which is also what the readme suggest). I found it easier to just throw one together specific for the Notepad theme, as it is based on the Foundation framework which made styling and validation easy.
Nice, can we see it in action?
I had hoped to to push the site to production this evening, but I’m still working on fully understanding Grav’s capabilities of minifying and caching so it is optimized before it goes live. Hopefully just a day or two away.
If your looking for ultimate performance gains, check out this blog post regarding CDNs: http://getgrav.org/blog/turbo-charge-grav-with-a-cdn
All right, here’s somewhat of a solution for a contact form for the Notepad theme/skeleton. It uses the same Foundation framework files as the theme for layout, styling, and validation, and PHPMailer for sending mails. It has been tested on the Grav Vagrant with MailCatcher, and also live on my personal site without issues. The following is not a tutorial on customization, but rather a quick guide on installation.
Step 1
Create a page in Grav for contact, I went with contact/contact.md with the following content:
title: Contact
Simple, right? You can write whatever markdown you want in it, but we want the file named contact.md to tell Grav to use the upcoming contact template.
Step 2
Create a file named contact.html.twig in user/themes/notepad/templates with the following content:
— html
{% embed ‘partials/base.html.twig’ %}
{% block body %}
{% block content %}
{% include ‘partials/navigation.html.twig’ %}
{{ page.title }}
{{ content }}
<input type=“hidden” name=“address” value="{{config.site.author.email|replace({’@’: “-ATTENTION-”, “.” : “-EXCLAMATION-”})}}">
Your Name
Please supply your name.
Your Mail Address
How will I reply without it?
Your Message
You did want to say something, didn’t you?
Which is colder?
Steam
Ice
The answer is Ice…
Submit
{% include ‘partials/footer.html.twig’ %}
{% endblock %}
{% block footer %},{% endblock %}
{% endembed %}
This is a basic scaffold for the contact-form, with the internal form-validation from Foundation. It also passes the site-url, site owner name, and site owner email (obfuscated) along with the submitted data to an ajax file. All fields are required, and display errors on incorrect submissions. Note that the anti-spammer question, though basic, works in conjunction with server-side validation.
*Step 3:*
Now comes a bit of customization for those needing to use SMTP or POP3 to send mails from the server. Mostly this is not needed, as PHP's internal _sendmail_ works well enough on most hosts, but adding either of the aforementioned is a breeze. Go to [PHPMailer](https://github.com/PHPMailer/PHPMailer/) and download the `class.phpmailer.php`, `class.smtp.php`, and `class.pop3.php` files. You really only need the first for _sendmail_, so you can skip the other two.
Ideally, we would wrap this in a plugin (or somewhere Grav can execute them without problem, which is not the theme or user directory as I understand it), but for the purpose of simplicity we will add them to the `assets` folder in Grav-root. We also want to create a `data.php` file with the following content:
--- php
if ($_SERVER['REQUEST_METHOD'] != 'POST') {exit("Unauthorized access.");}
$site = trim($_POST["site"]);
$addressee = trim($_POST["addressee"]);
$address = trim($_POST["address"]);
$name = trim($_POST["name"]);
$email = trim($_POST["email"]);
$message = trim($_POST["message"]);
$human = trim($_POST["human"]);
if ($human != 'Ice') {exit("Incorrect token.");}
$address = str_replace('-ATTENTION-', '@', $address);
$address = str_replace('-EXCLAMATION-', '.', $address);
$name = filter_var($name, FILTER_SANITIZE_STRING);
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
$message = htmlspecialchars($message);
require 'class.phpmailer.php';
$mail = new PHPMailer;
$mail->isSendmail();
$mail->setFrom($email, $name);
$mail->addReplyTo($email, $name);
$mail->addAddress($address, $addressee);
$mail->Subject = 'Mail from Grav: ' . $site;
$mail->Body = $message;
if(!$mail->send()) {
echo 'PHPMailer Error: ' . $mail->ErrorInfo;
} else {
echo 'Message has been sent.';
}
This is quite simple, and easily exchangeable for SMTP or POP3 with the example-scripts from PHPMailer. Note the POST-validation, token-validation, and deobfuscation: They are simple, but effective in preventing spam or unauthorized use of the script. Beyond that, we just gather the data from the contact-form and send it.
Step 4:
Create a contact.js file in user/themes/notepad/js with the following content:
— js
$(function() {
$(document).foundation();
$("#contactForm").submit(function(e) {
e.preventDefault();
var actionurl = e.currentTarget.action;
if ($(‘input[name=human]’, ‘#contactForm’).is(’:checked’)) {
var humanity = $(‘input[name=human]:checked’, ‘#contactForm’).val();
if (humanity == ‘Steam’) {
$("#contactForm .humanity-field").addClass(“error”);
e.preventDefault();
} else if (humanity == ‘Ice’) {
$("#contactForm .humanity-field").removeClass(“error”);
$.ajax({
type: “POST”,
url: $(this).attr(“action”),
data: $(this).serialize(),
success: function(result) {
$("#contactForm").prepend(’
’ + result + ‘
’);setTimeout(function() {$(".alert-box").hide(500)}, 5000);
},
error: function(result) {
$("#contactForm").prepend(’
’ + result + ‘
’);setTimeout(function() {$(".alert-box").hide(500)}, 5000);
}
});
$(".close").click(function() {
$(this).parent().hide();
return false;
});
}
}
});
});
This is also fairly simple. We instantiate the Foundation framework for validation, and if all forms appear to be in order the data is submitted by Ajax to `data.php`. This, of course, requires Javascript on the side of the user: With JS disabled the form does nothing, which is both a security-feature and a constraint on browsers where this is disabled. In 2015, however, this is virtually nobody, and if desired a `<noscript>` tag could easily be added to the twig-template.
The result of the form, as retrieved from `data.php` is displayed above it, and it disappears after 5 seconds.
*Conclusion:*
The form, apart from being JS-reliant, is ARIA-compliant (unless I forgot an HTML-attribute somewhere), and very easy to use. It could probably easily be wrapped into a plugin - if someone cared to make the effort - but the use of Foundation is fairly specific to the Notepad-theme. I assembled it over the weekend, and customizing it should be no hassle for those with a basic familiarity of HTML (twig-templating is well explained in the Grav docs, and this one is not very advanced), CSS (just override or supplement as needed), JS (also quite simplistic), and PHP (just replace using examples from PHPMailer repository).
Hope this is of help to anyone else using the Notepad-theme.