Contact Form7 Mega-Tutorial: Styling mit CSS - Autoresponder - Checkboxen - uvm.

🔔 JETZT KANAL ABONNIEREN (MIT GLOCKE) UND KEIN VIDEO MEHR VERPASSEN 🔔
---
Automatisiertes Business mit WordPress & Digistore24

🔥 DIESER GRATIS-FUNNEL PRODUZIERT GELD 🔥
---
In diesem Video nehmen wir uns das Contact Form 7 zur Brust und bauen Checkboxen ein, integrieren den Zustimmungs-Haken und natürlich darf auch ein Autoresponder nicht fehlen. Nach der Pflicht kommt dann die Kür und wir verpassen unserem Contact Form 7 am Ende auch noch ein richtig schickes Design!

Vergiss bitte nicht den Daumen nach oben und das Kanal-Abo ;-)

Viel Spaß mit dem Tutorial!
Joachim

Inhaltsverzeichnis:
0:00 Intro
8:18 Formular beschriften
10:14 Beschriftung in Felder setzen
13:36 Checkboxen hinzufügen
15:11 Checkboxen Auswahl definieren
16:07 Ganze Zeile zur Checkbox-Auswahl nutzen
17:57 Einwilligung zur Datenverarbeitung
19:33 Meldung einblenden bei Nicht-Auswahl
21:07 Position und Inhalt der Meldung ändern
23:20 E-Mail anpassen - Alle Infos erfassen
24:30 Autoresponder einfügen
29:00 Komplettes Styling mit CSS
32:30 Felder nebeneinander setzen
---
Das Formular aus dem Video - Einfach Copy&Paste

In diesem Text-Dokument findest du alle Shortcodes und den CSS-Code zum Einfügen in deine WordPress-Webseite:

---
Inspiration und Information:
Webtimiser | Sonia Rieder

---
Das sind die Dinge, die du in diesem Tutorial lernst:

1. Beschriftung ändern
2. Wir setzen Felder nebeneinander
3. Checkboxen hinzufügen
3.1 use_label_element
3.2 exclusive (nur eins von beiden)
4. Datenschutz-Häkchen hinzufügen
5. Button anklickbar machen
6. Meldung ändern
7. Position der Meldung ändern
8. Autoresponder einbauen
9. Style in CSS kopieren
10. Style übernehmen
-----
Vielen Dank an das Team von SiteOrigin für das anspruchsvolle Vantage-Theme, den PageBuilder, das Widgets Bundle und nicht zu vergessen den CSS-Editor.

-----
-----
Der MEGA WordPress & SEO Videokurs*

Du hast richtig Bock auf WordPress bekommen und willst richtig einsteigen? Hier ist einer der besten Kurse, die es in Deutschland gibt
-----
Weitere interessante Videos:

WordPress installieren in 15 Minuten

AutoResponder mit ContactForm7

Auf die erste Seite bei Google mit OnPage-Optimierung

#cf7tutorial
#cf7autoresponder
#cf7styling

[intermanie]

Ich habe auch ein Problem mit dem ändern der Schriftfarbe. Alles andere hat wunderbar geklappt. Danke für das sehr übersichtliche und verständliche Tutorial. Ich würde mich freuen, wenn mir jemand dazu eine Hilfe geben könnte.

[wolfenrico]

Ich habe vor ein paar Wochen begonnen mich mit WP ernsthaft zu beschäftigen. Vorher habe ich überwiegend mit HTML, CSS und JS codiert. Dein Tut ist spitze und hat mir sehr weitergeholfen. Ich habe mich mit dem ContactForm7 autodidaktisch "rumgequält" und bin erst jetzt auf Dich gestoßen! Danke!

[lennard.online]

Danke für das ausgezeichnete Tutorial!

[wahnsonic]

Hey Joachim, tolles Tutorial, coole Sache. Meine Fragen sind alle beantwortet. PS.: viele Grüße von den Weigel Brothers aus dem dicken B.

[LOM-ER]

Merci beaucoup, et merci pour le partage 😇🙏

[HistorischerMotorsportHieber]

Hi, ein wirklich Super Tutorial! Gerade auch mit CSS das man es Stylen kann. Zum Thema Style, wie kann man die einzelnen Textfelder in CSS ansprechen ?, würde sie gerne in der Breite ändern und den border.radius auch. Gruß Andi

[astroakademie]

Vielen Dank für dieses wirklich großartige Tutorial! Das war extrem hilfreich - DANKE! Und schon aboniert 🙂

[Keyboarder]

Sehr schönes Video. Endlich mal langsam und gut erklärt und für die ganzen "dummen" unter uns : -) auch mal wirklich ganz von vorne erklärt.
Vielen Dank.

[medientroscha]

Wow ich bin noch Einsteiger, ich fand das total sinnvoll und super interessant, werde ich gleich mal selber ausprobieren vielen Dank!;-) Mein Abo haste!

[BrigitteHein]

Vielen Dank für dieses tolle Video! Hast du vielleicht noch einen Code für ein Hintergrundbild, bzw. kann ich das Formular in eine Seite einfügen, die bereits einen Bild-Hintergrund enthält?

[Simon-qjsy]

Hallo Joachim, klasse Tutorial. Hat mir sehr weitergeholfen! Nur eines ist merkwürdig. Meine Textfelder und Beschriftung ist nicht weiß sondern in einem Babyblau. In dem Code ist diese Farbe nirgends vertreten. Wen ich in ein Textfeld klicke, dann wird es weiß (so habe ich es angepasst). Kann ich die Standartfarbe nicht in weiß ändern, so dass es wie bei dir aussieht? (40:00). Bei Google finde ich nichts - würde mcih über eine Hilfestellung sehr freuen!

[manfredt]

Hallo Joachim. Vielen Dank für dieses Video. Alles gut und ausführlich erklärt bzw. gezeigt. Habe alles so nachgemacht. Aber das mit den Feldern nebeneinander setzen hat nicht funktioniert. Habe alles genauso eingestellt mit <div class=....> usw. aber es funktionierrt nicht. Die Felder sind immer noch untereinander. Woran kann das liegen? Vielen Dank schon mal im Voraus.

[GabyAbfalter]

Hallo, super Video
Allerdings bin ich Anfängerin 😞...
Ich arbeite mit Elementor und bei mir erscheint bei der Bearbeitung der Page Builder nicht, auch nicht wenn ich Elementor deaktiviere.
Was mache ich falsch????

[wellondothomashofacker]

Guten Tag Joachim, danke für die Erklärung ich habe das Problem dass mir ein Konfigurationsfehler bei E-Mail2 in der Zeile An [your-email] angezeigt wird. was muss hier noch geändert werden. Die Antwort Mail kommt an. Danke

[chaosbeats]

Ich würde gerne den autoresponder mit einer Verzögerung von 10 min. Verschicken. Also wenn ein Besucher das Formular ausfüllt, bekommt er nicht direkt eine Email, sondern erst nach 10 Minuten... Ist das möglich?🤔

[schmi]

Top-Tutorial! Danke Joachim. Kurze Frage noch: Nutze dein CSS, leider bleibt aber beim aktiven Nachrichtenfeld der Hintergrund weiß. Eingabeschrift ist aber auch weiß, so dass man nichts mehr sieht. Gibt es hier eine Lösung im Code? Danke!

[fliug]

Hallöchen, zum einen möchte ich danke sagen für die Mühe die dieses Video sicher gekostet hat. Ich finde es sehr informativ und konnte viele Inspirationen daraus schöpfen.
Leider hat es nicht auf dem gleichen Wege geklappt wie du es geschildert hast. Da ich mich schon vorab etwas mit dem Programm auseinander gesetzt habe, konnte ich meine Fehler finden und ausmerzen.
Beispielsweise hat es sich bei mir als besser erwiesen die Formularvorlagen zu benutzen, da die von dir gezeigten Beispiele, bei mir, leider nicht funktioniert haben, bzw. Zu Fehlermeldungen führten.
Nichts desto trotz nochmals meinen herzlichsten Dank.

[anja_schnaubelt]

Leider bringt mir das nichts. Schon wenn ich auf "Seite erstellen" gehe, bekomme ich ein anderes Bild. Bei mir gibt es keine Möglichkeit, diese Codes einzugeben. Mir ging es eigentlich nur darum, die Farbe des Senden-Buttons zu ändern, aber das scheint nicht möglich zu sein. Trotzdem super Video, wenn es zu einem passt. :)

[child-of-the-th]

Hallo lieber Joachim, vielen Dank für Dein mal wieder fantastisches Video. Hat mir enorm geholfen. Habe aber ein Problem: Ich kann machen, was ich will, jedes Mal, wenn ich eine Testmail schreibe, kommt der Hinweis: Beim Versuch, deine Nachricht zu senden, ist ein Fehler aufgetreten. Bitte versuche es später nochmal. Habe alles geprüft, finde den Fehler einfach nicht. Was mache ich falsch? Mir ist klar, eine Ferndiagnose ist immer blöd, aber vllt hast du ja trotzdem eine Idee?? Lg

[SebiOst]

Ein wenig zu hecktisch und schnell. Man kann nicht immer ganz verfolgen WO du gerade bist. ;-)
Aber dennoch sehr hilfreich. Danke