Waipoua Theme Kontaktformular ohne Plugin

WordPress-Plugin

Wie der Titel schon vermuten lässt, geht es hier um eine einfache aber elegante Lösung um dem Waipoua Theme von Elmastudio ein Kontaktformular zu spendieren. Klar es gibt wieder jede Menge Plugin Lösungen, doch in meiner Serie geht es ja um Möglichkeiten ohne Plugin.

Die Themes von Elmastudio sollte mittlerweile so ziemlich jeder Blogger kennen und meine Lösung dürfte mit fast allen Themes von Ellen funktionieren. Es reicht völlig aus eine PHP Datei (contact.php) mit folgendem Inhalt im aktuellen Theme Ordner abzulegen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php
  /*
  Template Name: Kontaktformular
  */
 
if(isset($_POST['submitted'])) {
  if(trim($_POST['contactName']) === '') {
	$nameError = 'Fehler: Füllen Sie alle Felder aus!';
	$hasError = true;
  } else {
	$name = trim($_POST['contactName']);
  }
  if(trim($_POST['contactEmail']) === '')  {
	$emailError = 'Fehler: Füllen Sie alle Felder aus!';
	$hasError = true;
  } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['contactEmail']))) {
	$emailError = 'Die eMail-Adresse ist ungültig, korrigieren Sie die Eingabe.';
	$hasError = true;
  } else {
	$eMail = trim($_POST['contactEmail']);
  }
  if(trim($_POST['contactSubject']) === '') {
	$subjectError = 'Fehler: Füllen Sie alle Felder aus!';
	$hasError = true;
  } else {
	if(function_exists('stripslashes')) {
	  $subject = stripslashes(trim($_POST['contactSubject']));
	} else {
	  $subject = trim($_POST['contactSubject']);
	}
  }
  if(trim($_POST['contactMessage']) === '') {
	$messageError = 'Fehler: Füllen Sie alle Felder aus!';
	$hasError = true;
  } else {
	if(function_exists('stripslashes')) {
	  $message = stripslashes(trim($_POST['contactMessage']));
	} else {
	  $message = trim($_POST['contactMessage']);
	}
  }
  if(!isset($hasError)) {
	$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;
	$sentmessage = "Nachricht erfolgreich gesendet";
  } else {
	$sentmessage = $messageError;
  }
}
 
 
get_header()
?>
  <div id="wrapper">
	<div id="content">
	  <?php the_post() ?>
	  <div id="post-<?php the_ID(); ?>" class="post">
		<div class="entry-form">
		</div>
			<div class="wpcf7" id="wpcf7-f2712-p20-o1">		
				<form action="<?php the_permalink(); ?>" method="post" class="wpcf7-form">
					<div style="display: none;">
						<input type="hidden" name="_wpcf7" value="2712">
						<input type="hidden" name="_wpcf7_version" value="3.2.1">
						<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2712-p20-o1">
						<input type="hidden" name="_wpnonce" value="77252d9cef">
					</div>
				<p>Ihr Name (Pflichtfeld)<br>
					<span class="wpcf7-form-control-wrap your-name"><input type="text" name="contactName" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40"></span> </p>
				<p>Ihre E-Mail-Adresse (Pflichtfeld)<br>
					<span class="wpcf7-form-control-wrap your-email"><input type="text" name="contactEmail" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40"></span> </p>
				<p>Betreff<br>
					<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="contactSubject" value="" class="wpcf7-form-control wpcf7-text" size="40"></span> </p>
				<p>Ihre Nachricht<br>
					<span class="wpcf7-form-control-wrap your-message"><textarea name="contactMessage" class="wpcf7-form-control  wpcf7-textarea" cols="40" rows="10"></textarea></span> </p>
				<p><strong><?php echo $sentmessage; ?></strong></p>
				<p><input type="submit" name="submitted" value="Senden" class="wpcf7-form-control  wpcf7-submit"></p>
				<div class="wpcf7-response-output wpcf7-display-none"></div></form>
 
			</div>
	  </div>
	</div>
  </div>
<?php
  get_sidebar();
  get_footer();
?>

Wie wird das Template Aktiviert?

Einfach eine neue leere Seite in WordPress anlegen und als Template das Kontaktformular aktivieren.

Design?

Da Ellen ein CSS Style von dem weit verbreitetem Plugin “Contact Form 7″ integriert hat, entfällt das lästige Stylen. Ich habe einfach die gleichen CSS Klassen definiert und so greifen Ellen’s CSS Anweisungen.
Mein eigenes Kontaktformular läuft auch mit diesem Script, jedoch mit einer kleinen Abweichung. Ich habe die Sidebar entfernt und auf Fullwidth umgestellt (Geschmacksache).

Alle Artikel zu dieser Serie:

  1. WordPress DoFollow ohne Plugin
  2. WordPress PHP Widget ohne Plugin
  3. Waipoua Theme Kontaktformular ohne Plugin

11 Kommentare » Schreibe einen Kommentar

  1. Pingback: WordPress-Kontaktformular ohne Plugin | You Big Blog

  2. Super Genial,
    ein so schönes Kontaktformular ganz ohne Plugin. Du hast eh eine tolle Seite, muss ich mir gleich mal deinen Feed speichern.

  3. Hallo Stefan,

    das ist ja mal eine wirklich schöne, schlanke Lösung. Da werde ich das fast secure contactform wohl wieder rauswerfen.

    Wie sieht es denn mit dem Spamschutz aus, greift z.B. AntiSpamBee bei dieser Art Kontaktformular?

    Danke und Gruß
    Björn

    • Im Kontaktformular ist ein Spamschutz integriert. Es gibt mehrere versteckte Felder, die ein Spambot logischerweise mit ausfüllt. Auch AntispamBee macht das auf die Art und Weise, soweit es mir bekannt ist. Ich zumindest habe überhaupt keine Spam Probleme.

      LG Stefan

  4. Mal ausprobieren, ob das mit anderen Themes auch geht. Vielleicht muss man das eine oder andere anpasssen. Ich hatte nur grad ein ungeschütztes offenes Formular, und man kann sich gar nicht vorstellen wie das zugespammt wird. Nerv! Und bei den meisten Plugins brauchst Du noch zusätzlich ein Captcha-Modul oder sonstwas …

  5. ich hätte echt nicht gedacht, dass es so einfach funktioniert. habs ausprobiert und siehe da nach ein-zwei anläufen wars dann auch genau so wie ich es mir gewünscht hab. danke.

  6. ich kann mir nicht vorstellen, dass dies so einfach sein soll, werde es aber auch mal ausprobieren und wär super dankbar, wenn es klappt. Sind bei den anderen vlt typische Tücken aufgetaucht, auf dich ich achten sollte?

  7. Wenn ich das richtig verstanden habe, arbeitet das Formular Plugin mit einem Honeypot-Feld im Formular, oder?! Wenn ein Bot das ausfüllt, ist klar, dass es kein Mensch war, denn das Feld wird per CSS vor Menschen “versteckt”. Und die Bots wollen natürlich immer alles ausfüllen, damit keine Meldung kommt, sie hätten ein Pflichtfeld vergessen… eigentlich eine einfache aber geniale Anti-Spam-Technik. :)

  8. Ich nutze seit einigen Monaten WordPress. Dabei nutze ich dies nicht als reinen Blog sondern setze damit auch normale Webseiten um . Mir gefällt an WordPress die unendlichen Anpassungen und erweiterungen. Bisher habe ich alles mit Widget und Plugins gemach. Auch das Kontaktformular. Dies hat mir aber bisher noch nicht so gefallen, so dass ich deins mal testen werde.

Achtung an alle Backlinksammler: Backlinks auf Moneysites werden gnadenlos entfernt.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>