Contact Form 7 einrichten

Contact Form 7 ist mit über 5 Million Downloads eines der beliebtesten und verbreitetsten WordPress Plugins für Kontakt-Formulare. Es ist einfach zu bedienen, bietet viele nützliche Funktionen, ist erweiterbar 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 erkläre ich dir Step by Step, wie du mit Contact Form 7 ein einfaches und optisch ansprechendes Kontaktformular auf deiner Seite einbinden kannst.

Diese Anleitung wird regelmäßig aktualisiert und bezieht sich aktuell auf Contact Form 7, Version 5.0.

1. Contact Form 7 installieren

Falls du das Plugin noch nicht installiert hast, gehst du im WordPress-Dashboard auf Plugins > Plugins installieren. Dort suchst du nach Contact Form 7. Anschließend klickst du auf installieren und das Plugin wird heruntergeladen und installiert.
Alternativ kannst du Contact Form 7 auch downloaden, per FTP auf den Server hochladen und im WordPress-Dashboard aktivieren.

Contact Form 7 installieren

Nachdem du das Plugin aktiviert hast, siehst du links im Menü einen neuen Eintrag Formulare.
Hier findest du unter Kontaktformulare schon ein einfaches Standardformular. Damit können wir gleich starten.

Contact Form 7 - Standardformular
Vorgefertigtes Standardformular

2. Kontaktformular in die Seite einfügen

Damit das Formular auch auf deiner Webseite angezeigt wird, fügst du 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, klickst du 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 weitere Details zu dem Formular Feld 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 du diese ändern möchtest oder neue Felder einfügen möchten, kannst du 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, klickst du oben auf den Reiter E-Mail.
Hier findest du alle angelegten Formularelemente. Diese kannst du jetzt per Klick in die Mail übernommen werden.

 

cf7 Email

In diesem Bereich von Contact Form 7 legst du 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, kannst du diese hier eintragen.

5. Formular-Kopie oder Bestätigungsmail versenden

Neben der E-Mail, die du selbst bekommst, kannst du auch dem Absender des Formulars automatisch eine E-Mail senden.

Abschnitt E-Mail (2)

Möchtest du dem Formular-Absender eine Kopie der E-Mail senden? Dann setzte einfach ein Häkchen bei Verwende E-Mail (2).
Natürlich kannst du auch statt der Formular-Kopie einen eigenen Text als Bestätigung versenden. Diesen kannst du einfach in das Feld Nachrichtentext eingeben.

cf7 erweiterte Maileinstellung
Anpassungen für Mailversand

6. Formular Weiterleitung zur Danke-Seite

Du möchtest nach dem Abschicken des Formulars auf eine andere Seite weiterleiten?
Bisher musste man in den Tab Zusätzliche Einstellungen folgenden Schnipsel einfügen:

[ on_sent_ok: “location = ‘http://deine-seite/danke/’;” ]

Leider wird diese Funktion nicht mehr unterstütz und funktioniert auch nicht mehr.

Eine gute Alternative hierzu bietet das Plugin Contact Form 7 – Success Page Redirects

cf7 weiterleitung auf seite
Contact Form 7 – Success Page Redirects für eine Weiterleitung auf eine Seite

 

Nach der Installation findest Du im jeweiligen Formular den neuen Reiter Redirect Settings.

weiterleitung einrichten
Hier kannst Du die Weiterleitungsseite auswählen

Hier kannst Du nun eine Weiterleitungsseite auswählen. D.h. nach dem Abschicken des Formulars landet der Besucher auf der ausgewählten Seite.

7. 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. Dadurch kann man jedes Formular individuell gestalten. Das ist besonders wichtig, wenn man mehrere Formulare mit unterschiedlichen Designs auf seiner Webseite nutzt.

Ergänze einfach den Shortcode auf der Kontaktseite (Step 2) um den Zusatz html_id=”anfrage”

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

Anschließend kannst du genau dieses eine Kontaktformular mit CSS stylen! Den CSS-Code kannst du entweder in dein Child-Theme einfügen oder das Plugin Simple Custom CSS nutzen. Seit WordPress Version 4.7. können CSS-Anweisungen auch in den Customizer eingetragen werden.
Zu finden ist der Bereich unter: > Design > Customizer > Zusätzliches CSS.

#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 das 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, passe ich es noch an. So werden die Felder wieder untereinander und nicht in zwei Spalten angezeigt. Das kann man einfach über eine Media Query steuern.

[code]
.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

8. 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 der Benutzer 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]

9. Checkbox für die Einwilligung des Absenders

Damit das Kontaktformular auch der neuen Datenschutzverordnung DGSVO entspricht, sollte auf jeden Fall ein Hinweis zum Datenschutz erfolgen. Einige Anwälte empfehlen auch eine Einwilligungs-Checkbox .
Dadurch muss der Benutzer vor dem Absenden des Formulars der Verarbeitung seiner Angaben zustimmen.
Genau hierfür bietet CF7 das Formular Tag Zustimmung an.
So sehen die Felder beispielsweise bei mir aus:

[acceptance zustimmung]
Ich habe die <a href="/datenschutz/">Datenschutzerklärung</a> zur Kenntnis genommen und akzeptiert.
 Ich stimme zu, dass meine Formularangaben zur Kontaktaufnahme bzw. zur Bearbeitung meines Anliegens gespeichert werden.
[/acceptance]

Als letztes sollte natürlich auch noch ein Hinweistext angezeigt werden, falls die Checkbox nicht angehakt wurde.
Das kannst Du im Reiter Zusätzliche Einstellungen einstellen:

acceptance_as_validation: on

Der Absender erhält dann die Fehlermeldung: “Du musst die Bedingungen akzeptieren bevor du deine Mitteilung absendest.”

Wer viele Formulare hat, kann auch das Plugin WP GDPR Compliance dafür nutzen.

Alternativen zu CF7

Diese Anleitung habe ich im Jahr 2015 geschrieben. Damals war CF7 so ziemlich das einzige Plugin, mit dem man gut arbeiten konnte. Inzwischen habe ich für viele Fälle jedoch bessere Formular-Plugins gefunden.

Für wirklich einfache Formulare nutze ich am liebsten WPForms. Das Plugin hat einen Form-Builder, d.h. du kannst die Felder einfach per Drag & Drop anordnen. Für Einsteiger ist die Bedienung wesentlich einfacher und angenehmer als bei CF7.

Für aufwändigere Formular setzt ich klar auf Caldera Forms. Es bietet viele tolle Features wie z.B. Conditional Logic und Weiterleitungen, die man bei CF7 mühsam nachrüsten muss. Zudem bietet es einen Form-Builder und ist besser für die Performance der Seite.

Weitere Tipps:

  • Um sich vor Spam-Mails zu schützen, kannst du das Kontaktformular mit einem Captcha absichern. Am besten nutzt du hierfür das für Contact Form 7 erstellte Plugin Really Simple CAPTCHA.
  • Ebenfalls eine sehr gutes Plugin zur Spam-Abwehr ist Contact Form 7 Honeypot. Ist mir persönlich lieber, da es für den Nutzer unsichtbar ist.
  • Zur Performance-Optimierung empfiehlt es sich, die Plugin-Dateien von CF7 nur dann zu laden, wenn diese auch benötigt werden. Wie das funktioniert, erfährst du in dem Artikel WordPress schneller machen.
  • Wie du die Konversionsrate von CF7-Formulare mit Google Analytics analysieren kannst, zeigt dir der Artikel Conversion Tracking mit Contact Form 7.
  • Falls Du spezielle Formularfunktionen vermisst, findest Du im Beitrag 9 nützliche Erweiterungen für Contact Form 7 einige kostenlose AddOns.
Wie hat Dir dieser Beitrag gefallen? 1 Star2 Stars3 Stars4 Stars5 Stars (31 Bewertungen, Ø: 4,58 von 5)
Loading...

Dieser Beitrag hat 189 Kommentare

  1. User Avatar

    Hallo Sonia,
    coole Beschreibung von dir zum CF7. Ist eigentlich alles drin, was man braucht. (Fast alles ;-)))
    Ich bin darauf gestoßen, weil ich nach einer Lösung für mein Kontaktformular suche.
    Bei mir wird online der gesamte Text nur in Versalien, also Großbuchstaben dargestellt. Im Dashboard ist jedoch alles in Normaldarstellung, also groß und klein. Bisher habe ich auch nichts gefunden, um dies umzustellen.
    Gibt es irgendwo eine Standardeinstellung? Oder muss ich den Text mit CSS einstellen?
    Ein Tipp von Dir wäre klasse.
    Viele Grüße
    Dirk

    1. Webtimiser

      Hallo Dirk,

      vermutlich wird vom Theme oder einem anderen Plugin das CSS von CF7 gesteuert. Wenn du dem Formular eine eigene Klasse gibst, kannst du das aber ändern: text-transform: none;

      Viele Grüße
      Sonia

  2. User Avatar

    Hallo
    Ich habe eine Tabelle mit Kontaktformular erstellt. Ich möchte, dass diese Tabelle auch als Tabelle im eMail angezeigt wird (damit die Spalten und Zeilen richtig ankommen). Wie kann ich es einrichten?

    1. Webtimiser

      Hallo,
      dazu musst du einfach im Reiter E-Mail im Feld Nachrichtenkörper den HTML-Code für die Tabelle einfügen.

      VG Sonia

      1. User Avatar

        Hallo Sonia

        Vielen Dank für die schnelle Hilfe. Ich habe es ausprobiert aber funktioniert leider nicht. HTML-Code wird als reiner Text angezeigt.

        Danke und liebe Grüsse

        1. Webtimiser

          Hallo Hamide,
          hast du denn das Häkchen bei HTML-Content-Typ verwenden gesetzt? Dann sollte es gehen.

          LG Sonia

  3. User Avatar

    hallo webtimiser,

    über die konfiguration von contact form 7 habe ich bemerkt, dass unter einstellungen eine alte e-mail-adresse meines kunden im dashboard eingetragen ist, die es nicht mehr gibt (gekündigt), also kann ich diese erst mal nicht ändern (normalerweise würde man die adresse ändern, bekäme eine mail an die eingetragene adresse usw. – diese möglichkeit entfällt bei mir, weil es diese adresse nicht mehr gibt). gibt es einen work-around dazu? ich würde mich sehr über eine antwort freuen, da ich einen kumpel habe, der wp gut beherrscht und nicht weiss, wen ich fragen kann.

    beste grüsse ulli

    1. Webtimiser

      Hallo Ulli,

      wenn du die Mail-Adresse änderst, bekommst du an die neue Mail-Adresse einen Bestätigunslink geschickt. Erst danach wird die neue Adresse aktiviert.

      VG Sonia

  4. User Avatar

    Hallo Sonia,

    besten Dank für Deinen sehr informativen Beitrag zum Kontaktformular. Als “WP-Hobbybastler” ist man für solch umfängliche Hilfen immer sehr dankbar.

    Beim Textfeld hätte ich den Wunsch, dass die Anzahl der Zeichen zu begrenzen ist und, dass der Besucher bei der Texteingabe in einem kleinen Zahlenfeld ersehen, kann wie die Anzahl der Zeichen sich verringert.

    Frage: Muss dies zusätzlich programmiert werden oder ist dies im Funtkionsumfang beinhaltet?

    Danke im voraus und besten Gruß,
    Sam

    1. Webtimiser

      Hallo Sam,
      gerne!
      Die Zeichen kannst du mit maxlenght begrenzen: [textarea* your-message maxlength:10] Und auch die Anzahl der verbleibenden Zeichen kannst du anzeigen lassen:
      [count your-message] oder [count your-message down]

      Viele Grüße,
      Sonia

      1. User Avatar

        Hallo Sonia,
        herzlichen Dank für Deine Mühe!

        Gute Wünsche,
        Sam

  5. User Avatar

    Hallo,
    ich habe ein Problem mit den Emails, die als Bestätigung gesendet werden: Ich wollte den Sendernamen meiner angegebenen Emailadresse ändern und es steht aber in den gesendeten Mails immer noch der alte Name dran, obwohl er definitiv in Email (2) richtig drin steht. Was mache ich falsch?
    LG Ina

    1. Webtimiser

      Hallo Ina,
      hast Du mal versucht, die neue E-Mail auch im normalen Mail-Tab anzupassen? Falls Du ein Caching-Plugins nutzt: hast Du den Cache geleert?

      LG Sonia

  6. User Avatar

    Hallo,
    Danke für die gute Anleitung, hat alles soweit geklappt! Allerdings sollte ein User tatsächlich meinen Link zur Datenschutzerklärung anklicken gehen seine bereits gemachten Angaben verloren. Und es gibt bei mir keine zurück funktioniert im Browser.
    Was mache ich da denn falsch? LG Dagmar

    1. Webtimiser

      Hallo Dagmar,
      sehr gerne!
      Mit dem Link zur DS-Erklärung hast Du natürlich recht. Am besten fügst du target="_blank" ein, damit sich der Link in einem neuen Fenster öffnet.
      LG Sonia

  7. User Avatar

    Hallo ich bin neu beim gestalten von Webseiten. Habe mich für ein Theme entschieden, dass ich umbaue. Das Kontactform 7 habe ich integriert und funktionier eigentlich ganz gut. Nur sobald ich als Erweiterung der Angaben eine Datei einfügen will hängt sich das ganze auf, wenn irgend ein Feld nicht oder fehlerhaft ausgefüllt wird. Auch lässt es sich nur senden, wenn die Datei angehängt wird. Wo könnte da der Fehler liegen? Als Browser verwende ich standard den Safari.

    Gruss Peschä

    1. Webtimiser

      Hallo Peschä,
      hast Du das Datei-Feld als Pflichtfeld angelegt? Dann kommt ein Fehler, wenn das Feld nicht ausgefüllt ist.

      Viele Grüße
      Sonia

  8. User Avatar

    Guten Abend aus dem elektrischen Berlin,

    und wenn es nicht gleich gewittert, schmort mir der Glühfaden durch…Zur Sache nun:
    Ich habe Contact Form 7 in das Bridge-Theme eingebunden. Klappte wunderbar, Mails lassen sich bereits verschicken, und CF7 taucht auch in den Qode Options (heißt da so) auf. Theoretisch kann ich da Hintergründe farblich gestalten, Umrahmungen setzen usw. Praktisch passiert da nix.

    Liegt es an mir? Und wenn ja: wie soll ich mich ändern?

    Fragt vorab dankend und herzlich grüßend
    CH

    P.S. Wind kommt auf. Das wird.

    1. Webtimiser

      Hallo Christoph,
      leider kenne ich die speziellen Optionen des Themes nicht. Normalerweise muss man die Optik von CF7 per eigenem CSS anpassen. Wenn Dein Theme dafür Voreinstellungen anbietet und es nicht klappt, könntest Du den Theme-Support anfragen.

      Herzliche Grüße
      Sonia

    1. Webtimiser

      Hallo Paul,
      vielen Dank für den Hinweis. Dies hatte ich bereits vor einiger Zeit unter Punkt 6 erklärt.
      VG Sonia

  9. User Avatar

    Vielen Dank für diesen Artikel! Er hat mir wirklich sehr geholfen!

    Eine Frage habe ich jedoch noch: Der Kunde, der das Formular ausfüllt, soll automatisch eine E-Mail als Antwort erhalten, die ein PDF beinhaltet. Dafür habe ich “E-Mail (2)” angeklickt und auch schon soweit alles eingestellt. Die E-Mail kommt auch an. Wie kann ich jedoch das PDF anhängen? Ich sehe das Feld “Dateianhänge”, weiß nur leider nicht, wie ich dort etwas anhänge.

    Ich hoffe ich habe mich verständlich ausgedrückt und du kannst mir helfen.

    VG Nina

    1. Webtimiser

      Hallo Nina,

      in das Feld Dateianhänge musst Du noch den Pfad zu der Datei eingeben. Z.B. uploads/2018/06/test.pdf.
      Hoffe es klappt!

      Viele Grüße
      Sonia

      1. User Avatar

        Oh, es hat direkt funktioniert! Vielen Dank für die schnelle Hilfe!

        Viele Grüße,
        Nina

  10. User Avatar

    Vielen Dank für den lehrreichen Artikel.
    Leider habe ich dennoch ein Problem mit dem Kontaktformular.

    Und zwar habe ich Checkboxen eingefügt, die Themen zeigen, warum die Kontaktanfrage gestellt wird.
    Dementsprechend, kann es sein, dass man nur die Checkbox anklickt ohne das Thema in der Anfrage genauer zu spezifizieren.
    Zum Beispiel Checkbox “Interesse an Kooperation” oder “Mehr erfahren”, etc.

    Leider werden die angeklickten Checkboxen zwar im Kontaktformular angezeigt und funktionieren, werden aber leider nicht in der E-Mail der Anfrage übermittelt.

    Wie kann ich diese noch in die E-Mail integrieren?

    1. Webtimiser

      Hallo Miriam,
      damit die Felder übertragen werden, muss man sie im Reiter E-Mail noch einfügen. Siehe Punkt 4.
      VG Sonia

  11. User Avatar

    Hallo, danke für den tollen Beitrag. Ich habe eine Frage:
    Ich hatte in der Vergangenheit bei einem ausführlichen Anmeldeformular alle Felder als Pflichtfelder angegeben. Wie kann ich nun aus den Pflichtfeldern wieder Felder für freiwillige Angaben machen?
    Muss ich die nun neu erstellen oder gibt es einen anderen Weg?
    Danke für die Unterstützung und LG Michaela

    1. Webtimiser

      Hallo Michaela,
      gerne!
      Wenn Du aus Pflichtfeldern wieder optionale Felder machen möchtest, musst Du einfach nur das * entfernen. Also aus [email* your-email] wird dann [email your-email]
      LG Sonia

      1. User Avatar

        Hallo Sonja,
        herzlichen Dank! Allerdings sehen die Felder keinen *, werden aber trotzdem als Pflichtfeld angeben, wenn es nicht ausgefüllt wird. Hier eine Beispielfrage:
        Besteht eine Schwangerschaft?
        [radio checkbox-263 “Nein” “Ja”]

        Hast du dazu noch einen Tipp für mich? Das wäre echt super.

        Danke und LG Michaela

        1. Webtimiser

          Hallo Michaela,
          Du könntest noch die Option “Keine Angabe” hinzufügen oder statt Radiobuttons ein Dropdown wählen. Hier kann man wählen, ob es ein Pflichtfeld sein soll.
          LG Sonia

  12. User Avatar

    Hi Sonia
    Jetzt hat es perfekt geklappt 🙂
    Vielen Lieben Dank
    Gruss
    Paul

  13. User Avatar

    Hi vielen Dank für die coole Anleitung
    Gerne wollte ich noch fragen, wie schaffe ich das ich die Zustimmung als Pflichtfeld hinterlege?
    wenn ich bei acceptance ein * mache:
    [acceptance* zustimmung] Ja, ich h…

    zeigt es mir dann im Frontend leider nicht mehr den Checkbox sondern den text mir der [acceptance klammern

    Danke und Gruss
    Paul

    1. Webtimiser

      Hi Paul,
      gerne!
      Ein Beispiel für die Checkbox findest du unter Punkt 9.
      Viele Grüße
      Sonia

      1. User Avatar

        Hi Sonia
        Vielen Dank für Deine Rückmeldung.
        Ich habe es genau so (der Text evtl. bisschen anders) umgesetzt, nur wenn ich das Kontaktformular ausfülle und dann hier die Checkbox nicht auswähle, kommt hier keine Fehlermeldung, da es aktuell noch kein Pflichtfeld ist. Muss ich es irgendwie sonst markieren, dass die zustimmung als Pflichtfeld gesetzt wird?
        Danke und Gruss 🙂
        Paul

        1. Webtimiser

          Hi Paul,
          habe die Anleitung gerade ergänzt! Im Reiter Zusätzliche Einstellungen muss folgendes Snippet rein: acceptance_as_validation: on
          Viele Grüße
          Sonia

  14. User Avatar

    Hi super Beschreibung.
    Wie kann ich eine Fehlermeldung ausgeben lassen wenn der Haken Hier:
    [acceptance zustimmung]
    Ich habe die Datenschutzerklärung zur Kenntnis genommen und akzeptiert.
    Ich stimme zu, dass meine Formularangaben zur Kontaktaufnahme bzw. zur Bearbeitung meines Anliegens gespeichert werden.
    [/acceptance]

    nicht gesetzt ist?

    Gruß Markus

    1. Webtimiser

      Hi Markus,
      vielen Dank!
      Kommt denn bei Dir gar keine Fehlermeldung? Normalerweise erscheint bei nicht angehakten Pflichtfeldern “Dies ist ein Pflichtfeld.”.

      Viele Grüße, Sonia

  15. User Avatar

    Hallo und vielen Dank für die ausführliche Anleitung. Ich habe soweit alles umsetzen können, das css eingebunden und nur in den Farben angepasst. Bei einer Stelle komme ich jedoch nicht weiter. Und zwar geht es um die Darstellung in 2 Spalten nebeneinander. Folgenden Code habe ich gemäß der Anleitung erstellt:

    [text* last-name placeholder “Ihr Name: (Pflichtfeld)”]
    [text* first-name placeholder “Ihr Vorname: (Pflichtfeld)”]

    [tel Telefon placeholder “Ihre Telefonnummer:”]
    [email* your-email placeholder “Ihre E-Mail-Adresse: (Pflichtfeld)”]

    [text your-subject placeholder “Betreff:”]

    [textarea your-message placeholder “Ihre Nachricht:”]

    ….

    Das Ergebnis gefällt mir schon ganz gut, ABER… die 4 Felder die mit jeweils in 2 Spalten formatiert wurden sind nicht beschreibbar? Habe ich da etwas vergessen?

    1. User Avatar

      Noch ein versuch der Erläuterung. Alles was in den div Klammern steht ist nicht beschreibbar
      [code] /*Trennmarke*/

      [text* last-name placeholder “Ihr Name: (Pflichtfeld)”]
      [text* first-name placeholder “Ihr Vorname: (Pflichtfeld)”]

      [tel Telefon placeholder “Ihre Telefonnummer:”]
      [email* your-email placeholder “Ihre E-Mail-Adresse: (Pflichtfeld)”]

      [text* your-subject placeholder “Betreff: (Pflichtfeld)”]

      [textarea your-message placeholder “Ihre Nachricht:”]
      /*Trennmarke*/ [/code]

      1. Webtimiser

        Hallo,
        so aus der Ferne kann ich das leider nicht beantworten, dazu müsste ich das Formular sehen.
        VG Sonia

  16. User Avatar

    Herzlichen Dank für diese Info. Kann man mit Contact Form 7 auch einen einfachen Bestellformular erstellen? z.B oben Produkte Namen, Mengenangabe und dann dies mit Personlalinfo(Name, Adresse usw.) zu senden. Muss man dann im Contact Form wegen Listen von Produkten und Anzahl eine Tabelle einfügen? Herzlichen Dank für den Hinweis im Voraus.
    Vielle Grüsse Smira

    1. Webtimiser

      Hallo Smira,
      gerne!
      Zusätzlich zu den Adressfeldern könntest Du für Produkte ein Auswahlfeld und für die Menge ein Textfeld anlegen.
      Viele Grüße
      Sonia

  17. User Avatar

    Vielen lieben Dank für diese super Anleitung, damit habe ich mein Kontaktformular eingerichtet. Da sehr viele Spam-Nachrichten kamen, habe ich den Tipp befolgt, das Plugin Really Simple Captcha auch zu installieren. Läuft auf meiner Destopsite super, Besucher, die das Kontaktformular über ihr Smartphone ausfüllen können mir keine Nachricht mehr senden, hat jemand eine Lösung hierfür? Vielen lieben Dank und liebe Grüße Petra

    1. Webtimiser

      Hallo Petra,
      aus der Ferne kann ich das leider nicht beantworten. Aber vielleicht testest Du mal dieses Plugin: Contact Form 7 Honeypot.
      LG Sonia

  18. User Avatar

    Hallo, ich habe den contact form 7 eingerichtet und musste feststellen dass der text, den der Absender in das Formular eingibt, hat eine weise Farbe. kann ich es irgendwie ändern?
    vielen Dank!
    lg Emily

    1. Webtimiser

      Hallo Emily,
      die Textfarbe kannst per CSS festlegen, z.B.:input[type="text"] {color:#000;}

      LG Sonia

  19. User Avatar

    Hallo, vielen Dank für die erstklassige Anleitung. Ein Punkt fehlt mir:
    Wenn der Besucher nicht alle Pflichtfelder ausgefüllt hat, soll der “Senden”-Button deaktiviert sein und dies farblich sichtbar sein.
    Kann ich das irgendwie einstellen?
    Besten Dank für die Hilfe.

    1. Webtimiser

      Hallo Jens,

      kenne leider keine Möglichkeit, dies einfach einzustellen. Du könntest versuchen ein eigenes Skript dafür zu schreiben.
      VG Sonia

  20. User Avatar

    Traurig, dass es kein einfach logisch aufbauendes Kontaktformular gibt. Wozu muss man für jeden Scheissdreck ein Programmierer sein???

  21. User Avatar

    hallo, wie bekomme ich es hin, dass die standardsprache des plugins deutsch ist?
    ich habe wordpress und den admin auf deutsche sprache gestellt, immer noch ist das plugin auf english.
    nervt, weil ich dann extra alle meldungen übersetzen muss.
    wie bekommt man das gelöst?

    1. Webtimiser

      Hallo,
      ich würde das Plugin komplett deinstallieren und die deutsche Version einspielen.
      VG Sonia

  22. User Avatar

    Hallo in die Runde, mein Problem liegt “ganz am Anfang”. Ich scheitere schon an Punkt 2 (Kontaktformular in die Seite einfügen). Ich habe schon seit längerem eine HP im html. Die soll prinzipiell auch so bleiben. Ich bin bei Strato in ein PowerWeb Paket gewechselt wo ich Apps wie WordPress… verwenden kann. Die Installation hat auch funktioniert. Nun weis ich aber nicht, wie ich das Kontaktformular auf meine bestehende HP bekomme (im Idealfall in die bestehende html Seite einbetten).

    1. Webtimiser

      Hallo Jens,
      wenn du WordPress eingerichtet hast, musst du einfach nur in die gewünschte Seite den Shortcode einfügen. So wie unter Punkt 2 beschrieben.
      VG Sonia

  23. User Avatar

    Hallo, ich habe ein Problem mit dem Datumfeld. Ich klicke auf Datum, stelle alles ein und füge den Tag ein. Auf der Seite jedoch wird es nicht richtig angezeigt.. das komische ist auch, dass dieser Tag im E-Mail Tag nicht auftaucht. Könnten Sie mir da weiterhelfen?

    1. Webtimiser

      Hallo Katharina,
      hier ist ein Standard-Tag für das Datumsfeld [date* your-date min:2017-01-01 max:2017-12-31 step:7 class:required "2017-08-01"] Dies sollte auf der Seite angezeigt werden. Damit das Datum auch in der Mail übergeben wird, muss hier natürlich noch das Tag für Datum eingefügt werden.
      Viele Grüße
      Sonia

    1. Webtimiser

      Hallo Kai,
      so aus der Ferne ist das schwierig. Hast Du einen Link zum Formular, damit ich mir das CSS anschauen kann?

      VG Sonia

        1. Webtimiser

          Hallo Kai,
          danke für den Link! Da fehlt beim Telefon-Input die Formatierung. Versuche mal:
          #anfrage input[type="tel"] {
          border: 1px solid #eee;font-size: 1.4rem;padding: 0.6em;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
          -webkit-transition: 0.2s ease-in; transition: 0.2s ease-in;}

          1. User Avatar

            Danke, Schon besser aber stimmt immer noch nicht alles :/ Nachricht Feld ist zu klein,
            Roboter Feld zu nah am Senden Button und der Senden Button hat auch falsche Breite :-/

          2. Webtimiser

            Hallo Kai,
            dann nutze am besten den Inspektor der Browser-Tools und passe das CSS für die entspechenden Elemente an.

      1. User Avatar

        Danke. Einfach bei Telefon dazu rein kopieren im customizer?
        Probiere ich später mal.

  24. User Avatar

    Hallo Sonia,
    erst einmal vielen Dank für diesen super Artikel. Ich hatte das Problem, dass mein mehrseitiges Formular (mit Multi-Step) den meisten CSS Lösungen für Mehrspaltige Formulare kollidierte. Nach nun mehreren Wochen testen klappt es endlich. Juuuhuuuu.
    Ich hoffe Du kannst mir bei meinem letzten Problemchen helfen. Ich hätte gern sowohl zwei als auch drei Spalten in meinem Formular. Für den zweispaltigen Teil habe ich mir folgenden Teil aus Deinem CSS entnommen:
    “.form_half {
    width: 49%;
    float: left;
    margin-right: 2%;
    }

    .form_half_last {
    margin-right: 0px;
    }

    @media (max-width: 700px) {

    .form_half {
    width: 100%;

    }
    }”
    Das habe ich in einen StyleTag direkt in das Formular gefügt.
    Seit Tagen versuche ich ein dreispaltiges Formular hinzubekommen …

    Schon einmal vielen Dank im Voraus für Deine Hilfe.

    1. Webtimiser

      Hallo Benjamin,
      damit die Felder in 3 Spalten angezeigt werden, musst du eigentlich nur das CSS etwas anpassen. Also statt form_half z.B. form_third:
      .form_third {width: 32%;float: left;margin-right: 1%;
      }

      Die genauen Größen und Abstände musst du dann vermutlich noch etwas anpassen.
      Viele Grüße
      Sonia

  25. User Avatar

    Hallo, vielen Dank für diese super Anleitung. Es hat bei mir alles geklappt!! 🙂

    Ich möchte einen Schritt weiter gehen. Falls notwendige Felder nicht ausgefüllt werden, kommt ja der Hinweis “Dieses Feld ist erforderlich”. Wo kann ich Zugriff aus diesen Text nehmen und ihn verändern?

    Zweitens fehlt mir die Möglichkeit, dass wenn jemand ein Feld nicht ausgefüllt hat und der Text “Dieses Feld ist erforderlich” erscheint, so verschwindet dieser Satz nicht, wenn derjenige in das Feld klickt und die fehlenden Daten ergänzt. Das ist schlecht. Wie kann ich erreichen, dass bei Eingabe von Text der Fehlerhinweis verschwindet?
    Ebenso will ich den Text verändern, der dabei dann unter dem Kontaktformular erscheint: “Ein oder mehrere Felder sind fehlerhaft. Bitte überprüfe sie und versuche es noch einmal.” Wo mache ich das?

    Vielen Dank für jede Hilfe!!

    Michael

    1. Webtimiser

      Hallo Michael,

      die Texte kannst du im jeweiligen Formular im Reiter Meldungen anpassen.
      Damit die Fehlermeldung bei erneuter Eingabe verschwindet gibt es bei CF7 die Möglichkeit eine spezielle Formatierung einzufügen. Hier ein Beispiel: [text* your-name]
      Viele Grüße
      Sonia

  26. User Avatar

    Hallo, vielen Dank für die Anleitung.
    Ich habe mich nun für das Kontakt Formular WPForms entschieden, allerdings habe ich sowohl bei diesem Formular, als auch bei Contact Form 7 das Problem, das der Empfänger der Anfragen, also ich immer eine Seitenlage mail bekomme, mit allen möglichen Informationen die ich gar nicht haben möchte. Eine Fehlermeldung: delivery failed: returning message to sender. Wenn ich lange genug scrolle und mir alles zusammen suche finde ich die Informationen aus dem Kontakt Formular irgendwie wieder, allerdings kann das ja nicht die Lösung sein. Hat wer einen Tipp wie ich das beheben kann oder woran das liegt? LG Kyra

  27. User Avatar

    Hallo, tolle Anleitung, vielen DANK! Ich habe eine Frage: Die Bezeichnung eines Formularfeldes ist über dem Feld platziert. Ich benötige ein Formular, wo zB. Name – und gleich daneben – das eingabefeld platziert ist. Nachname*[text* nachname]. Also Beide nebeneinander und nicht der Nachname darüber platziert ist. Wäre ganz dringend ich komme da nicht weiter. Schon alles gecheckt …. finde nicjts. Danke schon mal und liebe GRüsse

  28. User Avatar

    Was für eine super Anleitung, zunächst vielen Dank dafür!
    An einem Punkt komme ich aber nicht weiter: Wenn man auf “Senden” geklickt hat, möchte ich dass eine neue Seite erschein, à la “Vielen Dank, deine Nachricht wurde erfolgreich gesendet.” Wie kann ich sowas einrichten?
    Danke schon mal und Grüße!

    1. Webtimiser

      Hallo Maria,
      gerne!
      Zuerst musst du die Seite “danke” anlegen und anschließend bei CF7 in die zusätzlichen Einstellungen gehen. Hier fügst du dann folgendes ein:
      on_sent_ok: „location = ‚http://www.domain.de/danke‘;“
      VG Sonia

      1. User Avatar

        Vielen Dank für die Antwort! Allerdings funktioniert das irgendwie nicht. Ich hab mal unter “Zusätzliche Einstellungen” auf die Info-Seite geklickt, dort steht dass on_sent_ok veraltet ist und nicht mehr benutzt wird, man solle stattdessen die “DOM Events” nutzen. Sagt das jemandem was? Ich hab grad nur 100 Fragezeichen im Kopf

        1. Webtimiser

          Hallo Maria,

          stimmt, der Hook wird nur noch bis Ende 2017 unterstützt. Du kannst folgenden Code-Schnipsel in die Seite einfügen:


          document.addEventListener( 'wpcf7mailsent', function( event ) {
          location = 'http://www.seite.de/danke';
          }, false );

          1. User Avatar

            Hallo

            Danke für die super Anleitung.
            Leider funktioniert das nicht und es erscheint der ganz normale Thank-you-text aus der Vorlage. Gibt es noch weitere Einstellungen die ich beachten muss, damit die Weiterleitung auf die Dankes-Seite klappt?
            Herzlichen Dank!

          2. Webtimiser

            Hallo,
            stimmt, die Weiterleitungsfunktion klappt leider nicht mehr. Daher habe ich die Anleitung um Punkt 6 ergänzt. Ich hoffe, es hilft Dir weiter.
            Viele Grüße
            Sonia

  29. User Avatar

    Hallo,

    vielen Dank für die tolle Hilfestellung und den tollen Artikel.
    Ich habe eine Frage bzgl. des Kontaktformulars. Ich habe das Plugin installiert und auch verschiedene formulare erstellt, doch leider habe ich immer das Problem, dass das Kontaktformular nicht auf der ganzen Seitenbreite einnimmt, sondern ein bisschen weniger als die Hälfte.

    Ich weiß nicht wo ich das verändern kann. Das ist jetzt meine erste Seite wo dieses Problem auftritt.

  30. User Avatar

    Hallo zusammen,

    hätte da eine kleine Frage. Gibt es die möglichkeit je Kategorie eine E-Mail anzuordnen (Empfänger)?
    Quasi 5 Kategorien (Abteilungen), je nach auswahl soll die E-Mail an bestimmten Empfänger gehen.

    Ich bedanke mich schonmal

  31. User Avatar

    Hallo zusammen,

    kann man mit CF7 auch eine URL oder einen Projekttitel den es sich Automatisch holt übersenden? Ich bräuchte die damit der Kunde weiß von welchen Projekt die Anfragen kommen sonst müsste ich die einzeln immer bei jeden Projekt mit reinschreiben. Dankeschonmal.

      1. User Avatar

        Vielen Dank das hat mir sehr geholfen. Kann man eigentlich CF-7 die Daten so übertragen das man diese gleich in in eine Excel Liste übertragen kann?

  32. User Avatar

    Hallo Sonia,

    ich hoffe du kannst mir nochmal kurz helfen? Ist es möglich einzelne Bereiche meines Kontaktformulars ein- bzw. auszublenden je nachdem was man auswählt? Hier mal der Link zu meinem Testformular:

    Auf mein Beispiel bezogen hat der User die Möglichkeit entweder Format 2,50m x 2,00m oder 3,00m x 2,50m auszuwählen. Wenn er Format A auswählt solle beispielsweise nur die Einzelpreise und Gesamtpreise des Formats A erscheinen.

    Ich hoffe du kannst mir weiterhelfen und bedanke mich im Voraus.

    VG
    Mario

    1. Webtimiser

      Hallo Mario,
      so sollte es klappen:
      In den Formular-Tab kommt z.B. Format [select* format "20x20" "50x50"]
      Gesamtpreis: [group preisA]50 €[/group][group preisB]80 €[/group]

      Und im Reiter Conitional Field legst Du dann die Bedingungen fest:
      if format equals 20×20 then show preis A
      if format equals 50×50 then show preis B

      VG Sonia

  33. User Avatar

    Hallo,
    ich benutze die Contact Form 7 erweiterung Conditional Fields. Ich versuche vergeblich ein Kontaktformular mit mehreren Bedingungen zu erstellen. D.h. der Benutzer hat die Möglichkeit ein Produkt auszuwählen. Das Produkt kann verschiedene Formate haben. Je nach Format kommt man in eine andere Preisgruppe. Je nachdem welche Stückzahl der User auswähtl so der entsprechende Preis angezeigt werden.

    Hat jemand eine Idee wie man das am besten lösen kann bzw. wie man mehrere Bedingungen darstellen kann?

    Vielen Dank im Voraus.

    Beste Grüße
    Mario

      1. User Avatar

        Hallo,
        vielen Dank für die Antwort. Auf die Seite bin ich schon gestoßen, aber es hilft mir leider nicht weiter. Schade.
        Trotzdem vielen Dank.
        Mfg

      2. User Avatar

        Hallo, nochmals vielen Dank für die Antwort. Kannst du mir vielleicht dabei helfen, wie ich einzelne Elemente meine Formulars als Akkordeon darstellen kann? Hier der Code des Formulars:

        Wählen Sie Ihr gewünschtes Material*[select* Material multiple” Frontlit 500 g/m² (= LKW Plane)” “Mesh 350 g/m² (= Gitternetzplane)”]
        Konfektionierung*[checkbox* Konfektionierung use_label_element “gesäumt” “geöst” “hohlsaum”]
        Druckart*[checkbox* Druckart use_label_element “UV-Druck” “Solvent”]
        Stückpreise und Bestellmengen – versandkostenfreie Lieferung nach Deutschland und Österreich (Lieferzeit ca. 4-8 Werktage)* [select menu-229 include_blank “ab 1 Stück 66,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 3 Stück 47,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 5 Stück 42,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 10 Stück 39,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 15 Stück 37,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 30 Stück 33,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 45 Stück 31,50 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 60 Stück 30,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 75 Stück 29,50 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 90 Stück 29,25 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 105 Stück 29,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “ab 150 Stück 28,00 €/Stk zzgl. der gesetzlichen MwSt. und Versand” “Höhere Stückzahlen auf Anfrage”]

        Gesamtpreis[group Preis1]66,00 €[/group][group Preis2] 141,00 €[/group][group Preis3] 210,00 €[/group] [group Preis4] 390,00 €[/group][group Preis5] 550,00 €[/group][group Preis6] 990,00 €[/group][group Preis7] 1417,50 €[/group][group Preis8] 1800,00 €[/group][group Preis9] 2212,50 €[/group][group Preis10] 2632,50 €[/group][group Preis11] 3045,00 €[/group][group Preis12]4200,00 €[/group] [group Preis13] Auf Anfrage[/group]

        Anrede[radio anrede “Herr” “Frau”]
        Vorname*[text* vorname]
        Nachname*[text* nachname]
        Firma[text firma]
        Straße*[text* straße]
        PLZ/Ort*[text* plzort]
        Email*[email* email]
        Telefon*[text* telefon]
        Liefertermin[text liefertermin]
         [checkbox rueckruf “Bitte rufen Sie mich zurück!”]
        [textarea* nachricht x6 placeholder “Ihre Nachricht”]

        [submit “Jetzt unverbindliches Angebot anfragen”]

        Der zweite Teil des Formulars als ab Anrede soll als Akkordeon dargestellt werden, damit ich etwas Platz sparen kann.
        Ich hoffe du kannst mir weiterhelfen.

        Vielen Dank im Voraus.

        Beste Grüße

  34. User Avatar

    Hallo,
    eine wirklich schöne Seite. Mein Problem wird hier leider nicht bearbeitet. Ich möchte gerne einen Link in das Kontaktformular einfügen. Geht das auch?
    Weiterhin habe ich noch ein zweites Problem, wo ich die Lösung nicht sehe. Ich möchte, dass der Absender des Kontaktforumlars meine AGB akzeptiert. Dazu habe ich ein Zustimmungsoption eingefügt. Wird das Kästchen nicht geklickt, soll eine Fehlermeldung erscheinen, die ich unter dem Reiter “Meldungen” angelegt habe. Nur kommt die Fehlermeldung leider nicht. Was mache ich falsch?

    1. Webtimiser

      Hallo Markus,
      danke!
      Einen Link kannst Du ganz einfach über HTML einbauen und auch mit den AGB verbinden:[acceptance AGB] ich habe die AGB gelesen und akzeptiert
      Die Fehlermeldung sollte dann auch angezeigt werden.
      LG Sonia

  35. User Avatar

    Hallo zusammen,

    dank der super erklärten Hilfe habe ich alles soweit hinbekommen obwohl ich in diesem Bereich ein absoluter Neuling bin. Wenn mir jetzt noch jemand erklären könnte wie ich die weißen Hintergründe und ggf. noch die Schriftfarbe und Schriftgröße ändern könnte wäre es perfekt.

    Viele Grüße aus Nürnberg

    1. Webtimiser

      Hallo Manfred,
      dazu musst Du nur das CSS etwas anpassen. Also für den Hintergrund:background: #ddd (gewünschte Farbe) und für die Schrift: font-size:18px und color:#000;
      VG Sonia

      1. User Avatar

        Hallo Sonia,
        Deinen Tipp habe ich schon umgesetzt, aber damit verändere ich nur die Hintergrundfarbe des ganzen Formulars. Ich möchte gerne nur die Hintergrundfarbe der einzelnen Eingabefelder ändern. Also zum Beispiel —>
        Das Feld: Deine Email von Weiß nach sagen wir mal rot
        Das Feld: Deine Nachricht von Weiß wegen mir auch nach rot
        Verstehst du was ich meine?
        Genau für diese 4 Eingabefelder bräuchte ich den CSS-Code für Hintergrundfarbe und Schriftgröße.

        Viele Grüße

        1. Webtimiser

          Hallo Manfred,
          OK, jetzt verstehe ich was Du meinst! Für gewöhnlich kann man die einzelnen Textfelder über .wpcf7 input[type="text"], .wpcf7 input[type="email"] { background:red;} anpassen. Am besten klickst Du mit der rechten Maustaste in das Formularfeld und wählst “Element untersuchen” aus. Dann siehst welche CSS-Klasse genau verwendet wird.
          Viele Grüße
          Sonia

  36. User Avatar

    Hallo!
    Dank der o.g. Hilfe habe ich einige “Macken” lösen können. DANKE!!! Nun habe ich aber ein Problem da beisse ich mir die Zähne aus.

    Mein Kontaktformular ist so aufgebaut:

    [honeypot honeypot-417]

    Ihr Name (Pflichtfeld)
    [text* your-name]

    Ihre E-Mail-Adresse (Pflichtfeld)
    [email* your-email]

    Ihre Telefonnummer (wenn Sie möchten)
    [tel tel-353]

    Ihr Interesse / Auswahl
    [radio radio-784 default:1 “"Einrichtungsleitung"” “"Pflegedienstleitung"” “"Fachleitung Sozialer Dienst"” “"Wohnbereichsleitung"” “"Qualitätsmanagement"” “"Tages-/Inhouseseminare"” “"allgemeine Informationen"”]

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

    [submit id:submit class:button “Senden”]

    ———————-
    a) ich bekomme immer die Meldung, dass “Mehrere Formularfelder sind in einem einzigen Beschriftungselement platziert” sind. Ist meine Trennung inkorrekt?

    b) Nach Auswahl im Radiobutton und anschließendem submit, möchte ich die Nutzer zu dem entsprechenden Formular bringen / oder es direkt per email an den Anmelder versenden. Leider kirege ich nur den allgemeine submit hin und dann landen alle Nutzer auf allen Unterlagen.

    Da gibt es doch sicherlich eine auch für Westfalen verständliche Lösung?!? Hat jemand eine Idee für mich?

    Ein Bochumer grüßt aus Dortmund
    thozab

    1. Webtimiser

      Hallo Thozab,
      bei a) liegt das Problem vermutlich in den Anführungszeichen. Sollte so aussehen: “Einrichtungsleitung”.
      Zu b) Du kannst nach dem Abschicken des Formulars den User auf eine andere Seite leiten, aber nicht direkt zu einem anderen Formular.
      Viele Grüße
      Sonia

  37. User Avatar

    Hallo,
    habe selber eine Lösung gefunden. Problem war, dass bei “Von” (“From”) nicht ausreichte, meine E-Mail-Adresse anzugeben, die ich beim Server habe – die weicht nämlich etwas von der Seitendomain ab -, sondern ich musste einfach eine “ausgedachte”, aber dafür komplett mit dem Servernamen übereinstimmende E-Mail-Adresse haben. Dann hat es sofort funktioniert.
    (By the way): Wie kann ich wieder das “Kommentar-Abonnement” bei “webtimiser” deaktivieren?
    Vielen Dank und viele Grüße!

  38. User Avatar

    Hallo,
    vielen Dank für diese Anleitung. Trotzdem komme ich nicht ganz weiter:
    Obwohl ich alles (meiner Meinung nach) korrekt eingesetzt habe, erscheint bei meinen Testmails, die ich mir über das Formular verschicken möchte, immer die Meldung:
    “Beim Versuch, deine Mitteilung zu versenden, ist ein Fehler aufgetreten. Bitte versuche es später noch einmal.”
    Keine Ahnung, woran das liegen könnte. Mails aus dem System werden sonst korrekt verschickt (auch jetzt aktuell), nur beim CF7 funktioniert es nicht. Konfigurationsfehler, die vorher angezeigt wurden, konnte ich durch diese Anleitung “eliminieren”, d. h., dass eigentlich alles korrekt konfiguriert ist. Hat irgendjemand dazu eine Idee? Ich wüsste nicht, was ich sonst noch ändern könnte…

  39. User Avatar

    Habe bei der Suche nach einer Anleitung für das Stylen eines Formulars von Contact Form 7 Ihren Blog gefunden. Super! Danke für diesen und die anderen hilfreichen Beiträge.

    1. Webtimiser

      Gerne! Freut mich, wenn die Anleitungen weiterhelfen!

  40. User Avatar

    Hallo Sonia,

    da ich zuerst nicht wirklich daran glauben mochte, dass Mehrspaltigkeit durch Contact Form 2 nicht nativ, bspw. durch shortcodes, umzusetzen ist, bin ich hier auf Deinem Blog gelandet.

    Daher möchte ich mich ganz herzlich für Deine hilfreichen Ausführungen zu CF7 bedanken.

    Viele Grüße nach Freiburg
    Jürgen

    1. Webtimiser

      Hallo Jürgen,
      gerne, hoffe ich konnte Dir weiterhelfen!

      Viele Grüße nach Seinsheim
      Sonia

      1. User Avatar

        Hallo Sonia,

        ja sehr, danke nochmals für die Inspiration.

        Eine klitzekleine Kleinigkeit fiel mir noch beim Testen der CSS-Eigenschaften auf: Die Attribute für die rechte Spalte müssen entsprechend um “float” ergänzt werden – und bei den media queries für das responsive Webdesign muss natürlich die Breite analog auf 100% gesetzt werden:

        .form_half_last {
        width: n%;
        float: left;
        margin-right: 0px;
        }

        @media (max-width: 767px) {

        .form_half_last {
        width: 100%;
        }
        }

        Viele Grüße
        Jürgen

  41. User Avatar

    Hallo,
    ich habe zwei Radiobuttons für die Anrede eingebaut,
    doch in der Mail kommt nur das TAG [radio-347] an.

    [radio radio-347 class:genderlabel label_first use_label_element “Frau” “Herr”]

    Kann ich das irgendwie einstellen, dass ich in der Mail auch die Anrede verwenden kann, sonst ist diese Abfrage ja nutzlos.

    Vielen Dank

    1. Webtimiser

      Hallo Monti,
      habe deine Tags getestet und bei mir funktioniert es. Vielleicht hast Du im Mail-Tab nicht das entsprechende Tag für den Radio-Button eingefügt?
      VG Sonia

  42. User Avatar

    Hallo,
    nach langem suchen bin hier gelandet.
    Mein Problem ist, dass CF7 mir zwar meldet, dass die Nachricht verschickt wurde, es aber nicht tut.
    Es kommen also keine Mails bei mir an.
    Die Seite ist bei Evanzo.

    Testweise habe ich das Formular auf einer Seite bei 1&1 getestet. Da funktioniert es einwandfrei.

    Bei Evanzo habe ich keine Hinweise für das Problem finden können.

    Viele Dank für die Unterstützung.
    Roland

    1. Webtimiser

      Hallo Roland,
      hast Du schon mal den Evanzo-Support kontaktiert? Scheint ein Problem der Servereinstellungen (PHP Mail) zu sein. Alternativ würde ich dieses Plugin austesten: https://wordpress.org/plugins/wp-mail-smtp/.
      Viele Grüße
      Sonia

    2. User Avatar

      Hallo Sonja,

      vielen Dank für die schnelle Antwort.

      Das Plugin habe ich ausprobiert. Da alles auf englisch ist, weiß ich nicht wirklich was ich getan habe, jedenfalls hat alles nicht funktioniert.

      An den Support habe ich mich heute gewandt. Ich kam nicht früher dazu.

      Viele Grüße und schöne Weihnachten
      Roland

      1. User Avatar

        Hallo Sonja,

        bis jetzt habe ich noch nichts von Evanzo gehört.
        Interessanterweise kamen gerade alle meine Testmails bei mir an.

        Ich habe das Formular erneut geprüft und jetzt funktioniert alles.

        Vielen Dank für die Hilfe
        Roland

  43. User Avatar

    Der Tipp mit “Reply-To: [your-email]” hat keine Erfolg gebracht

    1. Webtimiser

      Hallo Hans,
      was für eine Fehlermeldung wird denn angezeigt?
      VG Sonia

      1. User Avatar

        Da wird keine Fehlermeldung angezeigt, aber es hilft auch nichts.

        Hab es zwschenzeitlich so gelöst, ich schreib bei Von: [your-name]
        und ignoriere einfach die Meldung “Diese E-Mail-Adresse gehört nicht zu der selben Domain wie die Website.”

  44. User Avatar

    Hallo,
    ich habe bei einem Kunden neuerdings das Problem das das Email Formular nur die HTML Tags überträgt, aber nicht den Inhalt der Email. Es wurde am System oder Formular nichts verändert und lief bis vor kurzem einwandfrei.
    Der Inhalt der Mails sieht jetzt so aus:

    [your-name]
    Tierschutz Mölln e.V. “[your-subject]”

    Von: [your-name]
    Betreff: [your-subject]
    Nachrichtentext:
    [your-message]

  45. User Avatar

    Hallo,
    ich habe das Problem, sobald ich es genau so mache wie oben beschrieben (es geht um Felder nebeneinander darstellen),
    dass die Felder, die nebeneinander sein sollen “gesperrt” werden, d.h. direkt kann man drauf net mehr klicken und Werte eingeben, sondern es geht nur mit der TAB-Taste (quasi Wechsel zum nächsten Feld)
    Woran könnte das liegen?

    1. Webtimiser

      Hallo,
      kann ich leider so nicht beantworten, müsste ich mir auf der Seite ansehen.
      VG Sonia

  46. User Avatar

    Hallo und vielen Dank für die Anleitung!

    Ich habe dennoch eine Frage. Wie kann ich einstellen, dass bei dem Textfeld für den Namen nur Buchstaben (keine Zahlen) eingegeben werden können?

  47. User Avatar

    Vielen Dank für die tolle Seite und die Anleitung.
    Ich habe ein Buchungsformular erstellt. Ich möchte allerdings, dass bei den
    Feldern Anreise und Abreise (also bei Datum) ein kleines “Popup mit einem kleinen Kalendar” erscheint. Bis jetzt ist es nur so,
    dass der Kunde selbst das Datum im Format YYYY-MM-DD eingeben muss. Was sehr mühselig ist meiner Meinung nach. Gibt es dazu eine Lösung?

      1. User Avatar

        Hallo Sonia,

        das ist ja perfekt. Genau danach habe ich gesucht. Danke für die superschnelle Rückmeldung!
        Ich bleibe dieser Seite defintiv treu.

        Grüße

        1. Webtimiser

          Hallo Simon,
          prima, freut mich!
          LG Sonia

      2. User Avatar

        Hallo Sonia, danke nochmals für die schnelle Rückmeldung.
        Ich habe noch ein kleines Problem.

        Undzwar bei dem Punkt, E-Mail(2). Ich will, dass der Absender eine automatische
        Benachrichtigung an seine angegebene Emailadresse bekommt.

        Ich habe schon einiges versucht aber irgendwie klappt es noch nicht. Was mache ich falsch?

        1. Webtimiser

          Hallo Simon,
          wird das Formular denn abgesendet? Wenn ja, überprüfe mal die Einstellungen unter E-Mail(2). Hier sollte genau der Tag für die Absender-Adresse stehen. Manchmal hilft es auch, wenn man die Absenderadresse zum Pflichtfeld macht. Also [ email* your-email ]

  48. User Avatar

    Hallo und vielen Dank für die Anleitung!

    Eine Frage habe ich zur Konfiguration: Ich habe sowohl Kontrollkästchen als auch später Radio-Buttons zu integrieren versucht. Beide werden zwar im Formular im Frontend angezeigt; man kann eine Auswahl treffen, doch wird diese nicht in der E-Mail-Nachricht übertragen. Was habe ich hier falsch eingegeben? VG Johannes

    [checkbox xyz id:idfoo class:classbar “AUSWAHLTEXT 1 ” “AUSWAHLTEXT 1 “]

    1. Webtimiser

      Hallo Johannes,
      das ist der Code aus dem Reiter Formular – prüfe doch mal was im Reiter E-Mail steht. Wenn ich Dein Beispiel übernehme, sollte eingetragen sein:
      Meine Checkbox: [xyz]
      VG Sonia

  49. User Avatar

    Vielenvielen Dank für die tolle Anleitung!

    1. Webtimiser

      Hallo Ilka,
      freut mich, wenn Sie Dir weitergeholfen hat!
      VG Sonia

  50. User Avatar

    Hallo, danke für die ausführliche Anleitung.
    Ist es möglich, CF7 auch für Kommentarseiten zu konfogurieren? Ich nutze das Extra Theme von Elegant Themes. Dort können Kommentarformular und die eingegangenen Kommentare selbst zusammen als Modul auf Seiten eingesetzt werden. Da mir das Default-Formular für die Kommentare nicht gefällt und ich ich zudem CF7 schon auf der Kontaktseite mit einem eigens kofigurierten Formular nutze, überlge ich, ob ich die default-Version mit einem eigenen CF7-Formular für die Kommentare nutze – weiß aber nicht, wie ich die dort eingegangenen Kommentare dann auch auf der entsprechenden Seite anzeigen kann. Ist das irgendwie möglich?

    1. Webtimiser

      Hallo,
      ein wirkliches Kommentarsystem kann man mit CF7 vermutlich nicht wirklich gut umsetzen. Du könntest es mit Contact Form DB versuchen, also die Formulareingaben speichern und wieder auf der Seite anzeigen lassen. Wenn Dir nur das Design nicht gefällt, wäre es aber vielleicht besser, die Optik per CSS anzupassen.
      VG Sonia

  51. User Avatar

    Hallo, vielen Dank für die Bereitstellung des Tools. Gefällt mir gut. Nur leider funktioniert es bei mir nicht.
    Wenn ich die Mail absende, meldet er das er einen Fehler festgestellt hat. Leider finde ich nicht was sein Problem ist.
    Ich habe es schon auf das einfache (Name,Mail,Text) beschränkt. Würde natürlich gerne noch einen Datei Upload und Recaptcha verwenden. Woran kann das liegen, bzw. wo sehen ich was sein Problem ist?

    1. Webtimiser

      Hallo Florian,
      das kann mehrere Ursachen haben: falsche Servereinstellung, Fehler im Formular, Plugin-Konflikt,…. Per Ferndiagnose kann ich Dir da leider nicht weiterhelfen.
      VG Sonia

  52. User Avatar

    Hallo und vielen Dank für die tolle Anleitung. Ich möchte gern das Textfeld und das recaptcha Feld noch anpassen. Das Textfeld hat bei mir eine feste Größe, und das sieht doof aus, wenn ich die anderen Felder auf 100 % stelle. Auch im mobilen Design. Wenn ich aber Folgendes in die style.css setze, funktioniert es nicht:

    #anfrage input[type=”textarea your-message”] {
    with:100%;
    }

    Könnt Ihr bitte helfen?

    Herzliche Grüße, Gina

    1. Webtimiser

      Hallo Gina,
      freut mich, wenn die Anleitung dir weiterhilft!
      Probier doch mal folgenden CSS-Eintrag: .wpcf7 textarea {
      with:100%;
      }
      oder falls es ein Textfeld ist:
      .wpcf7 input[type="text"]{
      with:100%;
      }

      LG Sonia

      1. User Avatar

        Hallo Sonia, vielen Dank für die schnelle Antwort. Funktioniert aber leider beides nicht 🙁

        1. Webtimiser

          Hallo Gina,
          Ferndiagnose klappt leider nicht immer – poste doch mal den Link zum Formular.

          1. User Avatar

            Hallo Sonja,
            bei mir funktioniert der CSS-Eintrag auch nicht. Das Textfeld Nachrichten und das recaptcha Feld lassen sich nicht im responsive Design anpassen.
            Der von dir vorgegebene Code funktioniert bei mir auch nicht.
            Kannst du mir bitte einen Tipp geben?
            LG Kerstin

          2. Webtimiser

            Hallo Kerstin,
            der Beispiel-Code zeigt ja, wie man die Felder in 2 Spalten anlegt. Wenn das Textfeld über die ganze Breite gehen soll, musst du das erst festlegen. Bei deinem Formular: .Nachricht textarea {width: 100%;}. Die Breite für ReCaptcha kannst du über .rc-anchor-normal steuern.
            VG Sonia

  53. User Avatar

    Hallo,
    kann man das Contact Form 7 Formular auch für Kommentarfelder nutzen, also wie hier meine Anfrage direkt auf der Seite darstellen?

    1. Webtimiser

      Hallo,
      eine direkte Ausgabe ist so nicht möglich. Aber mit dem Plugin Contact Form DB kann man die Formular-Angaben in der Datenbank speichern und anschließend auf einer Seite anzeigen lassen.

      VG Sonia

  54. User Avatar

    Tolle Anleitung!
    Beim ausprobieren bin ich bei folgendem Problem hängen geblieben.
    Die Felder bekomme ich übersichtlich nebeneinander dargestellt.
    Leider lassen sich diese nicht beschreiben.
    Die Originalfelder (unveränderten) hingegen lassen sich mit den erforderlichen Angaben weiterhin ausfüllen.
    Lieben Dank für eine Problemlösung.

    1. User Avatar

      Problem gelöst!
      Plugin: CF7 Skin wurde über “los” geschickt 🙂

  55. User Avatar

    Guten Tag,

    Guter Artikel!

    Ist es möglich mehrere Email-tags einzufügen? Es ist begrenz auf: [your-name][your-email][your-subject][your-message]

    Beim Rücksendeformula würde ich gerne noch eine extra email-tag für die Bestellungsnummer verwenden.

    Wie kann ich diesen einbauen, so dass die Information dann in der verschickten email auch an der richtigen Stelle ist.

    Vielen Dank im Voraus!

    1. Webtimiser

      Hallo Jan,
      danke!
      Bin nicht sicher, ob ich deine Frage richtig verstanden habe… Im Abschnitt E-Mail (2) kannst Du noch weitere Maileinstellungen vornehmen und weitere Mailadressen kann man bei Additional Headers einfügen. Z.B. CC: info at mailadresse und/oder eine Reply-Mailadresse.
      VG Sonia

  56. User Avatar

    Wie bekomme ich es hin das alle felder im Contact form die gleiche Länge (width size) haben?

    1. Webtimiser

      Hallo Bernd,
      sollte über eine simple CSS-Anpassung möglich sein. Z.B. für die Textfelder: .wpcf7 input[type="text"] width:100%;
      VG Sonia

  57. User Avatar

    Diese Seite ist sehr informativ, aber dennoch habe ich ein Problem:
    Ich möchte zwei Felder in einer Zeile haben: PLZ + Ort
    Ich habe dies über die CSS-Eigenschaften wie folgt gemacht:
    .form_half2 {
    width: 24%;
    float: left;
    margin-right: 1%;
    }
    .form_half_last2 {
    margin-right:0;
    }
    im Contact-Plugin selbst habe ich diese Felder so deklariert:
    Straße- u. Hausnummer *: (Pflichtfeld)
    [text Straeu.Hausnummer:]

    PLZ *: (Pflichtfeld)
    [text PLZ size:10]

    Ort *: (Pflichtfeld)
    [text Ort: size:500]

    Daie Anforderung liegt darin dass die beiden Felder unterschiedlich gross sein sollen. Leider funktioniert dies überhaupt nicht.
    An was könnte denn dies liegen?

    1. Webtimiser

      Hi Stefan,
      die Angaben sind alle OK, nur werden die Anweisungen vom Theme-Style überschrieben: Zeile 432 input[type=”text”] min-width: 200px;

      VG Sonia

      1. User Avatar

        Hallo Sonia,
        vielen Dank für die Lösung bzw. Hilfe…
        VG Stefan

  58. User Avatar

    Prima Anleitung,
    Eine Frage hätte ich. Für ein Formular mit Datumsangabe habe ich das Plugin Contact Form 7 Datepicker installiert und es wird auch als Tab im Editor gezeigt, aber leider zeigt sich der Datepicker nicht auf meinem veröffentlichten Formular. Muss ich etwas spezielles machen, dass er sich zeigt? Danke

    1. Webtimiser

      Hallo Jörg,
      ich glaube Du hast das Feld als Select-Feld angelegt. Versuche doch mal es als Datumsfeld anzulegen, dann müsste das Plugin sich auch einhaken können.

      Viele Grüße
      Sonia

      1. User Avatar

        Ich habe gerade noch mal ein neues Formular angelegt und dort ein Feld vom Typ “date” hinzugefügt, aber es zeigt sich kein DatePicker.
        Vielleicht liegt es auch an dem Tempate

          1. User Avatar

            Alles klar. Vielen Dank.
            Dann werde ich mal updaten.

  59. User Avatar

    Hallo aus Köln,

    ich würde gerne innerhalb des Formulars eine Lin k zu den ABG´s einbauen. Ist das möglich.
    Danke euch

    1. Webtimiser

      Hallo Andreas,
      klar ist das möglich! Einfach im Reiter Formular den Text einfügen: dein text mit link zu AGBs
      VG aus Freiburg, Sonia

  60. User Avatar

    Super Anleitung, hat mir gut geholfen. Bekomm das Datumsfeld nur nicht zum laufen, sagt ständig “Ein oder mehrere Felder sind fehlerhaft. Bitte überprüfe sie und versuche es noch einmal.”
    Im WordPress habe ich das Datumsformat schon angepasst. Was muss ich ändern damit das deutsche Datum TT.MM.YYYY angenommen wird. VielenDank!

    1. Webtimiser

      Hallo,
      nutzt Du das Plugin Contact Form 7 Datepicker?
      VG Sonia

      1. User Avatar

        Hallo Sonja, muss ich das Plugin Contact Form 7 Datepicker dazu nutzen oder kann ich auch auf andere Art auf deutschen Datumsformat TT.MM.JJJJ ändern?

        1. Webtimiser

          Hallo Kolli,
          in CF7 muss das Datum im Format YYYY-MM-DD sein. Mit dem Datepicker-Plugin sollte man es aber ändern können.
          VG Sonia

  61. User Avatar

    Hallo,
    danke erstmal für die echt gute Anleitung. Mein Problem ist, dass ich trotz oben genannter ANleitung zwar die Kopie-Mail beim Kontaktierer ankommt, allerdings nicht die Original-Mail an die hinterlegte Adresse. Gibt es etwas das ich noch versuchen kann ?

    1. Webtimiser

      Hallo Lisa,
      häufig gibt es Probleme, wenn die Mail-Adresse nicht mit der Serverdomain übereinstimmt. Gelegentlich liegt es auch am Provider. Bei einigen muss man erst noch eine primäre Mailadresse hinterlegen.
      VG Sonia

  62. User Avatar

    Hallo,
    wie kann ich einstellen, dass ich als Admin sehe von welchem Namen und welcher E-Mail-Adresse die Anfrage kommt. Derzeit bekomme ich nur in meinem Postfach als Absender “Wordpress” angezeigt:

    Im Bereich “Von” habe ich folgenden Tag: [your-email]

    Danke für die Hilfe

    1. Webtimiser

      Hallo Fabian,
      wenn im Formular der Name abgefragt wird, kannst Du das entsprechende Feld einfügen. Z.B: [your-name] statt [your-email].
      VG Sonia

  63. User Avatar

    Guten Tag.
    Ich bin neu hier, und an erste stelle möchte ich mich recht herzlich für Anleitung bedanken!
    Bin gerade dabei “Contact Form 7” als Gutscheinbestellung einzurichten, stolpere aber an email Gestaltung.
    Kann mir jemand ein par Tipps geben, oder ein beispiel? Da muss nur ein Bild und Text rein.

  64. User Avatar

    Vielen Dank erstmal für die tolle Anleitung!
    Eine Frage habe ich noch:
    Wie erreiche ich, dass zwei Felder nebeneinander dargestellt werden in mehreren Spalten.
    Ich habe versucht immer die jeweiligen zwei Felder nebeneinander jedesmal mit
    Feld 1
    Feld 2
    Feld 3
    Feld 4
    darzustellen. Dabei wird aber alles außer die erste Zeile komplett verzogen und die Felder sind alle untereinander aber nur noch ganz klein…

    1. Webtimiser

      Hallo Tilo,
      wodurch das Layout zerschossen wird, kann ich Dir ohne das Formular zu sehen leider nicht sagen.
      VG Sonia

      1. User Avatar

        Hallo Sonia,

        hab es mittlerweile hinbekommen. Danke!
        Habe schon wieder ein neues Problem. Wie kann ich die Schriftfarbe und Größe der Eingabefelder ändern?
        VG
        Tilo

        1. Webtimiser

          Prima! Die Größe der Felder ist ja in Prozent angegeben. D.h. Du musst im Page-Builder die Spalte in der das Formular ist größer machen. Die Schriftfarbe kannst Du im CSS anpassen. Z.B.:
          .wpcf7 input[type=”text”] {color:blue;}

          1. User Avatar

            Super Danke!

  65. User Avatar

    Nachtrag: Leider gibt es diverse Formatierungsprobleme mit dem von mir verwendeten “Nirvana” Template, das Formular wird fehlerhaft dargestellt. So fehlt z.B. der Abstand zwischen den beiden “div” Feldern und dem nachfolgenden “Betreff”, und Feld1 ragt ein Stück weit in Feld2 hinein. Diverse Anpassungen am padding etc. haben nichts gebracht 🙁 Nichtsdestotrotz, nochmal herzlichen Dank für Deine Hilfe Sonia, vlt. probiere ich das lokal mat einem anderen Template aus.
    Lieber Gruß, Frank

  66. User Avatar

    Eine Frage habe ich noch dazu, was muss ich denn eigentlich bei “Feld1” und “Feld2” eintragen ? Ich habe schon verschiedene Einträge probiert, aber getrennt wird da leider nichts.

    1. Webtimiser

      Hallo Frank,
      hier kommt das gewünschte Formularfeld rein, z.B. Name, Vornname…
      VG Sonia

      1. User Avatar

        Hallo Sonia, danke für Deine Antwort. Nur, was genau muss da rein ? In Eurem Beispiel fehlt leider genau dieser Eintrag, wie heißen denn die Felder bzw. welche Werte muss ich verwenden ? z.B. Bei Feld1 links [e-mail] eintragen ? Ich habe bereits alles mögliche versucht, aber die Felder werden trotzdem untereinander angezeigt. Könntest Du vlt. den kompletten Eintrag für die css posten, inkl. der beiden div Zeilen MIT funktionsfähigen Feldern ? Ich weiß nicht mehr weiter, vlt. habe ich auch ein Problem mit meinem Template.
        Lieber Gruß, Frank

        1. Webtimiser

          Hallo Frank, habe den Artikel um einen Screenshot ergänzt. Hoffe, es hilft Dir weiter!
          LG Sonia

          1. User Avatar

            Hallo Sonia, vielen Dank, funktioniert 🙂 Muss leider zugeben, dass ich mich etwas schusselig angestellt habe. Die beiden div Zeilen hatte ich ins css mit reingeschrieben, statt ins Formular. Aber sowas passiert, wenn man nachts um 1 Uhr an einer Seite arbeitet 🙂
            Lieber Gruß, Frank

  67. User Avatar

    Danke euer Artikel hat mir schon sehr geholfen ! Vielleicht könnt ihr mir auch erklären wie ich check-boxen nebeneinander darstellen kann. Das die Besucher bei mehreren Auswahlmöglichkeiten nicht soweit nach unten scrollen müssen.

    1. Webtimiser

      Hallo,
      schaue doch mal im CSS nach: .wpcf7-list-item
      VG Sonia

  68. User Avatar

    Hallo, danke für die Anleitung. Den Fehler der falschen server-Adresse konnte ich beheben, aber leider zeigt Contact Form mir diesen Fehler “This field can be empty depending on user input” im Feld [your-subject] auch an und ich habe keinen blassen Schimmer warum. Könntest Du mir weiterhelfen?

    1. Webtimiser

      Hallo Thomas,
      die Fehler wird gemeldet, da das Feld “Betreff” nicht leer sein sollte. Könnte dann als Spam eingestuft werden. Entweder Du legst es im Formular-Reiter als Pflichtfeld an [text* your-subject] oder Du ergänzt im E-Mail-Reiter den Betreff: [your-subject] / Webformular.
      Kannst mir ja Bescheid geben, ob es funktioniert – dann ergänze ich meine Anleitung.

      1. User Avatar

        Perfekt, danke. Ich habe den Stern hinter Text* gesetzt und alles ist gut. Dann wird das Feld “subject” eben auch zum Pflichtfeld. Vielen Dank nochmal.

  69. User Avatar

    Das Plugin Really Simple CAPTCHA wird seit einem Jahr nicht mehr aktualisiert, was nimmt man am besten statt dessen?

    1. Webtimiser

      Würde mal Google Captcha (reCAPTCHA), Captcha oder WordPress Zero Spam testen.

      1. User Avatar

        Danke, das schaue ich mir an.

  70. User Avatar

    Super Anleitung. Versuche zur Zeit das Design von meinem Contact Form mit CSS zu optimieren. Dazu habe ich wie beschrieben den CSS Link in das Plugin Simple Custom CSS eingefügt. Jedoch konnte der Code nicht angezeigt und bearbeitet werden. Passiert leider nichts. Woran kann dies liegen? WordPress Version??

    1. Webtimiser

      Hallo Gerd,
      hast Du schon mal ein anderes Plugin ausprobiert? Oder über Jetpack?
      VG Sonia

    2. User Avatar

      Wenn du dich mit CSS ein wenig auskennst, kannst du die Styles in deiner Child style.css rein schreiben.
      Die Klassen sieht man ja, wenn man im Browser die Option “Element untersuchen” wählt. Notfalls schreibst du hinter jeder Anweisung !important, dann klappt das auch 🙂

  71. User Avatar

    Servus, kannst du mir bitte kurz erläutern in welcher Datei es genau rein kommt?? Ist es die Style.css ganz unten?? Gruß

    1. Webtimiser

      Hallo Alex,
      meinst Du den CSS-Code? Der muss in die style.css.

  72. User Avatar

    Wie erreicht man, dass zwei Felder nebeneinander dargestellt werden (wie im Beispiel zu sehen ist?

    1. Webtimiser

      Hallo Ben, habe die Anleitung soeben um den Code-Schnipsel ergänzt. Hoffe, es hilft weiter!

Schreibe einen Kommentar

Menü schließen