Wie erstelle ich in WordPress ein Kontaktformular?

1. Was lernen wir in diesem kurzen Kurs: Hallo und willkommen bei squishier. Ich hoffe es geht dir gut. In diesem Video erfahren wir, wie wir ein einfaches Kontaktformular in WordPress erstellen können . Das Kontaktformular, das wir erstellen werden, wird also ungefähr so aussehen . Du kannst es sehen. Einfache Theorien, die als Ihr Name, Ihr E-Mail-Betreff bezeichnet werden. Und hier verwende ich ein einziges Feld, von dem aus Sie von uns gehört haben. Sie sehen umstritten als Essen und verschiedene Comic-Formen, um zu erwähnen, wissen Sie, Feedback von den Kunden zu erhalten, Beispiel, wo sie davon gehört haben, Über uns. Und dann das einfache Nachrichtenfeld mit einigen optionalen jetzt hier. Und dann ein wunderschöner Submit-Button. Und Sie können hier einfache Effekte sehen. Wir werden also lernen, wie wir dieses erstaunliche Kontaktformular in WordPress erstellen können. Lassen Sie uns also darauf eingehen. 2. Wie man ein Kontaktformular entwickelt und anpasst?: Hallo und willkommen zum zweiten Video dieses Kurses. Vielen Dank, dass Sie sich diesen Kurs von Neonentladung angesehen haben. In diesem Video werden wir also damit beginnen, wie wir das Kontaktformular auf der WordPress-Website aufbauen können . Das ist also eine Neuinstallation von WordPress. Und wir sind bereit, ein zusätzliches Team zu verwenden , um das Kontaktformular für diesen Kurs aufzubauen. Und jetzt installieren Sie ein Plugin, mit dem wir das Vertragsformular erstellen. Lass uns reingehen und das Plugin namens Kontaktformular sieben installieren. Sicherlich in seiner Gesamtheit, sehr einfach. Ich zeige Ihnen Schritt für Schritt, wie Sie dieses Formular konfigurieren können. Dieses Plugin aktivieren. Und das Plugin findest du hier. Rebellischer Inhalt. Gehen Sie einfach rein und Sie werden feststellen ein Standard-Kontaktformular eingeht und ein neues Formular für unsere Bedürfnisse erstellt. Wenn Sie hier ein neues Formular hinzufügen, finden Sie hier ein Standardeingabefeld, die Standardeingabefelder. Lassen Sie uns also dieses Formular, das einfache Kontaktformular, bereinigen und sehen, wie es aussehen wird. Dies wird die Standardeinstellung sein. Schau dir das Plugin an, werde dieses Formular anpassen, wie ich gerade auf dem Demo-Video auf dich hingewiesen habe. Jetzt werden wir sehen, wie das aussieht. Übrigens, lassen Sie mich Ihnen auch sagen, wie Sie das Plug-In installieren können, ist auf der Seite in Schulter. Zeigen Sie das Formular auf dem Stück an. Also gehen wir zu Seiten und erstellen eine neue Seite. Normalerweise sehen Sie die Kontaktseite wie Kontakt, kontaktieren Sie uns. Gehen Sie rein und benennen Sie die Seiten, Auftragnehmer. Und hier, wenn Sie das Gutenberg-Plugin verwenden, finden Sie hier einen Kontakt zum Löschen des Kontaktformulars . Sie können einfach reingehen und dies auswählen. Und wenn Sie Gutenberg nicht verwenden oder wenn es kein anderes Plug-In gibt, können Sie diesen Kurzcode einfach von hier kopieren und auf Ihrer Seite einfügen. Und zur Arbeit. In unserem Fall ist es hier in Göteborg. Hier sehen Sie also das Kontaktformularfeld. Wählen Sie hier den einfachen Vertrag aus, den wir aufstellen und diese Seite veröffentlichen werden. Sehen Sie einfach, wie dieses Formular auf Ihrer Seite aussieht. Und Sie können sehen, dass dies eine einfache Einrichtung dieses Plug-ins ist, die Standardansicht dieser Plugin-Entität. Jetzt passen wir dieses Plugin an. Auf dem Weg zur Demo, die wir gerade sehen, haben wir gerade gesehen. Also haben wir das geteilt die ersten drei Zeilen und drei Spalten ausgegeben. Sie werden sich genauso beschriftet fühlen wie von dort, wo Sie von uns gehört haben. Und dann fügen wir auch ein paar kleine CSS-Dinge hinzu , um dieses Formular zu verschönern. Also lasst uns anfangen. Zunächst fügen wir ein neues Feld hinzu. Dafür. Sie können das Etikett und die Lieferung verwenden . Höre von dir, hab von uns gehört. Und hier verwenden wir das Dropdown-Feld. Dies sind die Felder , die Sie zunächst in den einfachen Texten einer Firma verwenden können einfachen Texten einer Firma , sowie die URL und die Telefonnummer oder ein Datumsfeld, und Sie können so weiter sehen. Es gibt hier einfache, verschiedene Perioden. Also hier werden wir dieses Dropdown-Menüfeld verwenden, das ein virtuelles Auswahlmenü ist , das Sie auf verschiedenen Websites sehen werden. Nennen wir das Feld als Freunde. Hier werden wir einige Optionen wie YouTube hinzufügen. Facebook. Immer noch sicher. Wir fügen auch eine Option namens other hinzu, da es einige Plattformen geben wird, weißt du, Schriftart nicht angeben, damit die Leute Weiß wählen können. Also machen wir es erforderlich. Es liegt an Ihnen, ob Sie das Feld als Pflichtfeld angegeben haben oder nicht. Aber hier ist die Option, sich zu treffen, um die fließende Ruhe zu treffen oder nicht. Ich mache es nicht erforderlich. Wenn Sie möchten, können Sie auf dieses Häkchensymbol klicken. Und die Angst, dass wir hier ein Etikett eingefügt haben. Und jetzt werden Sie sehen, wie dieses Feld aussieht. Speichern Sie diesen Herbst und aktualisieren Sie die Seite hier. Und du siehst diese Periode Karotis, richtig? Da diese Felder erforderlich sind, wird diese Fehlermeldung so lange angezeigt , bis wir sie ausgefüllt haben. Jetzt werden wir das CSS anpassen , um dieses Formular zu verschönern. Dazu müssen wir hier einige Tags hinzufügen, einige HTML-Tags hier, um diese Benutzer-Tags in HTML- und CSS-Box zu verwenden . Also lasst uns anfangen. Zunächst werden wir einige div-Tags hinzufügen, um die Regeln zu brechen. In diesem Video werde ich die Wolken verwenden, siehe f dash row. Und ich werde eine Klasse C, F, die Altersspalte für die Spalten verwenden und diese schließen. Und wir werden sehen, ob Rich Paul Klasse, ich werde auch diese Größenklasse verwenden. Das wird ein Begriff sein. Weil wir diese ersten drei Perioden und drei Spalten aufteilen müssen . Also werde ich diese dritte Klasse benutzen. Und davor werde ich nur einige anfängliche CM hinzufügen , wobei diese Initialen sehr wichtig sind wenn Sie sehen möchten, ob Ihre Stylings, Ihr CSS aus Konflikten bestehen. Denn wenn wir verschiedene Plugins installieren, wird unterschiedliches CSS in die Website integriert und manchmal wird es erstellt. Also fügen wir einige Initialen , um es von den verschiedenen Plugins zu unterscheiden. Vielleicht können Sie CF verwenden oder vielleicht können Sie Ihre Website, FirstName oder ähnliches verwenden , das es von den anderen Kompetenzklassen unterscheidet. Im Moment verwende ich den CF 1 Drittel. 1 Drittel ist eigentlich das CSS, das ich machen werde, um dritte Spalte daraus zu machen und all das. Also werde ich das dreimal kopieren. So kann ich die drei Möbel für den Herbst benutzen. Ich kopiere dieses URL-Namensfeld und bearbeite es hier. Und dann kopieren Sie dieses hier hinzugefügte E-Mail-Feld. Ich kopiere das Betrefffeld und füge es hinzu. Stimmt's? Also schließen Sie das CFR-Audit hier ab. Unsere erste Reihe ist also abgeschlossen. Jetzt nehme ich mir einen weiteren Tag für eine weitere CFL. Wir können das andere Feld hier benutzen, oder? Kopiere diesen Block hier und füge ihn ein. Ich wollte hier auch CF namens div hinzufügen. Weil Zeile und Spalte vor der Operation unter Verwendung aller Websites stehen. Dieses Mal werden wir also CF One verwenden , weil dies die volle Zeile sein wird. Zwei typische Leerzeichen dafür. Und jetzt ist diese Zeile automatisch vervollständigt und öffnet einen weiteren CFO oder das Nachrichtenfeld und eine weitere cf-Spalte. C, F, eine cool, denn das wird auch die volle Reihe sein. Und wenn Sie diesen Gang schließen, wird die Autovervollständigung zerstört. Öffnet jetzt einen weiteren CFO für einen Submit-Button. Entschuldigung, hier habe ich meinen Fehler gemacht. Wir werden sehen, ob hier die CF-Spalte aufgerufen wird. Säule. Sie können Oakland sehen , da dafür auch die gesamte Zeile, das Säulenmaterial, benötigt wird. Unsere grundlegende HTML-Struktur ist also vollständig. Sie werden sehen, wie schön es aussieht mit dem richtigen Abstand von Peano und all dem. Der Grund, warum ich diese Klassen verwende ist eigentlich eine Gewohnheit, CSS einfach zu machen da diese Klassen problemlos auf diese unterschiedlich großen Eingaben abzielen können. Und wir können es später in verschiedenen Formen wiederverwenden. Oder wenn wir mehrere Formulare haben, können Sie dieselben Klassen verwenden, um das CSS zu minimieren, und schließlich verringert es sich von Laura, der Website. Und so, wenn Sie diese Endometriumstellen durchführen , werden auch die Ladezeiten und all das verbessert. Also ja, speichern wir dieses Formular. Jetzt. Hier wird es keinen Unterschied geben, da wir gerade die HTML-Tags hinzugefügt haben. Jetzt machen wir das CSS hier. Das ist echte Magie. Ich öffne den Inspektor hier. Und wir machen etwas CSS. Lass uns reingehen und hier werde ich auch das übliche CSS-Styling verwenden, um, wie ich bereits erwähnt habe, tatsächlich die Angewohnheit habe , den CSS-Fluss wiederzuverwenden. Also mache ich auch diese CF-Haarreihe. Ich werde dafür sorgen, dass es flexibel angezeigt wird. Und hier verwende ich justify content space between. Und jetzt werde ich den CF-Anruf stylen. Zielen wir auf die CF1-Kurve. Und hier verwende ich 3%. Und lass es uns weiter verringern. 2.5. Ich glaube, es ist perfekt. Und hier werde ich den CF Wonderful Selector verwenden , um die vollständigen Spalten COVID zu erstellen. Ich verwende 100 Prozent. Und Sie sehen, dass alles kurz ausgerichtet ist. Stimmt's? Jetzt gehe ich rein und style unsere Labels hier. Verwenden wir den CF All Gloss. Weil es in allen Elementen verwendet wird, die Empathie inspirieren. Beschriftung. Lassen Sie uns die Texttransformation durchführen. Texttransformation ist im Grunde genommen, es ändert die Transformation der Texte wie Katalysieren von Klein- und Großbuchstaben, weiß all diese Dinge. Also verwende ich hier Großbuchstaben, Schriftgröße 12 px. Und ich werde das Schriftgewicht verwenden. Die Schriftstärke ist eigentlich, es ändert das Gewicht der Schriften. Sie sehen die Funktion von Wolle und sehen sehr schön aus. Stimmt's? Jetzt werde ich auch die Eingabefelder stylen. Hier. Ich werde diese Eingabe verwenden. Und nachdem ich die Kommas verwendet habe, werde ich auch auf ausgewählte und externe Bereiche abzielen. Aber hier ist die Sache, weil wir Eingaben mit dem CF namens class verwenden. Es wird auch auf diese Eingabe abzielen. Also Melbourne, wir wollen das nicht gemäß diesen Eingabefeldern ändern gemäß diesen Eingabefeldern weil das eine andere Sache ist und das sind andere Dinge. Also Ausnahme hier und exokrin, Sie werden auch 11 weitere Zeus' Kopf lernen , der keine Klammer ist. Und hier füge ich den Attributtyp submit was hinzu, also ist es eine Tibia, also Element, es ist, weißt du, wann man das ignorieren muss. Alle Eingaben, die dieses Attribut haben, Typen von Männern. Also denken wir: Das alles wird diesen Button ignorieren. Und wir werden auch nur über diese Eingabefelder sprechen , außer dieser Nummer hier. Ändern wir den Hintergrund in Weiß, eigentlich transparent. Und Grenze zu px solide. Genau hier. Ich benutze eine Foundation. Wenn Sie mehr Details wünschen, wissen Sie, CSS-Feiervideo, werde ich das in ein paar Tagen pausieren. Aber in der Zwischenzeit können Sie sehen, dass der Kurs von unseren Instruktoren stammt. Du kannst es so benutzen. Sie können jetzt mehr über CSS erfahren. Ich versuche nur, es von Anfang an zu erklären , um es insgesamt zu erweitern. Du kannst also einfach eine Idee haben. Und wenn Sie einige der Jahreszeiten kennen, kennen Sie auch all diese Eigenschaften. Dies sind grundlegende CSS-Elemente. Nicht zu komplex. Transition All East gerenderte Bild. Es wird nur ein einfacher Übergang hinzugefügt, wenn etwas geändert oder vielleicht der Fokus geändert wird. Ich erzähle es dir hier ein bisschen. Stimmt's? Das sind also die grundlegenden Eingabefelder. Und wenn Sie die Schriftergebnisse sehen , tippen fett, weil wir das Label hier zu fett geändert haben. Was wir also tun werden, ist, dass Sie die Schriftstärke hier auf vierhundert, vierhundert Bakterien reguläre Schriftart ändern. Du siehst, all diese Dinge sind repariert, oder? Das ist also hier konfiguriert. Jetzt werden wir darauf hinweisen, hier einen einfachen Effekt auf den Fokus hinzuzufügen. Also fügen wir noch ein Röhrenelement hinzu. Wie es gemacht wird, fügen Sie hier eine weitere Spalte hinzu und fügen Sie den Textbereich hinzu. Stimmt's? Also fokussieren Sie das elektrische Zielmenü. Also klicke ich auf diese Eingabe. Es wird zielgerichtet sein, dieses Feld ist fokussiert. Wir können hier also das CSS machen, um es ein bisschen anders zu machen, wenn jemand in einem Eingabefeld liest oder schreibt. Wenn Sie also Chrome verwenden, haben Sie auch die Möglichkeit, das Feld fokussiert zu gestalten, damit Sie das CSS ordnungsgemäß ausführen können. Ich füge einen Rahmen hinzu. Eigentlich werde ich die Randfarbe in Blau ändern. Oder vielleicht gibt es ein bisschen Veränderung. Schau dir wunderschön an. Ja. Wenn Sie dies vorerst verwenden, verwenden die Leute normalerweise die Themenfarben. Es stimmt also mit der Website überein, richtig? Also ist es hier erledigt. Konzentrieren wir uns einfach wieder. Und jetzt zeige ich dir, wie es funktioniert. Sehen Sie, dass hier jemand auf diese Eingabe klickt, es wird sich ändern. Es verändert die Randfarbe wunderbar, oder? Der Effekt, der Effekt, den Sie hier sehen und die Schriftart ändern, die Randfarbe ändern, ist eigentlich was das Übergangselement dort macht. Stimmt's? Wenn wir versuchen, dies zu deaktivieren, sehen Sie tatsächlich in diesem Team, dass Übergang tatsächlich global angewendet wird. Also werde ich versuchen, es dir zu zeigen, biete den Übergang zum Schwimmen und du wirst sehen, wie es in dieser Serie aussieht. Es kommt gerade zu mir zurück und sieht nicht so gut aus. Der Übergang wird hier also tatsächlich einen Algebra-Effekt hinzufügen. Sie können auch Millisekunden erhöhen , um es langsamer zu machen. Siehst du das? So funktioniert es also. Und jetzt verpassen wir auch die Testversion dieses vielen Submit-Buttons. Dafür werden wir wieder den CF namens verwenden. Und dann wieder Arten davon. Stimmt's? Also hier ändere ich die Schriftgröße, 14 PX. Lassen Sie uns Großbuchstaben umwandeln, die Sie mit den Beschriftungen abgeglichen haben. Extra-Punkt. Die Schriftstärke beträgt 700. Und vielleicht ändern wir die Schriftgröße auf 14. Fügen Sie hier einen kleinen Buchstabenabstand hinzu. Vielleicht ein Pixel, vergrößern Sie den Knopf. Befreien Sie die Person mit einem Min-Breiten-Selektor oder einem Min-Breiten-Attribut. Ändern wir es auf 200. Oder vielleicht ein bisschen weniger als 270. Es sieht gut aus. Stimmt's? Und mache einen anderen Übergang. Du siehst, wie es aussieht. So ist der Bauch, die Kontaktgrenze. Und jetzt gehen wir in Frage des Aussehens Mäuse. Und ein CRC ist da. Zusätzliches CSS und veröffentliche es und finde es zum Aktualisieren der Seite. Und Sie sehen, unser Formular ist ausgefüllt. So bauen wir Kontaktformulare auf. Und ich hoffe dir hat das Video gefallen. Bitte stellen Sie mir alle Fragen, die Sie im Kommentarbereich unten haben, und ich beantworte sie gerne. Danke. Pass auf dich auf. Und vergessen Sie auch nicht, das gesamte Video dieses Kurses anzusehen , in dem ich Ihnen erkläre, wie Sie Ihre Aufgaben posten und all diese Dinge auf sich selbst reproduzieren können . Danke. Pass auf dich auf. Tschüss. 3. Wie können wir die E-Mail-Einstellungen ändern und andere Dinge konfigurieren?: Hey, in diesem Video erfahren wir, wie Sie Einstellungen für das Kontaktformular festlegen können, wo und wie Sie die Kontaktformulare erhalten. Die Kundenphasen. Der Kunde gab die Pumpen an , auf welche E-Mail Sie die Antworten erhalten, und wie Sie neue Vorlagen festlegen können und all das. Also lasst uns anfangen. Also zuallererst war das ein Telefon, das letzte Video von Belt and Road. Und jetzt gehen wir zum Armaturenbrett. Und wieder diese Kontaktmöglichkeit hier. Und unsere Form war ein einfacher Kontext zu Hause. Das war Dolch. Wir haben die Farmeinstellungen konfiguriert und all das. Und jetzt sehen Sie hier diese drei verschiedenen Registerkarten, E-Mail-Nachrichten und zusätzliche Einstellungen. Männlich ist also ein Tab, auf dem wir E-Mails und all das einrichten werden. Es gibt also verschiedene Felder für ein Feld, es wird die E-Mail gesendet, es wird eines geben, auf das die Antworten antworten, oder? Wenn ich zum Beispiel möchte, dass die Antwort dies testet, verwenden Sie diese E-Mail und es werden alle Antworten an diese E-Mail-Adresse gesendet. Und wenn Sie die E-Mail-Dynamik hinzufügen möchten, die wir taggen. Es werden alle Antworten an die E-Mail-Adresse des Site-Administrators gesendet, die tatsächlich in einer Sekunde hier gespeichert ist. Einstellungen Allgemein. Und Sie sehen diese E-Mail-Adresse für die Verwaltung. Dies wird die E-Mail sein , die wir hier anrufen. Und von ist eigentlich ein E-Mail-Standard und der wird verwendet, um die E-Mails zu versenden. Du kannst das vielleicht so lassen, wie es ist. Oder wenn Sie diese Domain vielleicht manchmal ändern müssen . Diese Domain sollte also eigentlich mit Ihrer aktuellen Domain, Ihrer aktuellen Domain-Adresse übereinstimmen . Zum Beispiel werde ich diese notch.com verwenden, um sie mit meiner aktuellen Domain und dem Site-Titel abzugleichen . Sie können sie so lassen, wie sie ist, sie wird tatsächlich den Site-Titel aufrufen. Normalerweise wirst du es hier sehen. Für uns heißt es hier Skillshare-Klasse. Und dann die WordPress-E-Mail-Adresse genau hier im Betreff. Du kannst es ändern. Vielleicht kannst du hier ein benutzerdefiniertes Thema schreiben. Oder Sie können diesen dynamischen Text verwenden, eine andere Handlung, den Site-Titel, zitieren, und Ihr Betreff ruft den Inhalt aus diesem Feld, aus diesem Dorf, jedem Thema hier ab. Oder vielleicht können Sie hier ein statisches Thema verwenden. Jemand ist gefallen. Oder vielleicht kannst du das hier benutzen. Dies sind tatsächlich das x, das wir erstellt haben, die Felder für Ihren Namen, Ihre E-Mail-Adresse, Ihren Betreff, Ihre Referenz und Ihre Nachricht. Vielleicht verwenden die Leute normalerweise Ihren Namen hier. Sende dir eine Nachricht von der linken Seite. Oder Sie können ein beliebiges Thema verwenden. Es liegt eigentlich ganz bei dir. Und dann wird es einige zusätzliche Header geben. Sie können es einfach so lassen, wie es ist. Und hier ist dies der Nachrichtentext, der der Hauptinhalt der E-Mail sein wird , den die Leute erhalten. Stellen Sie also sicher, dass Sie , wenn Sie neue Felder hinzufügen, auch einen neuen Filter hinzufügen. Versprich also eigentlich schon da. Das Thema ist bereits als Referenz da. Und dann kopieren wir das von hier und fügen es hier ein. Und dann der Nachrichtentext. Und vielleicht kannst du diese Dinge entfernen oder wenn du willst, kannst du behalten. Und vielleicht können Sie hier weitere Inhalte hinzufügen, wie Sie möchten. Das ist also eine einfache E-Mail-Einstellung, die Sie vornehmen , um die Immunantwort zu erhalten. Und hier gibt es eine weitere Registerkarte Kernmeldungen , mit denen Sie die Antwort ändern können. Dadurch wird beispielsweise überprüft, ob die Nachricht des Absenders erfolgreich gesendet wurde. Sie können diese Nachrichten einfach von hier aus ändern . Es gibt verschiedene Bedingungen und hier werden unterschiedliche Nachrichten verwendet. Und dann für zusätzliche Einstellungen, wenn wir etwas JavaScript oder einige erweiterte und komplexe Einstellungen hinzufügen möchten , verwenden wir dies. Also lass das vielleicht vorerst so wie es ist. Und dies waren die einfachen Conduct Com-Einstellungen, die wir verwendet haben, um den Vertrag von verschiedenen Einstellungen aus zu ändern und die E-Mail-Adressen zwischen den Nachrichten und das Formular zu konfigurieren mit Streitigkeiten. Lassen Sie mich wissen, wenn Sie Fragen haben. Ich hoffe, ich konnte die Dinge im Detail erklären. Und ja, jetzt sind Sie dran, vielleicht installieren Sie WordPress auf Ihrem lokalen Server oder versuchen Sie vielleicht dies auf Ihren Websites zu reproduzieren. Installieren Sie dieses erstaunliche Kontaktformular 72 erneut und versuchen Sie, diese Knochen aufzubauen. Und wenn Sie Ihre Projekte auf Skillshare veröffentlichen möchten Ihre Projekte auf Skillshare damit die Leute sie sehen und kommentieren können. Sie können eine einfache Schuld unter der Registerkarte Projekt und Ressourcen unter dem Video verwenden. Und versuche, deine Projekte, deine Aufgaben zu posten. Und ich freue mich zu sehen, und verschiedene Leute werden auch Ihre Projekte sehen und sie kommentieren. Es wird also toll sein , diesen Kurs zu üben. Und ich hoffe, es war ein toller Kurs für dich. Also danke, dass du dir das angesehen hast. Und vielleicht hinterlassen Sie Ihre Bewertungen und sagen Sie mir, wie dieser Kurs für Sie war. Wenn dies Ihren Erwartungen entspricht werden Ihre Erwartungen übertroffen. habe auch versucht, Feedback für mich zu schreiben und ich werde in Zukunft weitere Kurse erstellen. Also folge mir und erhalte die neuesten Updates zu Skillshare. Danke. Pass auf dich auf. Tschüss.