smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

WordPress: Kontaktformular erstellen (ohne Plugin)

1. November 2012
Stephan
WordPress

Die Kontakt-Seite inklusive Kontaktformular ist meistens eine der ersten Seiten, die man für einen neuen WordPress-Blog erstellt.

Neben der Möglichkeit ein Plugin, wie z.B. das populäre Contact Form 7 zu verwenden, kann man ein Kontaktformular aber auch selbst erzeugen.

In diesem Artikel zeige ich euch, wie ihr ein simples Kontaktformular für euren WordPress-Blog umsetzen könnt.

Template für Kontakt-Seite erstellen

Als erstes werden wir uns ein neues Seiten-Template für unsere Kontakt-Seite anlegen. Dazu erstellt eine neue Datei namens contact.php in eurem Theme-Verzeichnis. Fügt in diese neue Datei den folgenden Code:

<?php
/*
 * Template Name: Kontaktformular
 */
 ?> 
<?php get_header(); ?>
<section>
	<?php 
	if(have_posts()) 
	{ 
		while(have_posts())
		{
			the_post(); ?>
			<article>
                <h2><a href="<?php the_permalink() ?>" title="Seite: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <div class="text">
                    <?php the_content(); ?>
                    <?php
                    if(isset($_POST['submit']))
                    {
						$salutation = isset($_POST['salutation']) ? $_POST['salutation'] : '';
						$senderName = isset($_POST['senderName']) ? $_POST['senderName'] : '';
						$sender = isset($_POST['sender']) ? $_POST['sender'] : '';
						$message = isset($_POST['message']) ? $_POST['message'] : '';
                        
						include('contact-files/ContactFormMail.php');
						
                        $mail = new ContactFormMail('kontakt@dein-blog.de', 'Kontaktanfrage - Blog-Name');
                        $mail->addAllowedSalutation(array('Herr', 'Frau', 'Familie', 'Firma'));
                        $mail->setSalutation($salutation);
                        $mail->setSenderName($senderName);
                        $mail->setSender($sender);
                        $mail->setMessage($message);
						
                        $errors = $mail->sendMail();
                        if($errors)
                        {
                            $errorMessage = '<p><strong>Hinweis:</strong><ul>';
                            foreach($errors as $error)
                            {
                                $errorMessage .= '<li>'.$error.'</li>';
                            }
                            $errorMessage .= '</ul></p>';
                            include('contact-files/contact-form.php');
                        }
                        else
                        {
                            ?>
                            <div id="contactFormError"><strong>Deine Nachricht wurde erfolgreich abgeschickt.</strong></div>
                            <?php
                        }
                    }
                    else
                    {
                        include('contact-files/contact-form.php');
                    }
                    ?>
                </div>
			</article>
		<?php 
		} 
	} 
	?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

In der Zeile 28 müsst ihr die E-Mail-Adresse angeben, an welche die E-Mail schließlich gesendet wird. Weiterhin könnt ihr hier den entsprechenden Betreff angeben.

Das HTML-Markup solltet ihr entsprechend eures Themes anpassen.

Kontaktformular erzeugen

Als nächstes müssen wir unser Kontaktformular, welches wir im Template eingebunden haben, anlegen. Dazu erstellen wir in unserem Theme-Ordner ein neues Verzeichnis mit der Bezeichnung contact-files.

In diesem Verzeichnis legen wir wiederum eine neue Datei namens contact-form.php an und fügen folgenden Inhalt ein:

<div id="contactForm">
	<?php if(isset($errorMessage) && $errorMessage) echo $errorMessage; ?>
	<form action="<?php the_permalink(); ?>" method="post">
		<fieldset>
	    	<legend>Persönliche Daten</legend>
			<label for="salutation">Anrede:</label>
			<select id="salutation" name="salutation" size="1">
				<option>-</option>
				<option<?php if($salutation === 'Herr') echo ' selected="selected"'; ?>>Herr</option>
				<option<?php if($salutation === 'Frau') echo ' selected="selected"'; ?>>Frau</option>
				<option<?php if($salutation === 'Familie') echo ' selected="selected"'; ?>>Familie</option>
				<option<?php if($salutation === 'Firma') echo ' selected="selected"'; ?>>Firma</option>
			</select>
			<label for="name">Name:</label>
			<input type="text" id="name" name="senderName" size="20" maxlength="120" value="<? if(isset($senderName)) echo $senderName; ?>"/>
			<label for="email">E-Mail:</label>
			<input type="text" id="email" name="sender" size="20" maxlength="120" value="<? if(isset($sender)) echo $sender; ?>"/>
		</fieldset>
		<fieldset>
	    	<legend>Nachricht</legend>
			<label for="message">Hier kannst du deine Nachricht eingeben:</label>
			<textarea cols="34" rows="5" id="message" name="message"><? if(isset($message)) echo $message; ?></textarea>
		</fieldset>
		<p>
			<input type="submit" name="submit" value="Nachricht versenden"/>
		</p>
	</form>
</div>

Je nachdem, was ihr in der Template-Datei in Zeile 30 für erlaubte Anreden angegeben habt, müsst ihr noch die select-Liste (Zeile 7 – 13) anpassen.

E-Mail-Klasse für Kontaktformular

Als letztes brauchen wir nur noch die im Template verwendete ContactFormMail-Klasse erstellen. Dazu einfach die entsprechende Datei ContactFormMail.php im contact-files-Verzeichnis anlegen.

Da der einzufügende Code etwas lang ist, könnt ihr die Datei hier auch direkt herunterladen: ContactFormMail.php

Falls euch die Umsetzung mit der Klasse und den vielen Dateien nicht zusagt, gibt es auch kompaktere Lösungen – siehe Artikel: Ein Kontaktformular für WordPress ohne Plugin

Template im Admin-Bereich auswählen

Abschließend müsst ihr eurer Kontakt-Seite nur noch das neue Template zuweisen. Hierfür im Admin-Bereich eures WordPress-Blogs eure Konta-Seite auswählen und im rechten Sidebar-Bereich das Template auswählen:

Template für Kontaktformular auswählen

Fazit

Wenn ihr nicht ein besonders aufwendiges Kontaktformular benötigt, dann reicht diese manuelle Lösung zur Erstellung eines Kontaformulars denke ich auch aus.

Wie erstellt ihr eigentlich euer Kontaktformular für euren WordPress Blog?

Kommentare  
6 Kommentare vorhanden
1 Frank Wagner schrieb am 24. Januar 2013 um 13:34 Uhr

Hallo Stephan,

sehr hilfreich dieser Artikel! Vielen Dank! Ich hätte dazu noch eine Frage: Kann man es irgendwie erreichen, dass auch Umlaute nachher in der Mail ankommen? Oder geht das bei dieser Methode aus technischen Gründen überhaupt nicht?

Danke und viele Grüße
Frank

2 Stephan L. schrieb am 24. Januar 2013 um 15:20 Uhr

Hallo Frank,

an sich sollten Umlaute kein Problem darstellen. Gerade noch mal getestet und sowohl im Namen des Senders als auch im eigentlichen Nachrichtentext werden Umlaute bei mir in der Mail richtig angezeigt.

Verwendest du auf deiner Seite eventuell nicht UTF-8 für die Zeichenkodierung?

Gruß Stephan

3 Frank Wagner schrieb am 24. Januar 2013 um 17:28 Uhr

Hey vielen Dank für die schnelle Antwort! Das könnte sein. Dann ist das wahrscheinlich schon die Datenbank falsch angelegt oder? Kann man das im Backend irgendwo einsehen? Leider kenne ich mich mit Servern nicht so aus und habe keinen Zugriff auf phpMyAdmin. Muss das utf8-general-ci sein oder einfah nur utf8? Komischerweise wird auf der Site sonst überall alles korrekt angezeigt…

4 Stephan L. schrieb am 26. Januar 2013 um 17:14 Uhr

An die Datenbank habe ich jetzt eher weniger gedacht, da dass mit dem Kontaktformular und der Mail nicht wirklich was zu tun hat.

Ging eher darum, zu schauen, ob deine Webseite an sich korrekt per UTF-8 ausgeliefert wird. In deinem Quelltext, steht da bei den meta-Tags irgendwas vonwegen UTF-8 oder ISO?

Liefert dein Webserver Dateien UTF-8 kodiert aus? Sprich werden deine Dateien mit dem richtigen Content-Type ausgeliefert?

Falls du Firebug für Firefox verwendest, kannst du im Tab/Reiter Netzwerk nachschauen, ob bei den HTTP-Antwort-Headern beim Content-Type als Charset utf-8 gesetzt ist.

z.B. bei HTML-Dateien:

Content-Type text/html; charset=UTF-8

Beim Webserver Apache ist standardmäßig glaube ich ISO-8859-1 eingestellt.(?!)

Könnte man mit einen Eintrag in der .htaccess ändern (wenn Provider das zulässt):

AddDefaultCharset utf-8

Ansonsten lässt sich der Content-Type auch per PHP angeben.

Beispiel:

header("Content-Type: text/html; charset=utf-8");
5 Frank Wagner schrieb am 28. Januar 2013 um 11:54 Uhr

Spitze! Meine Header-Informationen haben gestimmt, aber das mit der .htaccess-Datei war die Lösung. Vielen Dank nochmal!

6 Simone M schrieb am 26. August 2014 um 21:53 Uhr

Hallo Stephan,

wir haben unsere Domain komplett mit WordPress umbauen lassen.
Seit dem funktioniert das Conversiontracking des Kontaktformulars in Analytics und AdWords nicht mehr.
Unser Programmierer kann uns nicht weiterhelfen.
Wo könnten wir ansetzen, um die Ursache zu finden?

Viele Grüße
Simone

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!