Contactable – Kontaktformular in WordPress

Die Integration eines Kontaktformulars mit WordPress beginnt meist bei einer Pluginsuche und endet oft mit einem viel zu großem Aufwand. Da werden Scripte geladen, Filter von WordPress über alle Seiten und Beiträge gejagt – nur um auf einer Seite ein Formular zu integrieren. Das Blog ist immer so gut wie sein Techniker und ich möchte heute mal einen ganz einfachen Weg zeigen, wie man sich ohne große Kenntnisse trotzdem ein Kontakt-Formular in das eigene Blog integriert.

Die Lösung ist nicht der Weisheit letzter Schuss, aber sie zeigt, wie einfach es ist und wie ressourcenschonend für WordPress die Integration sein kann.
Damit wir uns voll und ganz der Integration widmen können, und uns nicht mit PHP und JavaScript im Sinne des Formulars beschäftigen müssen, nutze ich hier im Beispiel das tolle Formular-Plugin
Contactable für jQuery von Philip Beel. Das Plugin bringt alle erforderlichen Dateien mit und muss lediglich integriert werden – sehr einfach zu nutzen und wenn man mag an die eigenen Bedürfnisse anzupassen. Hinweise dazu gibt es auf der Site zum jQuery-Plugin. Die Integration des Formulars zeige ich anhand des Standard-Themes Kubrick von WordPress, ist aber in jedem anderen Theme eben so zu nutzen. Aber Achtung, Spamer könnten das Plugin missbrauchen, daher gut überlegen oder erweitern – mehr dazu gibt es hier in den Kommentaren zu lesen. Danke in diesem Hinblick an Robert für die Hinweise und die damit verbundene Mühe.

WordPress bringt im Standard die jQuery Bibliothek mit und so müssen wir uns um die nicht kümmern, sondern nutzen sie lediglich. Dabei findet der Aufruf aller nötigen Dateien und Scripte innerhalb des Templates statt, welches sich im Anschluss um die Ausgabe des Kontaktformulars kümmert. Dieses Aufruf erledigen wir mit den Funktionen von WordPress – so gehen wir sicher, dass die Dateien wirklich nur einmal geladen werden. WordPress kümmert sich um die richtige Reihenfolge und um die Abhängigkeiten. Zu diesem Thema habe ich bereits einiges an Infos hinterlegt und verweise auf diesen Beitrag.

Als erstes erstellen wir ein Template, ich nenne es contact-page.php und es muss im Ordner eures Themes abgelegt werden. Dies enthält den Aufruf der nötigen Scripte und der dazugehörigen Stylesheets. Im Grunde benötigt ihr nur diese vier Aufrufe in der page.php eures Theme abzulegen, einen neuen Namen für die Datei zu vergeben und den Kommentar zum Erkennen durch WordPress im Page-Bereich des Backend abzulegen (ganz am Anfang der Datei). Im folgenden die Syntax am Beispiel der page.php aus dem Standard-Theme Kubrick.

<?php
/**
 * Template Name: Contact Page
 *
 * @package WordPress
 * @subpackage Default_Theme
 */

wp_enqueue_script( 'jquery.contactable', get_bloginfo('template_directory') . '/contactable/jquery.contactable.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'jquery.validate', get_bloginfo('template_directory') . '/contactable/jquery.validate.pack.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'my_contactable', get_bloginfo('template_directory') . '/contactable/my_contactable.js', array('jquery') , 3.1, true );
wp_enqueue_style( 'contactable', get_bloginfo('template_directory') . '/contactable/contactable.css' );

get_header(); ?>

	<div id="content" class="narrowcolumn" role="main">

		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>

			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
				
				<div id="mycontactform"> </div>
				
			</div>
		</div>
	
	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Wie in der Syntax zu erkennen, habe ich alle Dateien des jQuery-Formular-Plugnis im Ordner contactable im Ordner des Themes abgelegt. Eventuell müssen daher eure Pfade angepasst werden. Aktuell sieht es in meinem Theme wie folgt aus:

• default
  • contactable
    • jquery.contactable.js
    • jquery.validate.pack.jss
    • my.contactable.js
    • contactable.css
  • style.css
  • contact-page.php
  • …

Einzig die Datei my.contactable.js habe ich hinzugefügt; diese kümmert sich um den Aufruf des Formulars und kann mit Parametern gefüllt werden. Inhaltlich sieht sie wie folgt aus:

jQuery(document).ready( function($){
	$('#mycontactform').contactable({
		name: 'Name',
		email: 'E-Mail',
		message : 'Nachricht',
		recipient: 'example@domain.com',
		subject: 'Kontaktformular',
		recievedMsg : 'Vielen Dank für Ihre Nachricht.'
	});
});

Sind alle Dateien gespeichert und an eure Bedürfnisse angepasst, dann muss lediglich im Admin-Bereich von WordPress eine Seite angelegt werden. Dieser Seite gebt ihr einen Namen, eventuell Inhalt und ihr müsst das Template auswählen – in unserem Fall die Contact Page. Nachdem Speichern sollte die Seite im Frontend des Blog aufzurufen sein und mit einem Klick auf das kleine Label fährt das Formular in die Sicht und kann ausgefüllt werden.

Durch die Aufrufe mit Hilfe von WordPress Funktionen und den richtigen Parametern, sind nun die Scripte im Footer der Site integriert. Die Bibliothek jQuery muss nicht aufgerufen werden, sie wird von WordPress hinzugefügt, wenn sie noch nicht da ist, durch die Abhängigkeit der Parameter zum Schlüssel jquery. Durch die Nutzung eines Templates mit allen Aufrufen werden sämtliche Scripte und StyleSheets nur eingebunden, wenn diese Seite von WordPress aufgerufen wird. Wer das Formular-Schnippsel auf allen Seiten möchte, der macht den Aufruf bspw. in der header.php oder functions.php.

Möchte man diese Funktion nicht nutzen, so kann entweder dass CSS nicht genutzt werden, bzw. ein eigenes Design hinzugefügt werden oder man passt das JS an seine eigenen Bedürfnisse an. Gleiches gilt für zusätzliche Felder im Formular, dazu muss der Inhalt der Dateien angepasst werden.