Implementierung eines Kontaktformulars für Koken

An english version of this article is available on BRIsoft.de/en.

Koken enthält (bisher) standardmäßig keine Funktion für ein Kontaktformular. Es ist allerdings auch nicht sehr schwierig ein eigenes Formular zu implementieren. Dazu benötigt man in jedem Fall ein spezielles lens-Template und ein kleines PHP-Script, das den eigentlichen Mail-Versand übernimmt.  Um dem Benutzer noch ein Rückmeldung bei erfolgreichem Versand der Nachricht zu geben, verwende ich noch JavaScript mit Ajax.

Das folgende Tutorial erklärt im Detail, was man für die Implementierung eines Kontaktformulars tun muss.

Die Implementierung basiert auf einem Tutorial auf dzyngiri.com.

lens-Template

Zunächst einmal benötigt man ein lens-Template. Dieses Template muss in das Verzeichnis des aktuell verwendeten Themes kopiert werden. Um es in diesem Beispiel möglichst einfach zu halten, habe ich für dieses Beispiel das Standard-Theme Blueprint verwendet.

Die Datei gehört somit auf dem Server in das Verzeichnis ./storage/themes/blueprint. Das Template lädt in Zeile 2 eine JavaScript-Datei (siehe weiter unten). Diese habe ich in ein separates Unterverzeichnis (./js) kopiert.

Der Rest des Templates ist das eigentliche Formular. Um mir Prüfungen im PHP-Script oder JavaScript zu ersparen, habe ich die neuen Formular-Optionen von HTML 5 benutzt. Für eine hübschere Optik können die einzelnen Form-Element noch mit entsprechenden style- bzw. class-Angaben ergänzt werden.

<koken:include file="inc/header.html" />
<koken:asset file="js/contact_form.js" />
<div id="content">
  <article>
    <header><h1>Kontaktformular</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-Adresse:</label>
            <input id="email" type="email" name="email" required value="" placeholder="adresse@mail.com" />
          </div>
          <div>
            <label for="betreff">Betreff:</label>
            <input id="betreff" type="text" name="betreff" required value="" placeholder="Text" />
          </div>
          <div>
            <label for="message">Ihre Nachricht:</label>
            <textarea id="message" name="message" required rows="10" cols="30" placeholder="Nachrichtentext" ></textarea>
          </div>
          <input type="submit" value="Abschicken" />
        </div>
        <div id="note"></div>
      </fieldset>
    </form>
  </article>
</div>
<koken:include file="inc/footer.html" />

Das Template kann einfach modifiziert und ergänzt werden. Dabei sollte aber unbedingt folgendes beachtet werden:

  • bei dem von mir verwendeten Theme liegen die HTML-Fragmente für den Kopf und den Fuss in separaten HTML-Dateien, die sich jeweils im Unterverzeichnis inc befinden; bei anderen Themes müssen die Zeilen 1 und 32 ggf. modifiziert werden
  • wenn die in Zeile 6, 8 und 27 verwendeten IDs geändert werden, müssen auch in der JavaScript-Datei die IDs entsprechend geändert werden
  • jedes input-Element hat ein name-Attribut, das im PHP-Script abgefragt wird; bei Änderungen dieser Bezeichner oder zusätzlichen Feldern muss das PHP-Script entsprechend angepasst werden.

JavaScript-Datei

Die folgende JavaScript-Datei js/contact.js ruft das PHP-Script für den Mail-Versand via Ajax auf und gibt dem Benutzer eine entsprechende Rückmeldung ob der Mail-Versand funktioniert hat oder nicht. Dazu ändert die JavaScript den Inhalt des gerade angezeigten Formulars. Auf diese Weise benötigt man kein zusätzliches Template für Rückmeldungen.

$(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">Ihre Nachricht wurde verschickt. Vielen Dank!</div>';
      $("#fields").hide();
    }
    else {
      result = msg;
    }
    $(this).hide();
    $(this).html(result).slideDown("slow");
    $(this).html(result);
  }); }
});
return false;
});
});

Noch ein paar Hinweise zu der JavaScript-Datei:

  • In Zeilen 2, 9 und 12 werden direkt HTML-Element des Formulars angesprochen. Wenn die Namen im Formular geändert wurden, so müssen sie auch hier angepasst werden.
  • Zeile 6 enthält die URL zu der PHP-Datei, die den eigentlichen Mailversand übernimmt.
  • Zeile 10 fragt den Rückgabewert des PHP-Scripts ab. Wenn der Text dort geändert wird, so muss auch hier der Wert angepasst werden.
  • Zeile 11 enthält die Meldung, die bei erfolgreichem Mailversand ausgegeben werden. Der Text kann nach Belieben geändert werden.

Hinweis:

Der Link zur JavaScript-Datei wird über das lens-Tag koken:assert eingefügt. Dadurch wird sie aus einem Unterverzeichnis des Themes geladen. Bei Regale müsste die Datei daher im Verzeichnis ./storage/themes/regale/js abgelegt werden.

PHP-Script

Das PHP-Script übernimmt den eigentlichen Mailversand. Das Script habe ich ein separates Verzeichnis direkt im Koken-Installationsverzeichnis kopiert (/contactform/contact.php). Der Verzeichnis- und Dateiname muss zur URL passen, die in Zeile 6 des JavaScripts angegeben ist.

Damit die Mails auch an die richtige Adresse geschickt werden, muss in dem PHP-Script die Mail-Adresse in Zeile 2 angepasst werden. Wurde das Formular ergänzt oder Namen der Eingabefelder geändert, so müssen in den Zeilen 6-9 die Schlüsselnamen für den Zugriff auf das $_POST-Array geändert werden.

Der Aufbau der eigentlichen Mail in Zeile 10-14 und der Fehlertext (Zeile 18) können nach Belieben angepasst werden. Der Rückgabewert, der bei erfolgreichem Versand in Zeile 15 ausgegeben wird, sollte nicht angepasst werden, da er im JavaScript abgefragt wird.

<?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['betreff']);
  $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">Mailversand fehlgeschlagen.</div>';
  }
}
?>

Hinweis:

Zum Versand der Mail wird die PHP-Funktion mail verwendet. Damit diese Funktion die Mail versenden kann, muss bei Windows-Servern in der Datei PHP.INI ein SMTP-Server konfiguriert sein. Wenn Sie keinen Zugriff auf diese Datei haben, muss ein anderes Verfahren für dem Mailversand verwendet werden.

Auf Linux-Systemen wird für den Mailversand sendmail verwendet, das entsprechend konfiguriert sein muss.

Hier noch einmal kurz eine Übersicht wie die verschiedenen Dateien auf dem Webserver abgelegt werden müssen, wenn Datei- und Verzeichnisnamen nicht geändert wurden:

koken
+--- admin
+--- app
+--- contactform
|    +--- contact.php
+--- images
+--- storages
     +--- ...
     +--- themes
          +--- ...
          +--- <theme>
                 +--- js
                 |    +--- contact_form.js
                 |    +--- ...
                 +--- ...
                 +--- contact.lens

Damit sind alle Funktionen implementiert und das lens-Template muss jetzt nur noch einem Menü zugewiesen werden.

Menüpunkt in Koken anlegen

Für die Anzeige des Formulars erstellt man im Koken-Administrationsbereich einen neuen Menüpunkt. Dazu wechselt man in den Bereich Site und wählt dann beim gewünschten Menü die Funktion Add links auf. In der Liste der angezeigten Link-Möglichkeiten findet man  dann im Bereich TEMPLATES auch das neue Template “Contact” (sofern man das Template an die richtige Stelle kopiert hat). Nach Auswahl des Templates kann dann noch ggf. der Name des Links angepasst werden.

Ein Beispiel für ein Kontaktformular findet man auf meiner Website mherbst.de.

comments powered by Disqus