Erstellen eines Email-Kontaktformulars

0

Oftmals möchte man auf einer Webseite ein Kontaktformular einrichten, über das die Leser Serviceanfragen oder Feedback an den Administrator senden können. Zwar reicht zu diesem Zweck auch die Angabe der eigenen Email-Adresse, jedoch ist es von Vorteil, wenn eine Email automatisch vom Server aus abgesendet wird. Denn auf diese Weise verhindert man effektiv, dass Nachrichten ungewollt als Spam markiert werden und ihr Ziel nicht erreichen.

Im folgenden möchte ich die Programmierung eines Seitentemplates beschreiben, das ein solches Kontaktforumlar enthält.

1.) Die Grundstruktur des Templates

Zunächst einmal erstellt man in einem Texteditor eine neue Datei und speichert diese unter einem belibiegen Namen als PHP-Datei ab. In meinem Fall wähle ich den Namen contactform.php. Anschließend suchen Sie im Verzeichnis Ihres Themes die Datei single.php oder, falls diese nicht vorhanden ist, die Datei index.php. Kopieren Sie den Inhalt in die neu erstellte PHP-Datei. Auf diese Weise werden später beim Aufrufen des Seitentemplates alle benötigten Bestandteile der Seite, wie zum Beispiel Kopf- und Fußzeile, aber auch die Sidebar angezeigt.
Anschließend kann die Datei angepasst werden. Die Grundstruktur für das Seitentemplate ist im unten stehenden Listing zu erkennen.

<?php /*
Template Name: Contactform
*/
?>

<!-- Hierhin kommen später alle Formularfunktionen -->

<?php get_header(); ?>
	
	<?php LB_announce_widget(); ?>
	
	<div id="article-wrapper">
                
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			
			<div class="article">
					
				<div class="title">
					<h2><?php the_title(); ?></h2>
				</div>
				
				<div class="clear"></div>
					
				<div class="entry">
				
<!-- An dieser Stelle wird später das Formular eingefügt -->

				</div><!-- entry -->		
				
			</div><!-- article -->

		</div><!-- post -->
			
		<?php endwhile; endif; ?>

	</div><!-- article-wrapper -->		

	<?php comments_template(); ?>  

	</div><!-- content -->

	<?php get_sidebar(); ?>            
                
	</div><!-- main -->

	</div><!-- wrapper -->

<?php get_footer(); ?>

2) Das Formular

Steht die Grundstruktur der Seite, kann das Formular erstellt werden. Neben Eingabefelder für die Nachricht und deren Betreff ist die Abfrage des Namens und der Email-Adresse sinnvoll, damit man auf die Nachricht antworten kann. Zum Einsatz kommen hierfür die Formular-Elemente <input type=”text”> für Namen, Email-Adresse und Betreff und <textarea> für die Nachricht. Weiterhin wird ein Button benötigt, über den die Nachricht abgeschickt werden kann.

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
					
<p>
	<input type="text" name="contactName" id="contactName" value="" />
	<label for="contactName">Name</label>
</p>
						
<p>
	<input type="text" name="contactEmail" id="contactEmail" value="" />
	<label for="contactEmail">Email</label>
</p>
						
<p>
	<input type="text" name="contactSubject" id="contactSubject" value="" />
	<label for="contactSubject">Betreff</label>
</p>
						
<p>
	<p id="labelMessage"><label for="contactMessage">Nachricht</label></p>
	<textarea name="contactMessage" id="contactMessage" rows="10" cols="40"></textarea>
</p>
						
<p><button id="contactSubmit" type="submit">Nachricht senden</button></p>
					  
<input type="hidden" name="submitted" id="submitted" value="true" />
						
</form>

Natürlich könnte man bei diesem Formular noch einige Verbesserungen in Sachen Nutzfreundlichkeit vornehmen. Beispielsweise könnten die Felder optisch und semantisch mittels entsprechender ARIA-Attribute als Pflichtfelder markiet werden. Dies ist jedoch für die Funktion nicht unbedingt erforderlich und durch die Verwendung des for-Attributs, das das Label des Formularfeldes anklickbar macht, ist bereits der erste Schritt in Richtung Usability getan.

3) Die Formularfunktionen

Hat man das Formular in das Grundgerüst des Seitentemplates eingefügt, kann man sich mit den Funktionen des Formulars beschäftigen. Nachdem der Nutzer auf den “Senden”-Button geklickt hat, soll zunächst überprüft werden, ob alle Felder ausgefüllt wurden und eine gültige Email-Adresse eingegeben wurde. Liegt ein Fehler in der Eingabe vor, wird die Variable $hasError auf den Wert true gesetzt und es kann eine entsprechende Fehlermeldung an beliebiger Stelle (zum Beispiel hinter dem Formular) ausgegeben werden. Sind die Eingaben gültig, wir bei einem Klick auf den “Senden”-Button die PHP-Funktion mail() ausgeführt. Als Parameter werden der Funktion die zuvor in das Formular eingetragenen Daten übergeben.

<?php if(isset($_POST['submitted'])) {
  //Name ist Pflichtfeld
  if(trim($_POST['contactName']) == '') {
    $hasError = true;
  } else {
    $name = trim($_POST['contactName']);
  }
  //eMail-Adresse ist Pflicht
  if(trim($_POST['contactEmail']) == '')  {
    $hasError = true;
  } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['contactEmail']))) {
    //einfache Pruefung der eMail-Adresse
    $hasError = true;
  } else {
    $eMail = trim($_POST['contactEmail']);
  }
  //Betreff ist Pflicht
  if(trim($_POST['contactSubject']) == '') {
    $hasError = true;
  } else {
    if(function_exists('stripslashes')) {
      $subject = stripslashes(trim($_POST['contactSubject']));
    } else {
      $subject = trim($_POST['contactSubject']);
    }
  }
  //Nachricht ist Pflichtfeld
  if(trim($_POST['contactMessage']) == '') {
    $hasError = true;
  } else {
    if(function_exists('stripslashes')) {
      $message = stripslashes(trim($_POST['contactMessage']));
    } else {
      $message = trim($_POST['contactMessage']);
    }
  }
  if(!isset($hasError)) {
    //Admin-eMail holen
    $emailTo = get_option('admin_email');
    $body = "Nachricht vom Blog gesendet:\n\nName: $name \neMail: $eMail \n\n".
    "Betreff: $subject \nNachricht: $message";
    $headers = 'From: '.$name.' < '.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $eMail;
    mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
  }
} ?>

4) Das gesamte Seitentemplate

Wurde das oben stehenden Codesnippet an die entsprechende Stelle im Code eingefügt, sollte der fertige Quellcode für das Seitentemplate wie folgt aussehen.

<?php /*
Template Name: Contactform
*/
?>

<!-- Formularfunktionen -->

<?php if(isset($_POST['submitted'])) {
  //Name ist Pflichtfeld
  if(trim($_POST['contactName']) == '') {
    $hasError = true;
  } else {
    $name = trim($_POST['contactName']);
  }
  //eMail-Adresse ist Pflicht
  if(trim($_POST['contactEmail']) == '')  {
    $hasError = true;
  } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['contactEmail']))) {
    //einfache Pruefung der eMail-Adresse
    $hasError = true;
  } else {
    $eMail = trim($_POST['contactEmail']);
  }
  //Betreff ist Pflicht
  if(trim($_POST['contactSubject']) == '') {
    $hasError = true;
  } else {
    if(function_exists('stripslashes')) {
      $subject = stripslashes(trim($_POST['contactSubject']));
    } else {
      $subject = trim($_POST['contactSubject']);
    }
  }
  //Nachricht ist Pflichtfeld
  if(trim($_POST['contactMessage']) == '') {
    $hasError = true;
  } else {
    if(function_exists('stripslashes')) {
      $message = stripslashes(trim($_POST['contactMessage']));
    } else {
      $message = trim($_POST['contactMessage']);
    }
  }
  if(!isset($hasError)) {
    //Admin-eMail holen
    $emailTo = get_option('admin_email');
    $body = "Nachricht vom Blog gesendet:\n\nName: $name \neMail: $eMail \n\n".
    "Betreff: $subject \nNachricht: $message";
    $headers = 'From: '.$name.' < '.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $eMail;
    mail($emailTo, $subject, $body, $headers);
    $emailSent = true;
  }
} ?>


<!-- Kontaktformular -->

<?php get_header(); ?>
	
	<?php LB_announce_widget(); ?>
	
	<div id="article-wrapper">
                
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			
			<div class="article">
					
				<div class="title">
					<h2><?php the_title(); ?></h2>
				</div>
				
				<div class="clear"></div>
					
				<div class="entry">
				
				<p>Sollten Sie Fragen oder Anregungen haben, zögern Sie nicht, mir eine Nachricht zukommen zu lassen. Alle Felder sind verpflichtend.</p>
				
					<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
					
						<p>
							<input type="text" name="contactName" id="contactName" value="" />
							<label for="contactName">Name</label>
						</p>
						
						<p>
							<input type="text" name="contactEmail" id="contactEmail" value="" />
							<label for="contactEmail">Email</label>
						</p>
						
						<p>
							<input type="text" name="contactSubject" id="contactSubject" value="" />
							<label for="contactSubject">Betreff</label>
						</p>
						
						<p>
							<p id="labelMessage"><label for="contactMessage">Nachricht</label></p>
							<textarea name="contactMessage" id="contactMessage" rows="10" cols="40"></textarea>
						</p>
						
						<p><button id="contactSubmit" type="submit">Nachricht senden</button></p>
					  
						<input type="hidden" name="submitted" id="submitted" value="true" />
						
						<?php 
						if(isset($hasError)) {
							echo '<p id="contactError">Ihre Nachricht konnte nicht gesendet werden. Überpüfen Sie alle Eingaben.</p>';
						}
						
						if(isset($emailSent)) {
							echo '<p id="contactSuccess">Ihre Nachricht wurde erfolgreich gesendet.</p>';
						} 
						?>
						
					</form>

				</div><!-- entry -->		
				
			</div><!-- article -->

		</div><!-- post -->
			
		<?php endwhile; endif; ?>

	</div><!-- article-wrapper -->		

	<?php comments_template(); ?>  

	</div><!-- content -->

	<?php get_sidebar(); ?>            
                
	</div><!-- main -->

	</div><!-- wrapper -->

<?php get_footer(); ?>

Zu erkennen ist auch die Ausgabe der Fehler- bzw. Erfolgsmeldung hinter dem Formular. Auf diese Weise bekommt der User ein Feedback und weiß, ob die Nachricht erfolgreich abgeschickt wurde oder ob er einen Fehler bei der Eingabe seiner Daten gemacht hat.

Zuweisen eines Templates im WordPress-Editor

Die fertige Datei speichert man ab und lädt sie in das Hauptverzeichnis des aktuellen Themes. Anschließend kann man über den WordPress-Administrationsbereich eine neue Seite erstellen. Wie auf dem Bild zu erkennen ist, kann man der Seite über die Box Attribute mittels des Selektors Template das entsprechende Seitentemplate, in diesem Fall Contactform zuweisen. Falls die entsprechende Einstellungsbox im Editor nicht angezeigt wird, wurde sie möglicherweise ausgeblendet. Um sie wieder einzublenden, aktiviert man die Checkbox Attribute, die über den Reiter “Optionen einblenden” erreicht werden kann.
Jetzt sollte das fertige Formular im Frontend auf der entsprechenden Seite angezeigt werden. Allerdings fehlt noch das Stylesheet. Darauf gehe ich im nächsten Abschnitt näher ein.

5) Das Stylesheet

Zu guter Letzt sollte man das Kontaktforumlar noch dem Design der Seite anpassen. Zu beachten ist die räumliche Nähe zwischen Label und zugehörigem Formularfeld, sodass der Nutzer auf den ersten Blick erkennt, welche Daten er eintragen muss. Weiterhin sollte der “Senden”-Button gut gut als solcher erkennbar sein. Auf dem folgenden Bild sieht man das Kontaktformular, das ich an das Design der übrigen Webseite angepasst habe.

Ansicht des fertigen Seitentemplates

In meinem Fall sieht das fertige Stylesheet folgendermaßen aus. Das Formular-Design ist dabei vollständig an das Kommentar-Design im Theme angepasst. Sofern Sie ein anderes Theme nutzen, suchen sie einfach innerhalb des Haupt-Stylesheets nach den Eigenschaften für Formularfelder und kopieren diese in das Stylesheet des Kontaktformulars. Jetzt müssen noch die Selektoren und bei Bedarf einige Feinheiten angepasst werden und das Design sollte sich optimal in ihr bestehendes Theme einfügen.

#contactMessage {
	border: 1px solid #aaa;
	resize: vertical;
	width: 672px;
	min-height: 250px;
}

#contactMessage:focus {
	border-color: #555; 
}

#contactName,
#contactEmail,
#contactSubject {
	width: 220px;
	border: 1px solid #aaa;
}

#contactName:focus,
#contactEmail:focus,
#contactSubject:focus {
	border-color: #555;
}

#contactSubmit {
	cursor: pointer;
	border: 1px solid rgb(170, 170, 170);
	height: 30px;
	width: 180px;
	padding-bottom: 4px;
	background-color: #eee;
	transition: background-color .15s linear;
	-moz-transition: background-color .15s linear;
	-webkit-transition: background-color .15s linear; 
	-o-transition: background-color .15s linear;
	-ms-transition: background-color .15s linear;
}

#contactSubmit:hover {
	background-color: #ccc;
}

#labelMessage {
	margin-bottom: 0;
}

#contactError{
	padding: 1px 5px 1px 5px;
	background-color: #ffcccc;
	border: 1px solid #f00;
}

#contactSuccess {
	padding: 1px 5px 1px 5px;
	border: 1px solid #398f14;
	background-color: #d7e8d0;
}

#contactForm label {
	cursor: pointer;
}

6) Praktischer Test

Im Folgenden möchte ich anhand einiger Bilder die Praxistauglichkeit des Formulars betrachten. Hat man alle Daten richtig in die Formularfelder eingegeben und auf den “Senden”-Button geklickt, wird die auf dem unten stehenden Bild dargestellte Erfolgsmeldung ausgegeben.

Ausgabe der Erfolgsmeldung

Kurz danach erreicht die Email-Adresse das Ziel-Postfach, das durch die Email-Adresse des Administrators festgelegt ist. Da die Nachricht von einer seriösen Adresse (nämlich der eigenen) stammt, wird sie nicht als Spam markiert und erreicht somit zuverlässig den Empfänger.
Auf dem folgenden Bild sieht man die Nachricht im Posteingang. Die Kontaktanfrage enthält neben den Daten des Users einige weitere Header-Informationen, wie zum Beispiel die Uhrzeit.

Empfangene Kontaktanfrage im Email-Client

Liegt eine fehlende oder fehlerhafte Eingabe vor, wird eine entsprechende Meldung ausgegeben und die Nachricht wird nicht abgeschickt.

Ausgabe der Fehlermeldung

7) Plugins

WordPress bietet einige Plugins, mit deren Hilfe ein Kontaktformular erstellt werden kann. Ich zum Biepsiel habe lange Zeit das Plugin Contact Form 7 genutzt, welches jedoch den Nachteil hatte, dass die Nachrichten immer als Spam markiert wurden oder teilweise überhaupt nicht bei mir ankamen. Weitere Erfahrungen mit entsprechenden Plugins habe ich bisher nicht sammeln können, da ich eine selbst programmierte Lösung für flexibler und besser in das Theme integrierbar halte.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.