☎ Telefon: 030 702 240 22    ✉ info@pixo-webdesign.de

Contact Form 7 Tutorial / Anleitung – Formular

Contact Form 7 Tutorial / Anleitung – Formular
2
Jul

Du bist auf der Suche nach einem Kontaktformular für WordPress und hast jetzt dieses Contact Form 7 Tutorial gefunden? Dann gratuliere ich dir, du hast das anwederfreundlichste und zugleich umfangreichste Kontaktformular gefunden. Ich werde dir nun zeigen wie du es installierst und konfigurierst. Jetzt sogar mit einer optisch überarbeiteten Version von 2012 😉 Auf gehts!

Contact Form 7 Tutorial – Die Installation und Einrichtung

Als erstes musst du dich in WordPress einloggen und auf Plugins klicken, dort auf installieren. Suche nun das Plugin “Contact Form 7” sowie “Really Simple CAPTCHA”. Nach dem download nur noch installieren und auf aktivieren klicken. Wenn der aktivieren Knopf nicht kommt, dann unter Plugins schauen und dort den haken setzen. Alternativ kannst du das Plugin für Contact Form 7 tutorial hier runterladen.

Installation vom contact form 7 tutorial

Nach der Installation ist ein neuer Reiter “Formular” erschienen, klicke auf den Menüpunkt “bearbeiten”. Auf der neu geöffneten Seite nimmt man die konfiguration vor, für die man keinen besondere Programmierkenntnisse benötigt. Links ist das “Formular”, welches man bearbeiten kann und rechts ist ein “Generiere Tag” Button. Standardmäßig stehen im Formular folgende Angaben:

<p>Ihr Name (Pflichtfeld)<br /> [text* your-name] </p>
<p>Ihre Email (Pflichtfeld)<br /> [email* your-email] </p>
<p>Betreff<br /> [text your-subject] </p>
<p>Ihre Nachricht<br /> [textarea your-message] </p>
<p>[submit “Senden”]</p>

Klicke rechts auf “Publizieren”, um fortzufahren. Um zu testen ob das ganze läuft, kopiere den braun unterlegten Text oben [contact-form-1 “Kontaktformular 1”] und füge diesen auf einer Seite deiner Wahl im visuellen Editor ein. Ein klick auf die Vorschau wird dir nun das Formular zeigen.

Spam verhindern mit Captcha – Contact Form 7 Tutorial

Um die Sicherheit zu erhöhen und Spam zu vermeiden, ist es wichtig das installierte Captcha in das Formular zu integrieren.  Klicke dafür rechts auf “Generiere Tag” und wähle dort das Captcha aus. Alle Eingaben sind optional, unten jedoch sind zwei Codezeilen die kopiert werden müssen und unter das Contact Form 7 Formular eingefügt werden müssen.

Hinzufügen von Formular Feldern im Kontaktformular

Fehlende Formular felder contact form 7 tutorial

Um jetzt selber fehlende Felder, wie z.B. eine Telefonnummer oder Anrede einzutragen klickt man wieder auf “Generiere Tag” und wählt “Text Feld”. Nun kann sich für einen Namen entscheiden und ob es ein Pflichtfeld ist oder nicht, Pflichtfelder müssen vom Besucher ausgefüllt werden. Um es sich einfach zu machen kopiert man nun eine vorhande Codezeile: <p>Ihr Name (Pflichtfeld)<br /> [text* your-name] </p>

Die erste Zeile sieht der Besucher und die untere Zeile ist für das System, für unser Beispiel wäre es nun sinnvoll den unteren Teil mit dem was rechts unten im braunen Bereich in Eckklammern steht zu ersetzen und statt “Ihr Name” schreibt man nun  “Ihre Telefonnumer”. Jetzt muss nur noch das Wort [Telefonnummer ] in den Nachrichtentext rechts unten kopiert werden, damit man die Telefonnumer auch übermittelt bekommt.

E-Mail angaben Contact Form 7 Tutorial

Hosteurope Probleme mit Contact Form 7 Tutorial

Hosteurope Probleme mit Contact Form 7 Tutorial

Falls beim testen des Contact form 7 Plugin folgende Meldung bekommen “Das versenden der Nachricht war fehlerhaft. Bitte versuchen Sie es noch einmal zu einem späteren Zeitpunkt oder informieren Sie den Administrator.” und die Website bei Hosteurope gehostet ist muss folgendes gemacht werden:

Öffnen das KIS Menü (kis.hosteurope.de) und klicke auf “Administration”, dort muss das Hosting Paket gewählt werden z.B. Managed Server, dann auf “Scripte” und weiter auf “Standart E-Mail Adressen”. Dort muss die Standart E-Mail eingetragen werden, dann sollte alles funktionieren.

Allgemeine Fragen zum Kontaktformular Plugin

Um die Größe der Felder zu ändern müsst ihr wie in diesem Beispiel die Zahlen anpassen.
[textarea your-message 30×10 “deine Nachricht”]
Die erste Zahl bezieht sich auf die Breite und die zweite Zahl auf die Höhe.

Wenn du die Farbe der Meldungen ändern möchtest, u.a. das die Mitteilung erfolgreich versendet wurde usw., dann gehe wie folgt for:

Im Administrationsbereich links auf “Design” und dann auf “Editor” klicken, dort bist du normalerweise direkt in der “style.css”.  Suche dort nach der ersten Zeile der Codes z.B. “span.wpcf7-not-valid-tip”.

Bitte ändere deinen Code dann wie folgt:
ACHTUNG! Backup machen, also ein mal in den Editor kopieren, damit du es noch hast. Beim updaten des Plugins musst du das natürlich wieder neu einfügen.

Hinweis: “color” gefolgt von “fff” oder anderen 3-6 stelligen Codes steht für die Farbe der Meldung. Hier findest du die passenden HTML Farbcodes, einfach das fff damit ersetzen (# nicht vergessen).

Farbe der Meldung für inkorrekte Eingabe
span.wpcf7-not-valid-tip {
color: #f00;
display: block;
font-size: 1em;
}

ändern in:

span.wpcf7-not-valid-tip {
color: #fff;
display: block;
font-size: 1em;
}

 

div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
}

ändern in:

div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
color: #fff;
}

Farbe der Meldung für erfolgreiches senden

div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
}

ändern in

div.wpcf7-mail-sent-ok {
border: 2px solid #fff;
}

Comments

  • 30. September 2014

    Grüßt Euch!
    Beim Suchen nach einer Antwort auf meine Frage bin ich hier gelandet und hoffe, richtig zu sein!
    Habe ein Formular mit mehreren Tags und diversen Checkboxen erstellt (Seminaranmeldung). Soweit alles schön und gut, mich stört nur, dass in der Email die Resultate eines Tags jeweils in einer Zeile aufgereiht werden. Wäre sehr viel kommoder mit Zeilenumbruch. Die Frage begegnete mir häufiger in Foren – stets unbeantwortet. Habt Ihr eine Idee?
    Mit hoffnungsvollen Grüßen
    Claudia

    • Pixo Webdesign
      1. Oktober 2014

      Hallo Claudia,

      normalerweise packt er die ausgehenden Nachrichten untereinander nicht nebeneinander. Vorausgesetzt du hast es im rechten Formular Fenster auch untereinander angeordnet. Wenn du alles nebeneinander packst, wird das Ergebnis auch nebeneinander ausgegeben.
      Schau mal auf den Screenshot: http://www.fotos-hochladen.net/uploads/formg2ob9qxnui.jpg

      • 1. Oktober 2014

        Danke für die prompte Antwort – das Problem ist ein Anderes: ich habe Mehrfachauswahl-Checkboxen wie “wahl 1”-“wahl 2” etc., mit noch mehr Posten – im Formular habe ich es auch schön untereinander hinbekommen:
        http://www.fotos-hochladen.net/uploads/bildschirmfotoehvqw83pu6.png
        aber die mehreren Kurse eines Tags, die evtl. ausgewählt werden, hätte ich in der email gern übersichtlich untereinander zB
        wahl 1
        wahl 3
        (die Blocks an sich sind schon mit Überschriften versehen und gut getrennt).
        Geht das?
        Beste Grüße
        Claudia

        Grüßt Euch!
        Beim Suchen nach einer Antwort auf meine Frage bin ich hier gelandet und hoffe, richtig zu sein!
        Habe ein Formular mit mehreren Tags und diversen Checkboxen erstellt (Seminaranmeldung). Soweit alles schön und gut, mich stört nur, dass in der Email die Resultate eines Tags jeweils in einer Zeile aufgereiht werden. Wäre sehr viel kommoder mit Zeilenumbruch. Die Frage begegnete mir häufiger in Foren – stets unbeantwortet. Habt Ihr eine Idee?
        Mit hoffnungsvollen Grüßen
        Claudia

        • Pixo Webdesign
          1. Oktober 2014

          Schick mir mal die Linke und rechts Spalte von deinem Kontaktformular damit ich das nachvollziehen kann. Also den Code für die Seite und für die Mail im Kontaktformular.
          Grüße

          • 1. Oktober 2014

            Hab ich an die emailadresse geschickt …

  • 7. September 2014

    Hi, sehr hilfreiche Seite, Kompliment!
    Habe eine kurze Frage, weil ich zwar schon einiges gesucht und gefunden habe, aber scheinbar geistig zu limitiert bin um die Umsetzung hinzubekommen:
    Wie in aller Welt kann ich die Höhe eines bestimmten textarea-Feldes ändern? Die Breite und die Anzahl der Zeichen sind ganz einfach im Formular einzufügen, aber die Höhe nicht? Ich finde das schon extrem seltsam, würde mich aber auch durchaus mit einem Workaround zufrieden geben. Hast du zufällig eine Idee? Hatte gehofft über die styles.css weiterzukommen, aber da finde ich nichts – keinen Eintrag zu Contact Form 7.
    Beste Grüße, Christoph

    • Pixo Webdesign
      7. September 2014

      Hallo Christoph!
      Ersetze mal dein Nachrichten Code mit folgenden:
      [textarea your-message 40x10 "Deine Nachricht"]
      Mit den beiden Zahlen beeinflusst du die Spalten und Zeilen.
      Ich hoffe das beantwortet deine Frage.

      Gruß Björn

  • 29. August 2014

    Hey, erst einmal danke für die Tipps!

    Weißt du wie man die Farbe bei den Statusmeldungen z.b. Erfolgreich versendet – anpasst? Ich habe das Problem, dass meine Seite einen schwarzen Hintergrund hat und die Schrift auch einen schwarz Ton verwendet. Danke im Voraus

    • Pixo Webdesign
      29. August 2014

      Hallo Martin, schön das dir das Contact Form 7 Tutorial gefällt.
      Bitte gehe im Backend auf Design – Editor, dort bist du normalerweise direkt in der style.css suche dort nach der ersten Zeile der Codes z.B. span.wpcf7-not-valid-tip.. Bitte ändere deinen Code dann wie folgt:
      ACHTUNG! Backup machen, also ein mal in den Editor kopieren, damit du es noch hast. Beim updaten musst du das natürlich wieder neu einfügen.

      ——————————–
      span.wpcf7-not-valid-tip {
      color: #f00;
      display: block;
      font-size: 1em;
      }

      ändern in:

      span.wpcf7-not-valid-tip {
      color: #fff;
      display: block;
      font-size: 1em;
      }

      ——————————-

      div.wpcf7-response-output {
      margin: 2em 0.5em 1em;
      padding: 0.2em 1em;
      }

      ändern in:

      div.wpcf7-response-output {
      margin: 2em 0.5em 1em;
      padding: 0.2em 1em;
      color: #fff;
      }

      ——————————–

      div.wpcf7-mail-sent-ok {
      border: 2px solid #398f14;
      }

      ändern in

      div.wpcf7-mail-sent-ok {
      border: 2px solid #fff;
      }

      ———————————

  • peter
    8. Mai 2013

    Hallo,

    sehr schöne Beschreibung, hat auch alles soweit funktioniert. Allerdings bekomme ich diese Fehlermeldung "Das versenden der Nachricht war fehlerhaft. Bitte versuchen Sie es noch einmal zu einem späteren Zeitpunkt oder informieren Sie den Administrator." auch. Ich habe meine Seite allerdings bei bplaced.net gehosted und da finde ich keine Möglichkeit, eine Mailadresse anzugeben (ausser der, die ich bei der Anmeldung verwendet habe).

    Habe ich denn da in der Konfiguration des Plugins übersehen? Wie wird denn die Mail versandt?

    Vielen Dank für die Hilfe im voraus.

    Grüße.

  • 2. April 2013

    Hallo,

    ich habe ein Problem mit Contact Form 7 und komme einfach nicht weiter.

    Es war alles am laufen, dann ist die url von A nach B gezogen. Die emails blieben aber wie bisher stehen. Nun ist es so, dass die Emails auch richtig ankommen,, aber zusätzlich eine Mail generiert wird, die an www-data@neue url.de geschickt wird. Dabei handelt es sich um eine Nachricht, dass die Mail angeblich nicht versendet worden ist. Allerdings kommt Sie bei der neuen URL richtig an.

    Die beiden urla also, die für die richtigen emails ist bei hosteurope gehostet und die eigentliche domain, neuerdings bei all-inkl.

    Wäre für Anregungen sehr dankbar, da ich derzeit die Hostingsituation leider nicht ändern kann.

    Vielen Dank

    Liebe Grüße

    Kerstin

    • Pixo Webdesign
      2. April 2013

      Sorry Kerstin ich verstehe deine Frage um erlich zu sein überhaupt nicht… Ruf bitte mal bei Hosteurope an, die helfen bei script fehlern im regelfall weiter.. Kannst denen ja sagen das deine Mail nicht ankommt. Bei Hosteurope ist das mit contact form 7 eh nicht so einfach (siehe oben).

      Grüße

      • 2. April 2013

        Hallo,

        vielen Dank für die Antwort! Hosteurope lief ja immer, habe aber jetzt festgestellt, das wohl ein SMTP Problem vorliegt, wenn die Domain bei Contact Form 7 auf einer anderen url/Provider liegt als die Emailadresse.

        Komme der Lösung als langsam näher…

        • Pixo Webdesign
          2. April 2013

          Hilft das evtl? http://wordpress.org/extend/plugins/wp-mail-smtp/
          Neuinstallation schon probiert?
          Ansonsten mal anrufen beim neuen Provider, hab im Internet nur gelesen das Contact Form 7 bei Server wechsel gerne ma rumzickt. Ich kann dir ausm stehgreif leider keinen weiteren Tipp geben :/

  • Andreas
    24. März 2013

    Huhu .. super Seite,
    ich habe eine Frage, bei der ich einfach nicht weiter komme.
    Wie und wo kann ich die Höhe des Eingabefeldes definieren?

    Gruß

    • Pixo Webdesign
      24. März 2013

      Hallo Andreas,

      was genau meinst du mit "Höhe des Eingabefeldes definieren"? Meinst du die generelle Höhe der Formulare in Contact Form 7? Ich würde empfelen wenn du ein paar CSS Kenntnisse hast eigene Klassen zu setzen und eine eigene CSS, dann wird dir das ganze nicht bei jedem WordPress Update überschrieben.

      Hier ist ein Link von einem kleinen tutorial, wie man sein contact form 7 stylen kann (auch die höhe)..

      http://www.ejhansel.com/style-the-contact-form-7-wordpress-plugin/

      Ich hoffe die Antwort reicht erstmal, ist Wochenende und ich bin faul 🙂

  • Silvia Grauer
    21. November 2012

    Hallo,
    nach der Installation der beiden angegebenen Plugins erscheint bei mir im Menü kein Reiter “Formular”.
    Danke für die Hilfe!
    Silvia

    • Pixo Webdesign
      21. November 2012

      Ist das Plugin auch aktiviert? Mal Unter Plugins schauen ob es aktiviert ist.

      • Silvia Grauer
        21. November 2012

        Jo, ist aktiviert! 🙂

        • Silvia Grauer
          21. November 2012

          Habe die beiden Plugins gelöscht und neu intalliert – jetzt geht es! Danke

          • Pixo Webdesign
            21. November 2012

            Freut mich 🙂
            Hätte mich auch gewundert, wenn das nicht geholfen hätte.. ^^

  • 17. November 2012

    Hallo bin durch Google hier gelandet und hätte auch eine Frage zum Plugin:

    Wie bekomme ich den roten Kasten mit der Fehlermeldung weg vom Eingabefeld?
    Vor allem stört es das der Kasten beim Drüberfahren mit der Maus nicht verschwindet.
    Auch eine Meldung nach erfolgreichem Versenden erfolgt nicht.

    Schon einmal vielen Dank für eine Antwort.

    • Pixo Webdesign
      17. November 2012

      Öffne die CSS Datei vom Contact Form 7 zB mit FTP
      wp-content/plugins/contact-form-7/style.css

      Dann bei den unten stehenden Einträgen die farbe löschen. BACKUP MACHEN!!
      Es geht um diese farbe denke ich mal: #ff0000

      div.wpcf7-mail-sent-ok {
      }

      div.wpcf7-mail-sent-ng {
      }

      div.wpcf7-spam-blocked {
      }

      div.wpcf7-validation-errors {
      }

      Der Kasten verschwindet doch beim rüberfahren mit der Maus? Einfach mal bei meinem Kontaktformular schauen. Hört sich an als wenn du generell irgend nen Fehler gemacht hast.
      Versand Meldung müsste eigentlich auch erscheinen.
      Schau mal auf den Link:
      http://pixo-webdesign.de/download/versendet.JPG

      • 17. November 2012

        Erst einmal vielen lieben Dank für die schnelle Antwort.

        Ich habe mal nen Test-Artikel unsichtbar veröffentlicht:
        http://www.heavenly-mangas.de/archives/8848

        Wenn du einfach ohne Eingaben “Senden” drückst dann siehst du was ich meine.

        • Pixo Webdesign
          17. November 2012

          Hi,

          ich habs jetzt nicht überprüft, aber das kann zB an Plugins liegen oder am Theme, die dazwischen funken.

          Du könntest beigehen und die Plugins mal deaktivieren und zu schaun obs dann klappt. Selber gilt fürs Theme. (Backup)

          Ansonsten probiere doch eine alternative aus, da gibs ja viele andere, meist braucht man ja nicht 1000 Funktionen.
          (contact form)



          Probier mal folgendes: Pack in den Formular Teil von Contact Form 7 wo du möchtest, z.B. ganz oben und ganz unten folgenden Code Schnipsel: [response]

          Grüße

  • lex
    18. Oktober 2012

    Kleiner Hinweis:
    Bei der Größenangabe für die einzelnen Felder (z.B. 40×30) beeinflusst die 2. Zahl nicht die Höhe, sondern die Zahl der im jeweiligen Feld zulässigen Zeichen.

    • Pixo Webdesign
      18. Oktober 2012

      Hi lex,

      das stimmt natürlich 🙂
      Danke für den Hinweis, müsste jetzt geändert sein.

      Gruß Björn

  • 15. Oktober 2012

    Ich würde gerne eine Referenznummer mit in der E-Mail generieren, ich habe bis jetzt leider nichts gefunden. Eine Idee?

    MfG

  • Thorsten
    12. Oktober 2012

    Hallo

    Ich binde das Kontaktformular auf versch. Unterseiten ein und möchte URL und Titel in der Mail übermitteln, damit ich weiß, von welcher URL das Formular verschickt wurde. Any ideas?

    Gruß, Thorsten

    • Pixo Webdesign
      12. Oktober 2012

      Hallo Thorsten,

      eigentlich müsste man dafür nur auf “Neues Formular” oben klicken, dann das ganze wie beim ersten editieren und dann schreibt man rechts unten im Nachrichtentext die Seite rein von der es versendet wurde. Jedes mal wenn nun jemand von der Unterseite “B” schreibt steht dann “Dieser Text wurde von Seite B versendet”. Hoffe ich hab dich richtig verstanden.

      Grüße

  • joe
    24. September 2012

    hallo, wo kann ich den abstand zwischen den einzelnen feldern editieren?

    lieben dank und schöne grüße

    • Pixo Webdesign
      25. September 2012

      Hi, klicke dazu im Backend auf Plugins und dann Editor. Wähle oben das Contact Form 7 aus und öffne die “contact-form-7/styles.css”. Dort musst du oben bei dem Eintrag div.wpcf7 {margin: 0;padding: 0;} noch ein “line-height: 10px;” hinzufügen.

      Naja die Zahl 10 dann ändern gegen deinen Wert.

  • 17. September 2012

    Erklärung gefällt mir. Allerdings habe ich zu contact form 7 eine Frage. Was muss man tun das all Eingabefelder die gleiche Größe haben. Ich habe neueste Version. Ich vermute das im untersten Feld “zusätzliche Einstellungen” Eintragungen vorgenommen werden können oder muss ich in die CSS Datei?

    • Pixo Webdesign
      17. September 2012

      Hallo Muggle,

      es freut ich das der Artikel dir gefällt (Like?).
      Probiere es mal mit folgenden Code:
      [textarea your-message 30×10 “your message here”]

      Die 30 bezieht sich auf die Breite und die 10 auf die im jeweiligen Feld zulässigen Zeichen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.