Contact Form 7 ist mit über 1 Million Downloads eines der beliebtesten und verbreitetsten WordPress Plugins für Kontakt-Formulare. Es ist einfach zu bedienen, bietet viele nützliche Funktionen und ist zudem auch noch kostenlos.
Da sich gerade WordPress-Einsteiger beim Einrichten von CF7 schwer tun, habe ich eine kurze Anleitung mit Beispiel geschrieben.

Contact Form 7 Anleitung

In dieser kurzen Anleitung erfahren Sie Step by Step, wie Sie mit Contact Form 7 ein einfaches und optisch ansprechendes Kontaktformular auf Ihrer Seite einbinden können.

Letztes Update der Anleitung erfolgte am 25.10.2016 und bezieht sich auf Contact Form 7, Version 4.4.

1. Contact Form 7 installieren

Gehen Sie zunüchst in Ihrem WordPress-Dashboard auf Plugins > Plugins installieren und suchen Sie nach Contact Form 7. Nun müssen Sie einfach auf installieren klicken und das Plugin wird heruntergeladen und installiert.
Alternativ können Sie Contact Form 7 auch downloaden, per FTP auf Ihren Server hochladen und im WordPress-Dashboard aktivieren.

Contact Form 7 installieren

Nachdem Sie das Plugin aktiviert haben, sehen Sie links im Menü einen neuen Eintrag Formulare.
Hier finden Sie unter Kontaktformulare schon ein einfaches Standardformular, mit dem wir gleich starten können.

Contact Form 7 - Standardformular

Vorgefertigtes Standardformular

2. Kontaktformular in die Seite einfügen

Damit das Formular auch auf Ihrer Webseite angezeigt wird, fügen Sie den Shortcode in die entsprechende Seite oder Blogartikel ein.

[ contact-form-7 id="51" title="Kontaktformular 1"]
Contact Form 7 Shortcode

CF7 Shortcode in Seite einfügen

Für unser Beispiel habe ich eine statische Kontaktseite angelegt, die nur das Formular enthält.

Die Webansicht des Formulars sieht dann so aus:

Standardformular

Formularansicht im Browser

 

3. Formular-Felder einbauen

Um dem Kontaktformular weitere Felder hinzuzufügen, klicken Sie einfach in der oberen Leiste auf das gewünschte Formular-Element.

Contact Form 7 - Tags

Formularfelder einfügen

 

CF7 öffnet nun den Form-Tag Generator in einem Popup-Fenster. Hier lassen sich zu dem Formular Feld weitere Details einstellen.

cf7 form-tag generator

Detaillierte Einstellung des Formularelements

Formular-Tag generieren

In diesem Beispiel wähle ich Telefonnummer aus und kann anschließend im Tag Generator weitere Einstellungen vornehmen:

  • Pflichtfeld: muss das Feld ausgefüllt werden?
  • Name: Feldbezeichnung
  • id/class: hier können Namen für CSS-Ids oder -Klassen eingetragen werden
  • size: Länge des Feldes
  • maxlength: Beschränkung auf eine bestimmte Zeichenzahl
  • Standardwert: wird im Formularfeld als Standard angezeigt
  • als Platzhalter nutzen: den Feldnamen statt über dem Feld innerhalb des Feldes anzeigen

Feld ins Formular übernehmen

In der Vorgängerversion von Contact Form 7 musste man das generierte Form-Element manuell in das Formular einfügen.
Inzwischen genügt ein Klick auf Insert Tag im Popup und schon wird das Feld dem Formular hinzugefügt.

4. CF7 E-Mails anpassen

Nach Absenden des Kontaktformulars versendet Contact Form 7 standardmäßig eine E-Mail an die in WordPress hinterlegte E-Mail-Adresse. Wenn Sie diese ändern möchten oder neue Felder einfügen möchten, können Sie das im unteren Abschnitt E-Mail tun.

Neues Feld in E-Mail übernehmen

Um den Wert des neuen Feldes, also die Telefonnummer, auch per Mail zu erhalten, klicken Sie einfach oben auf den Reiter E-Mail.
Alle zuvor angelegten Formularelemente stehen nun zur Auswahl und können per Klick in die Mail übernommen werden.

 

cf7 Email

In diesem Bereich von Contact Form 7 legen Sie fest, welche Inhalte die Formular-Email enthält und an welche Mail-Adresse das Formular gesendet werden soll.
Im Standard trägt CF7 hier die in WordPress hinterlegte E-Mail-Adresse ein. Wenn das Formular an eine andere Adresse gesendet werden soll, können Sie diese hier eintragen.

5. Formular-Kopie oder Bestätigungsmail versenden

Neben der E-Mail, die Sie selbst erhalten, können Sie auch dem Absender des Formulars automatisch eine E-Mail senden.

Abschnitt E-Mail (2)

Möchten Sie dem Formular-Absender eine Kopie der E-Mail senden? Dann setzten Sie einfach ein Häkchen bei Verwende E-Mail (2).
Natürlich können Sie auch statt der Formular-Kopie einen eigenen Text als Bestätigung versenden. Geben Sie diesen einfach in das Feld Nachrichtentext ein.

cf7 erweiterte Maileinstellung

Anpassungen für Mailversand

6. Contact Form 7 Styling

Das Formular sollte nun problemlos funktionieren, allerdings gefällt mir das Design noch nicht so recht.

Felder anpassen

Als erstes entferne ich die Beschriftung der Formularfelder und füge Sie anschließend innerhalb des Feldes wieder ein. Das geht ganz einfach über den Zusatz placeholder“Feldbezeichnung“:


[ email* your-email placeholder"Ihre E-Mail-Adresse*" ]

Da mir der Textbereich „Ihre Nachricht“ zu groß ist, beschränke ich die Ansicht auf 4 Zeilen durch den Zusatz x4:

[ textarea your-message x4 placeholder"Ihre Nachricht"]

Das Kontaktformular sollte nun in etwa so aussehen:

cf7-10

Design mit CSS anpassen

Um das Kontaktformular optisch noch etwas aufzupeppen, ändere ich durch ein paar CSS-Anweisungen das Formular-Design.
Contact Form 7 ermöglicht es, jedem Formular eine eigene ID zuzuweisen. Hierdurch kann man jedes Formular individuell gestalten. Dies ist besonders wichtig, wenn man mehrere Formulare mit unterschiedlichen Designs auf seiner Webseite nutzt.

Ergänzen Sie einfach den Shortcode auf Ihrer Kontaktseite (Step 2) um den Zusatz html_id=“anfrage“

[ contact-form-7 id="51" title="Kontaktformular 1" html_id="anfrage"]

Nun können Sie genau dieses eine Kontaktformular mit CSS stylen! Den CSS-Code können Sie entweder in Ihr (Child-) Theme einfügen oder das Plugin Simple Custom CSS nutzen.

#anfrage {
  background:#303F9F;
  padding:20px 15px 0 15px;
  border-radius:5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
}
.form_half {
width: 49.5%;
float: left;
margin-right: 1%;
}
.form_half_last {margin-right:0;
}
#anfrage input {
  width:100%;
}
#anfrage input[type="submit"] {
  background:#FFA500;
padding:20px;
  font-size:18px;
}
#anfrage input[type="submit"]:hover {
  background:#8BC34A;
}
#anfrage input:focus {
  border:1px solid #ffa500;
  background:#FFF9C4;
}
#anfrage div.wpcf7-response-output {
  background:#fff;
  padding: 1.5em 1em;
}

Contact Form 7 Formularfelder in 2 Spalten anzeigen

Normalerweise werden die einzelnen Felder in CF7 untereinander angeordnet. Mit ein wenig CSS kann man dies aber schnell ändern:
Beide Felder, die nebeneinander angezeigt werden sollten, erhalten die Klasse .form_half und sind nun nur noch 49% breit.

<div class="form_half">Feld1 links</div>
<div class="form_half form_half_last">Feld2 rechts</div>

Damit das Formular auch auf Handys optimal dargestellt wird, werden die Felder wieder untereinander und nicht in zwei Spalten angezeigt. Dies kann man einfach über eine Media Query steuern.


.form_half {
    width: 49.5%;
    float: left;
    margin-right: 1%;
}

.form_half_last {
    margin-right: 0px;
}


@media (max-width: 767px) {

	.form_half {
	width: 100%;

	}
}
cf7 felder in spalten

Screenshot: Formular mit Ergänzungen für die 2-spaltige Anzeige der Felder

Das mit Contact Form 7 erstellte Kontaktformular ist fertig!

cf7-11

7. Fehler & Probleme

Seit der Version 4.4 von CF7 erhalten viele Benutzer einen Hinweis auf falsch konfigurierte Formulare. Klickt man im entsprechenden Formular auf den eMail-Reiter, erscheint die Fehlermeldung:

This email address does not belong to the same domain as the site.
contact form 7 fehlermeldung

Den Fehler kann man ganz einfach beheben, indem man im Feld From die Mailadresse des Servers einträgt. Damit man die Mail auch wieder über den Antworten-Button in seinem Mail-Programm beantworten kann, muss man noch das Feld Additional Headers ausfüllen.

Reply-To: [your-email]

Eine weitere mögliche Fehlermeldung für das Feld Betreff lautet:
This field can be empty depending on user input.
Damit ist gemeint, dass derBenutzer eine Mail ohne ausgefüllten Betreff absenden könnte. Damit diese dann nicht als Spam eingestuft wird, sollte man den Betreff entweder zum Pflichtfeld machen oder einen eigenen Betreff vorgeben.

cf7 Fehlermeldung Betreff beheben

 

Der Fehler lässt sich ganz einfach im Formular-Tab beheben, indem man einen Asterisk (als Zeichen für ein Pflichtfeld) hizufügt:

[text* your-subject]

 

Weitere Tipps:

 

Das könnte auch interessant sein: