Implementing a Contact Form for Koken

Eine deutschsprachige Version dieses Artikels finden Sie auf BRIsoft.de/de.

Koken contains (so far) no standard function for a contact form. However, it is not very difficult to implement an own form. For this purpose you will need at least a special lens template and a small PHP script that will be used to to deliver the mail. To give the user more feedback about the successful delivery of the message, I have added some use JavaScript using Ajax to communicate with the PHP backend.

The following tutorial explains in detail the necessary steps for the implementation of the contact form. It is based on a tutorial from dzyngiri.com.

lens Template

First of all, you need a lens template. This template must be copied into the directory of the theme currently in use. To keep it as simple as possible in this example, I have used the default theme Blueprint. This means the template must be copied into the directory /storage/theme/blueprint on your web server.

The lens tag in line 2 loads a JavaScript file (see below). I have copied the script into a seperate subdirectory  (./js) . The rest of the template contains the HTML form. In order to reduce the checks in the PHP script or JavaScript file I have used the new form options introduced by HTML 5. You can add _style_ resp. class attributes to the form elements to adapt the styling to your theme.

<koken:include file="inc/header.html" />
<koken:asset file="js/contact_form.js" />
<div id="content">
  <article>
    <header><h1>Contact Form</h1></header>
    <form id="ajax-contact-form" role="form" class="form-horizontal">
      <fieldset>
        <div id="fields">
          <div>
            <label for="name">Name:</label>
            <input id="name" type="text" name="name" required value="" placeholder="Name" />
          </div>
          <div>
            <label for="email">Email address:</label>
            <input id="email" type="email" name="email" required value="" placeholder="adresse@mail.com" />
          </div>
          <div>
            <label for="betreff">Subject:</label>
            <input id="subject" type="text" name="subject" required value="" placeholder="Text" />
          </div>
          <div>
            <label for="message">Your message:</label>
            <textarea id="message" name="message" required rows="10" cols="30" placeholder="Message" ></textarea>
          </div>
          <input type="submit" value="Send" />
        </div>
        <div id="note"></div>
      </fieldset>
    </form>
  </article>
</div>
<koken:include file="inc/footer.html" />

The themplate can be modified and enhanced very easily. If you change the template please observe the following notes:

  • if you change the IDs in lines 6, 8 or 27 you will also have to modify the respective IDs in the JavaScript file
  • each input element has a name attribute, that is also used in the PHP script; if you change a name or add new elements you will also have to modify the PHP script accordingly.

JavaScript File

The JavaScript file js/contact.js is used for the Ajax-based communication with the PHP script executed on the web server. The PHP script is called to send the mail and will return a response whether the mail was delivered successfully or not. For this purpose the JavaScript function changes the content of the display form. So you won’t need an additional template for responses.

$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
  type: "POST",
  url: "/contactform/contact.php",
  data: str,
  success: function(msg){
    $("#note").ajaxComplete(function(event, request, settings){
    if(msg == 'OK') {
      result = '<div class="notification_ok">Your mail was sent. Thank you!</div>';
      $("#fields").hide();
    }
    else {
      result = msg;
    }
    $(this).hide();
    $(this).html(result).slideDown("slow");
    $(this).html(result);
  }); }
});
return false;
});
});</pre>

A few more notes to the implementation of the  JavaScript function:

  • In lines 2, 9 and 12 HTML elements of the form are accessed. If you change these names in the form you will also have to change them here.
  • Line 6 contains the URL of the PHP script that will send the mail.
  • Line 10 checks the return value from the PHP scripts. If the text was modified there the value needs to be changed accordingly.
  • Line 11 issues the success message. The text can be changed.

PHP Script

The PHP script is necessary to send the mail. I have copied the script into a separate subdirectory in the Koken installation directory (/contactform/contact.php). You can copy it to a different location but then you will have to change the URL in line 6 of the JavaScript file accordingly.

In order to send the mails to the correct mail address you will have to enter the correct address in line 2 of the PHP script. If you have added additional elements to the form or if you have changed the names of the input fields you will have to rename the keys that are used to access the $_POST array in lines 6-9. The mail is composed in lines 10-14 and you can change it if you want. You can also modify the error message set in line 18. The return value set in line 15 should not be modified because it is checked in the JavaScript function.

<?php
define("WEBMASTER_EMAIL", 'you@yourdomain.com');
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if ($post) {
  $name = stripslashes($_POST['name']);
  $email = trim($_POST['email']);
  $message = stripslashes($_POST['message']);
  $subject = stripslashes($_POST['subject']);
  $mail = mail(WEBMASTER_EMAIL, '[Koken] '.$subject, $message,
               "From: ".$name." <".$email.">\r\n"
              ."Reply-To: ".$email."\r\n"
              ."Content-Type: text/html; charset=UTF-8\r\n");
  if ($mail) {
    echo 'OK';
  }
  else {
    echo '<div class="notification_error">Unable to deliver mail.</div>';
  }
}
?>

Now all functions are implemented and as a last step you can add the template to a menu item.

Add a Menu Item in Koken

In order to open the contact form I have added a new menu item. To do this you have to login to the Koken console and go to the site administration by selecting  the menu item  Site. Now select the menu where you want to add the new item the select the function Add links. In the list of possible links scroll down to _TEMPLATES_ where you will find the new Template “Contact” (if you have copied the template file to the correct location). After you have selected the template you can change the link’s name.

You can find an example of this contact form on my (german) web site mherbst.de.

comments powered by Disqus