Email Template

Published by David in plugins, wolf. on 24.06.2010

Email Template provides a simple and flexible backend for emailing forms from Wolf CMS.

Introduction

Download the ZIP file, and enable the Email Template plugin by unzipping the archive, and uploading the "email_template" folder and all its contents to your wolf/plugin/ directory. Go to the Administration > Plugins panel, and check the "Enabled" box. Save the status from the Administration > Settings panel. Your Plugins page should now include this line:

enabled plugin

The link with the plugin name will take you to the following documentation from within the Wolf administration.

The Email Template plugin extends the Wolf CMS "behavior" system. It requires setting up the form page, and adding to it three child pages: one for your email template itself, and two for responses messages (success, and fail).

These instructions assume you are setting up a contact form. You can of course make adjustments if you are using Email Template for other purposes.

1. The Mail form

Create a new page as a child of the root (Homepage), and call it "Contact". Set the filter to "-none-", and copy the following text into the body of the page:

<div id="emailform">
<p><form method="post" action="/contact/template<?php echo URL_SUFFIX; ?>">
<p><label for="name">Name:</label> <input name="name" type="text" /></p>

<p><label for="email">Email:</label> <input name="email" type="text" /></p>
<p><label for="subject">Subject:</label> <input name="subject" type="text" /></p>
<p><label for="message">Message:</label><textarea name="message"></textarea></p>
<br />

<p class="trip"><input name="trip" type="text" /></p>
<input name="success" value="/contact/success<?php echo URL_SUFFIX; ?>" type="hidden" />
<input name="failure" value="/contact/fail<?php echo URL_SUFFIX; ?>" type="hidden" />
<p class="submit"><input type="submit" value="Send" /></p>
</form>
</div>

Save the page. Your page should look something like this:

contact page

2. The Email template

Create a new page as a child of your new Contact page, and call it "Template". Use the following settings for the page:

Copy the following text into the body of the page:

To: Me <myname@mymail.com>
From: <?php print $_POST['name']; ?> <<?php print $_POST['email']; ?>>
Subject: <?php print $_POST['subject']; ?> [Wolf Contact]

1. CONTACT INFO

Name: <?php print $_POST['name']; ?>

Email: <?php print $_POST['email'] . "\r"; ?>

2. MESSAGE

<?php print $_POST['message']; ?>

--
Sent by <?php print $_SERVER['REMOTE_ADDR']; ?>

Make sure you put the email address you want the form sent to in the first line. You can also edit the "[Wolf Contact]" identifier in the subject line.

Set the page Status to "Hidden", and save the page. Your template page should look like this (showing the Settings tab):

template page

3. Response messages

Create two more "child" pages to Contact: call one "Success", and the other "Fail". (You can of course change these names, but then you will also need to adjust the page name values given in the form in step #1). Put whatever appropriate messages you want your users to see under those two conditions.

Make sure you set the status of both response pages to "Hidden".

Your completed Email Template set-up should look like this:

email template pages

4. Add CSS rules

You will probably want to have style rules for your form. One option is given below, but one particular CSS instruction is required. You will notice the form created in step #1 has this line:

<p class="trip"><input name="trip" type="text" /></p>

This is a "honeypot" field; since it is hidden, only a "robot" would fill in a value. Any such message is simply killed, giving some simple but effective spam prevention.

Include the following lines in your site's CSS file to hide it, and style your form:

/* -------------------- 
 * Email form styling
 ------------------- */   

#emailform .trip {
  display:  none;
  visibility: hidden;
}
#emailform label {
  width:  95px;
  display:  inline-block;
  vertical-align: top;
  clear: both;
}
#emailform input.text, #emailform textarea {
  width:  400px;
  padding: 2px;
}
#emailform textarea {
  height:  115px;
}
#emailform input.submit {
  display: block;
  margin-left: 250px;
  width:  auto;
}

The first instruction is the one needed to hide the "honeypot" field.

Your Email Template system is now ready for use.

Further Information