WordPress für Designer: Themes und Layout-Werkzeuge

Contact Form 7

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Kaum eine Website kommt ohne Kontaktformular aus. Die beliebteste Erweiterung für Kontaktformulare in WordPress heißt Contact Form 7.

Transkript

Wir wollen uns nun anschauen, wie man ein Kontaktformular einfügen kann. Wir befinden uns jetzt gerade auf der Kontaktseite und diese beinhaltet alle möglichen Kontaktinformationen und sogar eine Google Map, aber ein Formular fehlt. Ja, und um dieses hinzuzufügen, müssen wir allerdings ein Plugin installieren, da WordPress nicht nativ Kontaktformulare bietet. Dazu wechseln wir also zu unserem Dashboard und gehen hier in den Bereich Plugins. So, und dieses Plugin löschen wir uns erst mal gerade. Das bezieht sich auf Blocks. Wir benutzen keinen Block auf unserer Seite. Deswegen löschen wir dieses, da unnötige Plugins uns nur Ressourcen kosten. So, als nächstes wollen wir ein Plugin installieren, also klicken wir hier oben auf Installieren. So, und als nächstes suchen wir nach einem Plugin und zwar nennt sich das bekannteste und beliebteste Kontaktformular Plugin Contact Form 7. Hier haben wir es auch schon. Wir müssen einfach nur auf Installieren klicken. Man sollte darauf achten, dass hier ein Häkchen gesetzt ist bei Kompatibel mit dieser WordPress Version. Sollte das Plugin nicht kompatibel sein, sollte man hier entweder noch etwas abwarten bis das Plugin aktualisiert wird oder vorsichtig sein. Vielleicht erst mal installieren und dann noch mal die ganze Seite testen, ob auch noch alles funktioniert. Falls irgendetwas nicht funktioniert, muss man das Plugin wieder deaktivieren. Ja, wir wollen also das Contact Form 7 installieren. Deswegen klicken wir auf die entsprechende Schaltfläche und müssen dann hier, wenn wir hier fertig sind, als nächstes das Plugin noch aktivieren. Es wird also jetzt runtergeladen. Jetzt haben wir es aktiviert und jetzt landen wir auf der Plugin Seite selber und können hier dann in die Einstellungen gehen. Daraufhin landen wir in den Einstellungen vom Kontaktformular und es kommt hier ein neuer Bereich, Formulare, hinzu. So, und wir können jetzt hier mehrere Formulare erstellen, indem man Neu hinzufügen klickt, erscheint hier ein neues Formular. Standardmäßig beinhaltet nach der Installation hier Contact Form 7 schon ein Formular. Dieses können wir jetzt einfach weiter verwenden. Ich klicke dazu hier auf Bearbeiten, dann sind wir hier im Formular drin. Ja, hier sehen wir jetzt ein einfaches Formular oder den Quelltext dazu. Wir haben hier Text, das heißt, das sind Paragraphen. Wir haben also einen Paragraphen für jedes Kontaktformular. Hier steht dann das Lable, also Your Name und hier steht required, das heißt, es ist ein Muss-Feld. Es muss ausgefüllt werden. Das ist auch immer dann gegeben, wenn ich hier dieses Sternchen zu sehen ist. Ja, und hier steht jetzt in dem Fall der Platzhalterquelltext für das Text Formular, für den Namen. Hier haben wir ein Formular für die E-Mail, hier für den Betreff. Hier haben wir einen ganzen Textbereich und hier den Senden-Button. Wenn wir jetzt ein weiteres Element haben möchten, dann können wir einfach, sagen wir mal wir machen hier Vorname und Nachname, dann schreibe ich jetzt hier einfach mal Vorname rein und dann kopiere ich mir das Feld einfach und füge es darunter wieder ein und schreibe ich jetzt Nachname rein. Wenn man ein anderes Feld wünscht, dann löscht man einfach diesen Bereich hier raus in den eckigen Klammern und da wo die Maus blinkt, an der Stelle können wir jetzt ein anderes Formularfeld einfügen. Hier gibt es neben der Text Box, der E-Mail Box, der URL Box, eine Box für die Telefonnummer, für Zahlen, fürs Datum usw. Wir wollen eine normale Text Box haben, also klicken wir hier hin, dann öffnet sich ein neues Feld. Wir können hier ein Häkchen setzen, dass es erforderlich sein soll. Dann sehen wir auch, dass hier der Stern erscheint. Ja, hier kann man einfach das Feld ja, durchnummerieren. Das kann man so lassen, wie es ist. Standardwert heißt, man würde einen Platzhaltertext in das Feld einfügen, wenn also nicht vor dem Feld stehen würde, Nachname, dann könnte man hier Nachname reinschreiben und dann würde innerhalb des Textfeldes hier Nachname auch angezeigt. Ja, wir können hier noch mit IDs arbeiten, wir können Klasseneigenschaften anwenden, damit das Formularfeld anders aussieht und so weiter. Ich klicke auf Einfügen und dann... ja, dann sehen wir hier jetzt das Textfeld, was hier nun hinzugefügt wurde. So, und wenn wir das jetzt verwenden wollen, dann benötigen wir hier oben diesen Code. Den kopieren wir uns in die Zwischenablage. Doch bevor wir den gleich einfügen, schauen wir uns noch die anderen Bereiche an. Wir haben nämlich hier noch E-Mail. Das heißt, an dieser Stelle hier können wir jetzt unsere E-Mail-Adresse eingeben. Von wo das Ganze gesendet wurde, wir können einen Betreff vordefinieren, einen zusätzlichen Header und das hier ist der Platzhalter für die Nachricht. Das heißt, hier steht From: und dann steht halt derjenige, der seinen Namen angegeben hat. Subject: also der Titel, der Betreff. Und Message Body: hier ist dann Your Message. Und das sind genau die Bereiche, so wie sie auch hier vorne im Formular denn hießen. Ja, und bei Meldungen können wir jetzt noch die Meldung festlegen, die erscheinen soll, wenn man zum Beispiel das Datumsfeld nicht ausgefüllt hat. Dann steht hier, das Datumsformat ist ungültig. Oder zum Beispiel eine Datei, die hochgeladen wurde, ist so groß. Wir haben also hier für alle möglichen Fälle bereits Texte, die wir editieren können. Die ersten hier sind Englisch, die kann man natürlich ganz einfach dann übersetzen. So, wir haben also jetzt diesen Bereich in der Zwischenablage. Wir speichern das Formular und jetzt können wir zu unserer Seite wechseln, wo wir das Formular haben möchten, nämlich der Kontaktseite. Und hier starten wir jetzt Cornerstone und dann erzeugen wir uns in Cornerstone jetzt hier einen Bereich zwischen Kontakt und der Google Map. Dazu gehen wir in dem Fall in die Section, das heißt, hier unter Layout haben wir Get in Touch und hier haben wir jetzt die Rows. Genau, und zwischen den Rows möchte ich jetzt eine weitere haben, zwischen den beiden. Dazu erzeuge ich mir einfach eine neue und verschiebe diese in der Reihenfolge. So, und hier möchte ich jetzt das Formular einfügen. Also klicke ich hier in der Mitte rein, um in die Elemente zu gelangen. Dann suche ich nach Text und nehme ein ganz normales Textfeld, was ich dann hier einfügen möchte. So, hier ist das Textfeld. Wenn ich es anklicke, dann habe ich jetzt hier die Möglichkeit, Text einzufügen. In der visuellen Ansicht, wo man ein bisschen ja, visueller editieren kann, oder in die Textansicht, wo wir Quelltext einfügen können. Und hier füge ich jetzt das Kontaktformular ein. Den Bereich, den ich eben in die Zwischenablage kopiert habe. Und hier sehen wir schon das Ergebnis. Hier steht jetzt Vorname, Nachname, E-Mail, Subject und Message und Send. Ja, und diese Texte haben wir ja gesehen, wo wir die editieren können, wie sich das Ganze anpassen lässt, wie sich Formulare ja, entfernen lassen oder noch weitere hinzufügen. Es ist also somit relativ einfach über das Contact Form 7, sich ein Kontaktformular zu generieren mit den unterschiedlichen Elementen und diese hier auch sehr einfach in Cornerstone einzubetten.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!