WordPress: Einfaches Kontaktformular ohne Plugin

von

Braucht man aufgeschwemmte Plugins, die eigene jQuery Scripte und Css-Files laden, einen Konfigurations-Dschungel in WordPress installieren und dann trotzdem das eine Extra nicht können, welches grade benötigt wird?

Braucht man, wenn man keine Zeit hat, denn es ist sicher einfacher und schneller, sich Contact Form 7 zu installieren. Wenn man es aber klein, fein und vor allem schlank haben will, darf es auch mal die Pluginlose Lösung sein.


Update 22.08.2016

Nach einem Hinweis, daß Php einige Notices schmeißt, habe ich die Verbesserungen, die auf Php.de vorgeschlagen wurden, in den Code eingebaut. Danke für die Hinweise und Verbesserungen!


Der Code kommt in ein Extra Page Template, dann legt man wie immer eine Kontaktseite an, der man dieses Template zuweist – voila!

<?php
/*
Template Name: Kontakt
*/ 
?>
 
<?php /* other template code goes here... */ ?>
 
<?php 
 
/* response strings */
$missing_fields	= 'Bitte füllen Sie alle Felder aus.';
$email_invalid	= 'Ihre E-Mail-Adresse ist ungültig.';
$trapped	= 'Bitte diese Seite nicht per Script aufrufen.';
$error		= 'Die Nachricht konnte nicht gesendet werden.';
$success 	= 'Danke! Die Nachricht wurde gesendet.';
 
/* process post vars, leave honeypot raw */
$submitted	= isset( $_POST['scf_submitted'] ) ? $_POST['scf_submitted'] : false;
$name 		= scf_get_field( 'scf_name' );
$email 		= scf_get_field( 'scf_email' );
$message 	= scf_get_field( 'scf_message' );
$honeypot 	= isset( $_POST['scf_message2'] ) ? $_POST['scf_message2'] : false;
 
/* wp_mail vars */
$mailto		= get_option( 'admin_email' );
$subject	= 'Nachricht von  ' . get_bloginfo('name');
$headers	= 'From: ' . $email . "\r\n" . 'Reply-To: ' . $email . "\r\n";
 
if ( $submitted ) {
	if ( $honeypot != "" ) {
		scf_response("alert-danger", $trapped);
	} else {
		if ( !$name || !$email || !$message ) {
			$alert[] = $missing_fields;
		}
		if ( !is_email( $email ) &&  $email ) {
			$alert[] = $email_invalid;
		}
		if ( empty( $alert ) ) {
			if ( wp_mail( $mailto, $subject, strip_tags( $message ), $headers ) ) {
				$alert[] = $success;
				scf_response("alert-success", $alert); 
				unset( $submitted, $name, $email, $message, $honeypot );
			} else {
				$alert[] = $error;
				scf_response("alert-danger", $alert); 
			}
		} else {
			scf_response("alert-warning", $alert);
		}
	}
}
 
/* output alert html */
function scf_response( $class, $alertArr ){
	$alertStr = implode( '<br>', $alertArr );
	echo '<div class="alert ' . $class .'">' . $alertStr  . '</div>';
}

/* helper function to get post values */
function scf_get_field( $field ){
     return sanitize_text_field( isset( $_POST[$field] ) ? $_POST[$field] : '' );
}
 
?>
 
<form role="form" action="<?php the_permalink(); ?>" method="post">
	<div class="form-group">
		<label for="scf_name">Name</label>
		<input 
			type="text" 
			id="scf_name" name="scf_name" 
			value="<?php echo !empty( $name ) ? $name : ''; ?>" 
			class="form-control"
			placeholder="Ihr Name">
	</div>
	<div class="form-group">
		<label for="scf_email">E-Mail</label>
		<input 
			type="text" 
			id="scf_email" name="scf_email" 
			value="<?php echo !empty( $email ) ? $email : ''; ?>" 
			class="form-control" 
			placeholder="Ihre E-Mail-Adresse">
	</div>
	<div class="form-group">
		<label for="scf_message">Nachricht</label>
		<textarea 
			rows="4" 
			id="scf_message" name="scf_message" 
			class="form-control"
			placeholder="Ihre Nachricht"><?php echo !empty( $message ) ? $message : ''; ?></textarea>
	</div>
	<div class="form-group" style="display:none;">
		<label for="scf_message2">Nachricht2</label>
		<input type="text" name="scf_message2" name="scf_message2">
	</div>
	<input type="hidden" name="scf_submitted" value="1">
	<button type="submit" class="btn btn-primary">Nachricht senden</button>
</form>
 
<?php /* other template code goes here... */ ?>

Das Markup und Css des Formulars kann natürlich anders aussehen, hier habe ich Bootstrap-Markup benutzt, da ich in einem aktuellen Projekt das schöne Roots Theme einsetze.

Die Basis für diesen Code war ein Tutorial auf wpmu.org, daneben ein sehr empfehlenswerter Artikel über sicheres Programmieren mit WordPress.

Kommentare

  1. Okaif

    Danke für das Tutorial. Ich mag das CMS WordPress. WordPress ist ein einfaches CMS, das leicht zu bedienen ist und das es einfach macht eigene Plugins zu entwickeln.

    Antworten
  2. El Gordo

    Coole Sache. Gerade suche ich ein Kontaktformular und stosse auf Deine Seite. Klasse Sache. Danke für den Beitrag und den Code. Ich werde es auf jeden Fall in einem meiner Blogs verwenden.

    Salu2 El

    Antworten
  3. Billhearts

    Hallo Hans,
    bin gerade auf Reisen und werde dein template ausprobieren sobald ich wieder daheim bin. Zur Zeit habe ein „altes“ Bestellformular einfach angepasst und als externe Seite aus dem Blog heraus ausgerufen. Das ist nicht sehr schön, aber es funktionierte auf die schnelle besser als das Zusammenbauen des integrierten templates.
    Beim Guru 2.0 > 3.0 habe ich auch eine Anleitung gefunden. Mal schauen welche schneller in das „theme“ eingebaut ist.

    Grüße aus Fernost

    Antworten
  4. jana

    Hey!
    Ich finde dein Formular super, nur leider spuckt es im debug Modus einige Fehlermeldungen aus. Könntest du, auch wenn es aus 2013 ist, da vllt mal eine aktualisierte Version mit aktueller Syntax machen? Das wär traumhaft!
    Meine PHP Kenntnisse reichen leider nicht aus…

    Antworten
  5. Nils

    Hallo Hans,

    wie sieht es mit der Formularsicherheit bei diesem Formular aus? Ich lese einige Sicherheitsfunktionen raus z.B. den honeypot. Bin aber jetzt nicht so der PHP Experte.

    Wird bei diesem Formular verhindert, dass scripte etc. eingeschleust werden können?

    Antworten
  6. Eva

    Hallo Hans, kann beim Übermitteln des Formulars ein Anker zum Formular gesetzt werden? Wenn das Formular am Ende einer langen Seite steht, sind die Alert sonst nicht gleich sichtbar?
    Danke für’s teilen!

    Antworten

Kommentieren