9+ nützliche Erweiterungen für Contact Form 7

CF7 ist ein großartiges WordPress Plugin für den Einbau von Formularen. Aber Gelegentlich vermisst man die eine oder andere Funktion. Abhilfe schaffen hier Extensions. Also zusätzliche Erweiterungen, mit denen man benötigte Features nachrüsten kann. Einige der frei verfügbaren Add-Ons habe ich selbst schon getestet und möchte Dir diese kurz vorstellen.

Kostenlose Erweiterungen für CF 7

Wenn Du als CF7-Nutzer spezielle Funktionen wie z.B. einen Datepicker oder Bedingungsfelder benötigst, hast Du mehrere Möglichkeiten:

  1. Suche Dir ein anderes Plugin, das die gewünschten Features schon mitbringt. Eine gute Alternative ist z.B. Caldera Forms.
  2. Passe CF7 durch eine individuelle Programmierung an
  3. Sieh Dich nach einer passenden CF7 Erweiterung um

Gerade wenn Du Dich schon ein wenig in Contact Form 7 eingearbeitet hast, ist die 3. Möglichkeit am einfachsten. Solltest Du bei den AddOns nicht fündig werden, kannst Du immer noch ein anderes Plugin auswählen. Diese sind aber häufig kostenpflichtig, da sie auch einen größeren Funktionsumfang bieten.

Bis auf eine Ausnahme sind die hier vorgestellten Plugins spezielle Formular Erweiterungen für CF7. Also zusätzliche Plugins, die lediglich die bestehende Hauptfunktion erweitern. Daher funktionieren sie auch nur, wenn CF7 bereits installiert ist.

CF7 Customizer

contact form 7 customizer
CF7 Customizer für einfache Design Anpassungen

Wenn du das Design deines Kontaktformulars ohne Coden anpassen möchtest, ist CF7 Customizer genau das Richtige für dich!

Installiere zuerst das Plugin und rufe als nächstes die Seite mit dem Formular auf. Nun kannst du über einen neuen Menüpunkt im WordPress-Customizer das Formular anpassen. Folgende Elemente können angepasst werden:

  • Schriftgröße und Schriftfarbe
  • Hintergrundfarbe des Formulars und der Input Felder
  • Formular-Abstände
  • Buttons

Leider lassen sich die Felder damit nicht in 2 Spalten anordnen. Das geht nur via CSS.
Eine kurze Anleitung mi Code-Beispiel für die nötige Anpassung findest Du in meinem Tutorial Contact Form 7 einrichten.

Contact Form 7 Skins

cf7 skins
Formular-Design auf Basis von Templates und Farbschemata.

Das Add-On Contact Form7  Skins ermöglicht ein einfaches Formular-Styling. Nach Aktivierung des Plugins kannst Du für jedes Kontaktformular ein eigenes Design festlegen. Zur Auswahl stehen mehrere fertige Templates. Diese können dann mit verschiedenen Styles (Farben) kombiniert werden.

Auch hier gibt es leider keine Vorlage für mehrspaltige Layouts. Dafür gibt es zwar ein Add-On, das aber leider kostenpflichtig ist.

Contact Form DB

contact form db
Ein umfangreiches AddOn, das Formulardaten in einer Datenbank speichert.

Mit Contact Form DB kannst du den Inhalt von abgesendeten Formularen in einer Datenbank speichern. Die einzelnen Datensätze kannst du dann später bearbeiten. Entweder direkt im Backend verwalten oder auch exportieren.
Durch die Bestimmungen der DSGVO ist der Einsatz des Plugins aber problematisch, da das Speichern peronenbezogener Daten vermieden werden sollte.

Ebenfalls sehr nützlich: über Shortcodes können die gespeicherten Daten auch in Seiten oder Beiträgen angezeigt werden.

Das Plugin ist nicht nur als Contact Form 7 Erweiterung erhältlich. Es ist auch mit anderen Formular-Plugins kompatibel. Hier einige der bekanntesten:

  • Fast Secure Contact Form
  • JetPack Contact Form
  • Gravity Forms
  • Enfold Formulare
  • Formidable Forms (BETA)
  • Ninja Forms (BETA)
  • Caldera Forms (BETA)

Update: Das Plugin ist zwar nicht mehr im offiziellen Verzeichnis verfügbar, aber bei GitHub zu finden:

https://github.com/mdsimpson/contact-form-7-to-database-extension

Conditional Fields for Contact Form

conditional fields
Durch Conditional Logic können Felder je nach Bedingung angezeigt oder versteckt werden.

Eine Funktion, die nicht nur CF7-Nutzer vermissen: Conditional Logic, also Bedingungsfelder. Dadurch kannst Du festgelegte Felder eines Formulars nur unter bestimmten Bedingungen ein- oder auszublenden.

Vor allem bei umfangreichen Formularen ist dies für den Benutzer eine große Erleichterung. Denn so werden ihm keine unnötigen Felder angezeigt, sondern nur die für ihn zutreffenden.

Mit dem Addon Conditional Fields kannst du über Shortcodes Bedingungsfelder in ein Formular einbauen. Anschließend werden in einem extra Reiter die Bedingungen festlegen.

Contact Form 7 Datepicker

cf7 datepicker
Datepicker stellt ein Datumsfeld als Kalender mit Auswahlfunktion dar.

Contact Form 7 Datepicker ist eine nützliche Erweiterung, wenn man einen Kalender im Formular benötigt. Besonders interessant ist dies, wenn man sein Formular beispielsweise für Buchungen von Hotels oder Veranstaltungen nutzen möchte.

Über das Plugin wird jQuery UI in CF7 eingebunden, so dass beim Klick ins Datumsfeld ein Kalender aufpoppt. Dadurch kann der Benutzer ganz bequem das Datum auswählen.

Für die Darstellung des Kalenders kannst du aus mehreren Designvorlagen wählen.

Contact Form7: Autocomplete

autocomplete
AddOn für das Autovervollständigen von Texteingaben

Eine weitere Verbesserung der Benutzerfreundlichkeit bietet Autocomplete.
Diese Extension aktiviert für ein Feld das automatische Vervollständigen der Eingabe. Sobald der Benutzer den ersten Buchstaben in das Feld schreibt, werden ihm Vorschläge gemacht. Ganz so wie z.B. bei einer Suche in Google.

Contact Form 7 Honeypot

honeypot for cf7
Empfehlenswerte Extension zur Spam-Abwehr

Du bekommst zu viele Spam-Mails über dein Kontaktformular? Dann kannst du entweder ein Captcha-Plugin installieren oder du testet Contact Form 7 Honeypot.

Das Prinzip vom Honigtopf ist ganz einfach. Spam wird meistens von Bots versendet, die man mit einem Honeypot abfangen kann. Dazu wird ein zusätzliches Feld eingebaut, das für den Benutzer nicht sichtbar ist. Der Bot füllt es jedoch aus und wird somit als Spammer erkannt.
Im Gegensatz zu Captchas ist dieses Plugin für den Benutzer unsichtbar und erhöht somit die Usability.

Send PDF for Contact Form 7

send pdf cf7
Wandelt Formulareingaben in PDFs um

 

Ein noch recht neues Plugin ist Send the PDF for Contact Form. Wie der Name schon sagt, kannst Du damit aus den Formulareingaben ein PDF erstellen. Dieses kann dann als Download bereit gestellt werden oder direkt als Anhang an den Absender geschickt werden.

In meinen Tests hat der PDF-Versand problemlos funktioniert, nur an den Übersetzungen hakt es noch ein wenig. Aber vielleicht wird das in einem folgenden Update behoben.

Contact Form 7 Dynamic Text Extension

dynamic text extension cf7
Ermöglicht das Einfügen von dynamischen Inhalten

Contact Form 7 Dynamic Text Extension ist eine nützliche Formular-Erweiterung, wenn dynamische Inhalte übergeben werden sollen.
Das Plugin erweitert CF7 um 2 weitere Tags: dynamischer Text und versteckter dynamischer Text. Mit Hilfe von Shortcodes kann man so Felder vorausfüllen oder Felder mit versteckten dynamischen Inhalten übergeben.

Dadurch kann beispielsweise übermittelt werden, auf welcher Seite der Benutzer vor der Formular-Seite war. Oder auch von welcher Seite aus das Formular abgeschickt wurde.

Material Design For Contact Form

material design addon für cf7

Mit dem AddOn Material Design For Contact Form 7 verleihst Du Deinem Kontaktformular den typischen Material Design Look. Weiterhin liefert das Plugin auch die interaktiven Elemente mit: Z.B. den Ripple Effect, die nach oben gleitenden Feldbezeichnungen und animierte Checkboxen. Die Farben können bequem über den WordPress Customizer eingestellt werden.

Drag and Drop Multiple File Upload – Contact Form 7

CF7 Drag & Drop
Drag & Drop Uploader für Dateien

Standardmäßig funktioniert der Datei-Upload bei CF7 über einen einfachen Upload-Button. Doch die Erweiterung Drag and Drop Uploader ermöglicht es dem Nutzer, Dateien per Drag & Drop hochzuladen.

 

Fazit:

Ich selbst nutze Contact Form 7 sehr gerne! Und daher setze ich es auch häufig bei meinen Projekten ein. Hierbei reichen die Standardfunktionen in der Regel aus, nur das Design passe ich fast immer an. Allerdings nutze ich dafür keines der Customizer Plugins, sondern mache die Änderung direkt in CSS.
Von den anderen Erweiterungen verwende ich am häufigsten Honepot. Gelegentlich auch Datepicker oder Conditional Fields. Mit diesen AddOns habe ich bisher nur gute Erfahrungen gemacht und kann sie daher weiter empfehlen.

Wenn ich spezielle Funktionen wie z.B. Conditional Logic benötige, nutze ich CF7 inzwischen gar nicht mehr. Dafür ist Caldera Forms wesentlich besser geeignet.

Wie hat Dir dieser Beitrag gefallen? 1 Star2 Stars3 Stars4 Stars5 Stars (5 Bewertungen, Ø: 4,80 von 5)
Loading...

Dieser Beitrag hat 30 Kommentare

  1. User Avatar

    Hallo Sonia,

    ich habe die Anforderung, dass über das Formular keine E-Mail verschickt werden soll, sondern dass der Inhalt des Formulars an eine URL eines CRM-Systems geschickt werden soll. Ich arbeite mit DIVI und bin auf der Suche nach einem kompatiblen Plugin / Tool, habe aber noch keins gefunden, dass diese Möglichkeit bietet. Früher bin ich einfach in den HTML-Quelltext gegangen und habe die URL im Form-Tag mit method=”POST” und action=”URL” angegeben. Da war aber auch noch fast alles selbst gebastelt. Kennst du einen Weg wie ich das in Contact Form 7, Caldera, Gravity, … oder gar mit Divi Forms hinbegkommen?

    Ich wäre für Tipps sehr dankbar.

    Viele Grüße
    Jürgen

    1. Webtimiser

      Hallo Jürgen,
      vielleicht findest Du bei NinjaForms die passende Erweiterung: Ninjaforms-Webhooks

      Viele Grüße
      Sonia

  2. User Avatar

    Hallo zusammen,

    hat vielleicht jemand einen Tipp, wie man es erreicht, dass ein Nutzer zu Beginn des Formulars eine Datei speichert bzw. eine Checkbox dazu anklickt. Wenn er oder sie das nicht macht, darf es nicht weiter gehen:

    Hintergrund: Versicherungsmakler müssen sicherstellen, dass der potentielle Interessent vor dem Geschäftskontakt bzw. zu Beginn über den Status des Vermittlers informiert ist. Bin für jeden Tipp dankbar.

    1. Webtimiser

      Hallo Axelino,
      Du könntest doch einfach eine verpflichtende Checkbox einfügen wie hier beschrieben. Beim Text verlinkst Du dann das entsprechende Dokument oder die Detail-Seite.
      VG Sonia

      1. User Avatar

        Danke für den Tipp, so habe ich es dann auch gemacht!

  3. User Avatar

    Interessante Tips, eine Frage habe ich dabei noch. Kann ich aus den eingegebenen Daten automatisch eine TXT Datei generieren, die im anhang an mich mitgesendet wird? Geht das bei CF7

  4. User Avatar

    Guten Tag,

    ich habe ein Problem mit dem Dateiupload, und zwar ist der standardmässig ja auf 1MB beschränkt.
    Mit der Variabel Limit:xMB kann ich sie ja z.B. auf 5MB: limit:5MB erhöhen.
    Sobald ich diese Variable einbaue, funktioniert das Formular nicht mehr. Also sobald man auf senden klickt passiert einfach nichts mehr. Nehme ich die Variabel wieder raus funktioniert das wieder.

    Kann ich das Limit anpassen auf ca. 5MB pro Upload?

    Vielen Dank

    1. Webtimiser

      Hallo Jonas,

      am besten prüfst du mal die richtige Schreibweise. Es sollte ungefähr so aussehen: [UploadFile limit:5mb].
      VG Sonia

      1. User Avatar

        Hallo Sonia,

        vielen Dank für die schnelle Antwort.

        [file* Datei01 filetypes:.docx|.pdf|.xls|.xlsx|.doc|.jpeg|.jpg|.png id:File01 limit:5mb]

        So sieht mein Upload aus. Das sollte doch korrekt sein oder? Selbst wenn ich die filetypes rausmache geht es nicht. Sobald ich die Datei anhänge und das Formular senden will hängt es sich quasi auf. Der Ladekreis neben dem Sendenbutton kreiselt sich einen ab, aber passieren tut nichts.
        Nach einer Zeit läuft das Captcha dann aus….

        Hast du noch eine Idee? Ist das evtl. ein Bug? Ein Bug in meinem Script?

        Vielen Dank und VG
        Jonas

        1. Webtimiser

          Hallo Jonas,
          habe deinen Code getestet und bei mir funktioniert es prima. Vielleicht liegt eher es an dem Captcha? Kannst du es mal deaktivieren?
          VG Sonia

  5. User Avatar

    Gibt es auch eine Erweiterung die es erlaubt, das man die Anfragen über das Kontaktformular auf maximal 10 Anfragen begrenzt?! Ich möchte gerne ein kleines Bestellformular basteln, wo maximal 10 Anfragen an einem Tag gesenet werden können. Ist das möglich?

      1. User Avatar

        Hallo Sonya, vielen Dank! Ich werde es mal testen.

  6. User Avatar

    Ich bin seit etwa zwei Monaten dabei meine Website mit WordPress aufzubauen (bin neu und habe nicht so viel Erfahrung darin, außerdem habe ich es nicht eilig, daher dauert es so lange) 😉 Deine Tipps sind sehr hilfreich für mich und bringen mich gefühlt um Lichtjahre weiter 🙂 Danke sehr!!!

    Grüße aus Wuppertal

    1. Webtimiser

      Hallo Sascha,
      freut mich sehr, wenn meine Tipps dir weiterhelfen!
      Viele Grüße nach Wuppertal,
      Sonia

  7. User Avatar

    Hallo,

    danke für diese sehr nützliche Sammlung! Obwohl ich CF7 schon lange einsetze, fand ich für mich interessantes Neues.

    Frage: Gibt es auch eine Möglichkeit, dass der Nutzer per Button entscheiden kann, ob er eine Kopie an seine E-Mailadresse möchte? Bis jetzt es ja nur über das anwählen der Option “E-Mail (2)” (E-Mail-Template, für Autoresponder), dass der Absender immer/oder keine Kopie bekam

    1. Webtimiser

      Hallo,

      standardmäßig gibt es diese Funktion leider nicht, aber man kann es mit einem kleinen Codeschnipsel nachrüsten.
      In die functions.php des Child-Themes kommt dann dieser Code: function check_mail_send_contactform($cf7) {
      $submission = WPCF7_Submission::get_instance();
      if ( $submission ) {
      $posted_data = $submission->get_posted_data();
      }
      $mail = $cf7->prop( 'mail' );
      if($posted_data['contact_sendmail'][0]) { //if Checkbox checked
      $mail2 = $cf7->prop( 'mail_2' ); //get CF7's mail_2 object
      //now set sender's address to mail2's recipient
      $mail2['recipient'] = $mail['sender'];
      $cf7->set_properties( array( 'mail_2' => $mail2 ) );
      }
      return $cf7;
      }
      add_action('wpcf7_before_send_mail','check_mail_send_contactform');

      In das Formular selbst muss dieser Shortcode [checkbox contact_sendmail “Send me a copy of this message”] und E-Mail (2) muss aktiviert sein.
      Viele Grüße Sonia

      1. User Avatar

        Hallo zusammen,

        ist das immer noch korrekt? Habe den Code in functions.php ergänzt und alle weiteren Schritte so gemacht, jedoch wird die Checkbox gar nicht wie gewünscht angezeigt. Bei einem anderen Code-Schnipsel hatte ich eine Checkbox, aber die hat nichts gemacht … denke also schon, dass ich nicht so verkehrt liege. Danke!

        Viele Grüße
        Axel

    1. Webtimiser

      Hallo Gerd,

      vielen Dank für den Hinweise! Werde den Artikel gleich aktualisieren.

      Viele Grüße
      Sonia

  8. User Avatar

    Hallo Sonia,
    weißt du zufällig, ob es ein Plugin gibt mit dem man Berechnungen innerhalb eines Kontaktformulars machen kann?
    Also z.B. Ich habe in einer Zeile die Nettopreise eines Produkts und möchte in der nächsten Zeile den Gesamtpreis des Produkts anzeigen lassen also inkl. Mehrwertsteuer. Gib es da einen entsprechenden Code um z.B. den Preis von Produkt B mit 1,19 zu multiplizieren um den Preis inkl. Mehrwertsteuer zu erhalten?

    Vielen Dank im Voraus.
    Beste Grüße
    Mario

    1. Webtimiser

      Hallo Mario,
      könnte sein, dass du bei GravityForms diese Funktionen findest.
      VG Sonia

  9. User Avatar

    vielen dank für die hilfreichen tipps! ich schaffe es leider nicht ein logo in der bestätigungs-e-mail einzubinden. maximal wird ein platzhalter mit fragezeichen angezeigt. hast du dafür eine einfache lösung?

    1. Webtimiser

      Hallo Jan,
      wie hast du das Logo denn eingebunden? Ich würde es bei E-Mail (2) in den Nachrichtenkörper einfügen: . Zusätzlich musst du dann noch direkt unter diesem Feld ein Häkchen setzen bei HTML-Content-Typ verwenden.
      Hoffe, das hilft dir weiter?!
      VG Sonia

  10. User Avatar

    Tolle Tipps, DANKE! Mir ist auch aufgefallen, dass ‘Contact Form DB’ nicht mehr im offiziellen Verzeichnis ist. Ich benutze das Plugin schon seit einiger Zeit, nun stehe ich da…
    Gibt es eine Alternative, die du empfehlen könntest?

    1. Webtimiser

      Hallo Maja,
      Vom CF7-Entwickler gibt es das Plugin Flamingo und noch einige weitere wie z.B. Save CF7. Habe beide aber noch nicht getestet.
      VG Sonia

  11. User Avatar

    Klasse Tips und schöne Seite!
    Vielen Dank dafür

    1. Webtimiser

      Dankeschön 🙂

Schreibe einen Kommentar

Menü schließen