Contactable – Kontaktformular in WordPress

22. Dezember 2009 von Frank Bültge in Themes, Tipps, WordPress

WP Adventskalender 22
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.

Contactable im Kubrick

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&uuml;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.

Contactable im Kubrick

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.

Adventskalender, Performance, Template, Theme, WordPress, WP

Über Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

Kommentare

Markus sagt:

22. Dezember 2009 um 10:55

Das scheint endlich mal was zu sein wie ich mir das vorstell. Keine ständigen DB Afragen und dergleichen. Danke für diesen Artikel, werd mir das ganze gleich mal anschauen und testen.
Robert sagt:

22. Dezember 2009 um 12:07

Frank, das ist der pure Wahnsinn - wenn ich das mal so unverblümt sagen darf. Bitte warne deine Leser vor dem Einsatz!

Andernfalls laden sich die Leute ein offenes Spam-Relay auf den Server (ich meine damit das in Contactable verpackte mail.php), und wundern sich dann, wenn ihnen der Webhoster den Account stilllegt oder ihre Domain in die Spamfilter rutscht, nachdem ihre Server den Postverteiler für tausende Vi4gra-Mails gespielt haben.

Jedes herkömmliche halbwegs professionelle Kontaktformular hat zumindest einen fest kodierten Empfänger, die besseren schützen sich vor Mißbrauch mit nonces oder anderen CSRF-Schutzmaßnahmen.

Contactables mail.php jedoch lässt sich zum Versand beliebiger Botschaften an beliebige Empfänger einsetzen:

$recipient = $_GET['recipient'];
$message = " Message: $comment \r \n From: $name \r \n Reply to: $email";
[...]
mail($recipient, $subject, $message);

Das sind genau die Fälle, die PHP in den Geruch einer Fricklersprache gebracht haben.
- Frank Bültge sagt:
  
  22. Dezember 2009 um 12:27
  @Robert: du hast Recht; leider - eventuell könnte man das im Umfeld von WP mit Hilfe der Funktion wp_mail() von WP absichern?
```
<?php
	$recipient = $_GET['recipient'];
	$name = $_GET['name'];
	$email = $_GET['email'];
	$comment = $_GET['comment'];
	$subject = $_GET['subject'];	
	$notes = stripcslashes($notes);	
	$message = " Message: $comment \r \n From: $name  \r \n Reply to: $email";
	//mail($recipient, $subject, $message);
	if ( !function_exists('wp_mail') )
		include( ABSPATH . WPINC . 'pluggable.php' );
	wp_mail($recipient, $subject, $message);
?>
```
Robert sagt:

22. Dezember 2009 um 12:35

Ich kann nicht erkennen, dass das etwas nützen würde: Solange $recipient aus $_GET gelesen wird, sendet dein Server an beliebige Empfänger.

Für jeden freundlichen Spammer oder seinen Bot, der eine URL auf deinem Server via GET aufrufen kann. Weltweit und unlimitiert mit voller Bandbreite deiner Serveranbindung -> Spamschleuder.

.htaccess-Zugriffseinschränkungen sind nicht möglich, weil sonst die hübsche AJAX-Funktion nicht läuft.
- Frank Bültge sagt:
  
  22. Dezember 2009 um 13:09
  
  @Robert: Request-Daten müssen validiert werden, so hatte ich mir mal angeeignet. Mit wp_mail() werden die Daten zwar validiert, ebenso mit dem JS des jQuery-Plugins, aber trotzdem kann jeder Bot den Parameter nutzen, korrekt ?
Robert sagt:

22. Dezember 2009 um 13:38

Richtig, das ist eines der offensichtlichen Probleme.

Weiters verhindert Contactable nicht, dass innerhalb eines der via $_GET übermittelten Parameter ein Zeilenwechsel (\n) vorkommt. Damit eröffnet man böswilligen Kiddies ein paar weitere Möglichkeiten.

Frickelei allerorten.
Stefan sagt:

25. Dezember 2009 um 10:57

Schaut doch mal hier nach. So kann man zumindest Contactables mail.php absichern.
Ahmet Topal sagt:

27. Dezember 2009 um 12:34

Die leichteste Möglichkeit ist es doch, einfach diesen $recipient im PHP Code festzulegen, dann kann man diesen Parameter nichtmehr ändern.

Zwar muss man dann in der JavaScript Datei etwas ändern, aber ist minimal, also bei mir hat dies im test geklappt, spricht ja auch nichts dagegen.

Hiermit wird die Email nur an den im $recipient festgelegten Benutzer gesendet.
Ahmet Topal sagt:

27. Dezember 2009 um 12:36

Irgentwie ist der Code nicht angekommen

$recipient = "emailadresse@domain.tld";
Alex sagt:

28. Dezember 2009 um 10:55

Super, genau das was ich schon seit längerem suche... Allerdings funktioniert bei mir nischt. Ich habe ohne große eigene Anpassungen nach deiner Anleitung oben, das Formular zu starten versucht, aber es passiert nichts... Kein Button sichtbar.
Habe schon versucht die Skripte direkt über den Header aufzuufen, alles fehlgeschlagen... Hast du ne Idee, wo ich noch suchen könnte?

Das ganze liegt im Moment unter http://niederlassung.org/reservierung-anfragen/

Vielen dank schonmal...
- Frank Bültge sagt:
  
  29. Dezember 2009 um 15:06
  
  @Alex: auf der Seite ist aber aktuell nichts zu finden, man kommt auf einen Error.
Alex sagt:

29. Dezember 2009 um 15:12

Hallo Frank,

sorry, hab inzwischen was umgestellt. Es funktioniert inzwischen. Hatte einen kleinen Fehler in den Pfaden. Allerdings schickt er mir noch keine Mail raus. Und gibt es denn inzwischen ein sicheres Fixing wegen des oben angesprochenen Sicherheitsproblems...
Aktuell auf niederlassung.org

Vielen Dank für`s nachsehen...
Moritz Graf sagt:

2. Mai 2010 um 12:18

Ich will ja jetzt nicht petzen oder so aber:

http://wpengineer.com/contactable-contaktform-easy-with-wordpress/
- Frank Bültge sagt:
  
  2. Mai 2010 um 14:26
  
  @Moritz Graf: Eventuell solltest du mal den Autor des Blog ansehen, dass ist mein englischsprachiger Blog, den ich mit zwei Freunden betreibe
Moritz Graf sagt:

18. Mai 2010 um 21:56

Ohh man ich bin ein Idiot D Tut mir Leid...
- Frank Bültge sagt:
  
  19. Mai 2010 um 10:41
  
  @Moritz: keine Sorge, kann jedem passieren

Contactable – Kontaktformular in WordPress

Über Frank Bültge

Kommentare

Anzeigen

Suchen

Projekte