Contact Me plugin for Wolf CMS

Contact Me plugin screenshot Contact Me is a web designer friendly contact form plugin for Wolf CMS. It provides a basic html form structure which you can build upon simply by setting a huge number of options in the back-end to get just the right HTML markup for any kind of visual style or JavaScript enhancement you might need.

Changelog

When updating to a new version, replace all files and re-enable the plugin.

v0.2.2

2011-06-12: Updated documentation
2011-06-12: Added basic CSS styles
2011-06-12: Fixed badly formed translatable strings

v0.2.1

2011-06-10: Keep previous settings on re-enabling the plugin

Features

Semantic structure
Valid XHTML Strict or HTML5*
reCAPTCHA integration
Input validation
Custom labels, id and class attributes and error messages
Optional HTML5 form attributes*
Translatable

* HTML5 introduced some new features like the placeholder attribute or new input types. You can set them in this plugin's settings if you would like to use them.

Known issues

A Wolf CMS core bug is currently (Wolf 0.7.5) preventing settings from being saved in SQLite, rendering the plugin useless on such configurations.
Right now you can not use the form without reCAPTCHA. You will therefore have to generate a pair of API keys and enter them in plugin's settings.
If you use the same field position setting on multiple fields, only one will show up.

HTML output

This form uses an ordered list for additional semantic meaning and much needed flexibility in styling. I believe it to be the best way of marking up a form and therefore cannot be changed. Below is the HTML output with the plugin's default settings. Please note that most of the values and attributes are optional and/or customizable.

<form method="post" action="form-url" id="contact">
  <fieldset>
    <legend>Contact Form</legend>
    <ol>
      <li>
        <label for="subject">Subject</label>
        <input type="text" name="subject" id="subject" class="text required" />
      </li>
      <li>
        <label for="message">Message</label>
        <textarea name="msg" cols="40" rows="10" id="message" class="text required"></textarea>
      </li>
      <li>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="text required" />
      </li>
      <li>
        <label for="email">E-mail</label>
        <input type="text" name="email" id="email" class="text required" />
      </li>
      <li class="captcha">
        <!-- reCAPTCHA code -->
      </li>
      <li>
        <input type="submit" name="submit" value="Submit" />
      </li>
    </ol>
  </fieldset>
</form>

Field order can be rearranged.
All classes, placeholders, the form's id and legend are completely optional.
All labels are customizable.

How to use?

Download the plugin and extract the contact_me folder into wolf/plugins.
Log into your Wolf's admin panel and open the Administration tab.
Enable the plugin by selecting its check box on the list.
A new tab "Contact form" will appear where you can set all settings.

To display the contact form include the following snippet where you want it to appear:

<?php contact_me('youremail@domain.com'); ?>

The contact_me function accepts two additional parameters – an extra e-mail address to forward a copy to and a "Message successfully sent" notice:

<?php contact_me('main@email.com', 'extra@email.com', 'Message successfully sent'); ?>

You may skip the extra e-mail address and still define the "Message successfully sent" notice:

<?php contact_me('main@email.com', '', 'Message successfully sent'); ?>

It looks terrible. Where's the CSS?

You're supposed to come up with your own. There is an excellent tutorial on SitePoint to get you started though.

Or you might just be happy with the styles below.

#contact ol {
  list-style: none;
  margin: 0;
}

#contact li {
  margin: 0 0 1em 0;
}

#contact legend, #contact label {
  font-weight: bold;
}

#contact label {
  display: block;
  cursor: pointer;
}

.success {
  color: #0a0;
}

.error {
  color: #a00;
}

I hope you enjoy using this plugin. If you have a feature request or if you find a bug, please submit a new issue on Github.

Kanaria