WordPress Kontaktformular erstellen mit Elementor (Tutorial)
Summary
TLDRIn diesem Video zeigt ein WordPress-Experte, wie man mit Elementor Pro ansprechende Kontaktformulare erstellt. Er geht Schritt für Schritt vor, um ein mehrstufiges Formular mit verschiedenen Feldern wie Name, E-Mail und Telefonnummer zu erstellen. Es wird erklärt, wie man die Felder anpasst, validiert und anordnet. Außerdem zeigt er, wie man nach dem Absenden des Formulars bestimmte Aktionen ausführen kann, wie z.B. eine Benachrichtigungs-E-Mail zu erhalten. Er demonstriert auch, wie gespeicherte Einträge in WordPress angezeigt werden können. Insgesamt wird die einfache Erstellung von Kontaktformularen mit Elementor detailliert dargestellt.
Takeaways
- 😊 Mit Elementor Pro kann man sehr einfache Kontaktformulare erstellen
- 👍 Man kann verschiedene Felder und Feldtypen wie Text, E-Mail, Auswahlfelder etc. hinzufügen
- 🔀 Die Reihenfolge der Felder lässt sich per Drag & Drop ändern
- ✏️ Felder lassen sich duplizieren, um ähnliche Felder schnell hinzuzufügen
- 🌈 Das Design wie Farben, Abstände etc. ist flexibel anpassbar
- 📝 Validierungen wie Pflichtfelder oder E-Mail-Format können eingestellt werden
- 📧 Es können Aktionen definiert werden, z.B. E-Mail-Benachrichtigungen beim Absenden
- 📑 Eingaben lassen sich in einer Datenbank speichern und später einsehen
- 💻 Das Formular ist responsiv für Desktop, Tablet und Smartphones
- 🔒 DSGVO-Hinweise lassen sich integrieren, z.B. Checkbox für Datenschutz
Q & A
Wie kann man in Elementor Pro schöne Kontaktformulare erstellen?
-Man kann in Elementor Pro sehr einfach per Drag & Drop Kontaktformulare erstellen. Man zieht dazu das Formular-Widget in den Editor und passt es nach Bedarf an, z.B. welche Felder enthalten sein sollen.
Muss man bei Kontaktformularen auf die DSGVO achten?
-Ja, laut DSGVO muss man den Nutzer darauf hinweisen, dass Daten erhoben werden und auf die Datenschutzerklärung verlinken.
Wie kann man Felder in Elementor Pro nebeneinander anordnen?
-Indem man in den Einstellungen die Spaltenbreite der Felder auf 50% setzt, werden sie nebeneinander angeordnet.
Wie markiert man Pflichtfelder in einem Formular?
-Pflichtfelder sollte man mit einem * Sternchen kennzeichnen, damit der Nutzer sie leicht erkennen kann.
Was passiert, wenn ein Nutzer ein Formular absendet?
-Standardmäßig werden die Daten gesammelt und man erhält eine E-Mail. Dies kann man in den Aktionen nach dem Senden konfigurieren.
Kann man die Formatierung eines Formulars anpassen?
-Ja, unter Style lassen sich Abstände, Schriften, Farben etc. des Formulars und der Felder individuell einstellen.
Wo kann man sich eingereichte Formulardaten ansehen?
-Unter Form Submissions im Dashboard von Elementor Pro.
Kann man mehrere E-Mail-Adressen für Formulare hinterlegen?
-Ja, unter E-Mail Notification kann man mehrere E-Mail-Adressen angeben, die eine Benachrichtigung erhalten sollen.
Lässt sich das Aussehen der Buttons anpassen?
-Ja, unter Style kann man Button-Farben, -Größe und andere Eigenschaften nach Belieben einstellen.
Kann man ein mehrstufiges Kontaktformular erstellen?
-Ja, dafür kann man z.B. die Next/Back Buttons verwenden und die Formular-Schritte entsprechend aufbauen.
Outlines
😊 Einführung und Beschreibung des Videos
Der Sprecher stellt sich vor und erklärt, dass er in diesem Video zeigen möchte, wie man mit Elementor Pro einfach und schöne Kontaktformulare erstellen kann. Er beschreibt die unterschiedlichen Abfragen, die er in seinem Beispiel-Kontaktformular haben möchte, wie Vorname, Nachname, Telefonnummer, E-Mail und Fragen, ob der Kunde schon Mandant ist und worum es geht beim Anliegen.
👨💻 Erstellen des Kontaktformulars in Elementor
Der Sprecher fügt in Elementor ein Formular ein und gestaltet es nach seinen Vorstellungen, indem er beispielsweise die Spaltenbreite anpasst, damit Vorname und Nachname nebeneinander angezeigt werden. Er fügt weitere Felder wie Telefonnummer, E-Mail und Dropdown-Menüs hinzu und formatiert das Formular weiter, sodass es optisch ansprechend aussieht.
💬 Hinzufügen des Hinweises auf die Datenschutzrichtlinien
Um DSGVO-Konformität zu gewährleisten, fügt der Sprecher eine Checkbox zum Formular hinzu, mit der der Kunde der Datenverarbeitung zustimmen muss. Er verlinkt außerdem die Textpassage "Datenschutzerklärung" zur tatsächlichen Datenschutzerklärung der Seite.
⚙️ Konfiguration der Aktionen nach dem Absenden
Der Sprecher konfiguriert, was nach dem Absenden des Kontaktformulars passieren soll. Standardmäßig ist eingestellt, dass eine E-Mail mit den eingegebenen Daten gesendet wird. Dies und weitere Optionen wie Weiterleitung und Speicherung der Daten werden erläutert.
🎨 Anpassung des Erscheinungsbilds
Abschließend zeigt der Sprecher noch verschiedene Gestaltungsmöglichkeiten des Kontaktformulars auf, wie etwa das Ändern von Abständen, Schriftschnitt und Farben. So lässt sich das Formular optisch individuell anpassen.
😃 Fazit und Hinweis auf Rabatte für Elementor
Zum Schluss fasst der Sprecher zusammen, dass sich mit Elementor Pro leicht Kontaktformulare erstellen lassen. Er verweist auf Rabattaktionen für Elementor und bedankt sich beim Zuschauer.
Mindmap
Keywords
💡Kontaktformular
💡Elementor
💡Eingabefeld
💡DSGVO
💡Aktion nach dem Versenden
💡Formularfelder
💡E-Mail-Benachrichtigung
💡Style
💡Shortcode
💡Collections
Highlights
Beschreibt, wie man mit Elementor Pro ein Kontaktformular erstellt
Zeigt Schritt-für-Schritt wie man Formularfelder hinzufügt und konfiguriert
Erklärt wie man die Felder mit Drag & Drop verschiebt
Zeigt wie man Pflichtfelder festlegt und mit * markiert
Fügt Checkbox für Datenschutz-Zustimmung nach DSGVO hinzu
Verlinkt Checkbox mit eigener Datenschutzerklärung
Konfiguriert Aktionen nach dem Absenden, z.B. Emailversand
Zeigt wie man die Email-Benachrichtigung anpasst
Testet erfolgreich das Kontaktformular
Erhalte Email mit ausgefüllten Formulardaten
Kann Formulareinträge später in Dashboard einsehen
Formular direkt in Elementor gestalten mit Style-Optionen
Zeigt responsives Design: Anpassungen für Desktop, Tablet und Handy
Empfiehlt bei Nutzung von Elementor Pro auch Kontaktformular damit zu erstellen
Link zur Aktivierung von Elementor Pro unter Video mit Affiliate-Code
Transcripts
moin wenn neben dem boden hier dein
wordpress experte im heutigen video
möchte ich dir zeigen wie du mit allen
motor pro super einfach super schöne
kontaktformulare erstellen kannst dabei
muss das nicht nur in standard
kontaktformular sein sondern wir können
auch richtig schöne umfangreiche
kontaktformulare erstellen die
übersichtlich sind und mit denen wir
eben halt jede menge an daten erheben
können dabei die ich natürlich auch auf
die dsgv konformität 1 bleibt dran
hier bin ich nun auf meiner wordpress
webseite wir gucken uns die ganze
website einmal an es ist eine seite die
mit elemento pro erstellt wurde und das
ist einfach nur ein template was sich
hier auf meiner testseite importiert
habe so ich geh mal auf die kontaktseite
die habe ich hier schon auf deutsch
umbenannt von contact in kontakt und
hier auf dieser kontaktseite möchte ich
nun eine neue sektion haben mit einem
kontaktformular das ganze hier ist die
konnte ist ein template für eine kanzlei
webseite und ich habe mir im vorfeld
fragen überlegt die ich hier im
kontaktformular eben halt formulieren
möchte fragen sind folgende die ich
erleben möchte und zwar ich möchte
einmal den vornamen erfahren den
nachnamen erfahren die telefonnummer die
e mail und im nächsten schritt soll
derjenige der das kontaktformular
ausfüllt auswählen können ob er bereits
mandant unserer kanzlei ist und in
diesem fall möchte ich hier ganz gerne
einen eine drop down slider haben wo man
dann eben halt auswählen kann ja oder
nein
im nächsten schritt soll der kunde auch
angeben können worum es geht wir stellen
uns vor wir haben eine kanzlei wird seit
also kann der kunde jetzt auswählen geht
es um familienrecht strafrecht oder
verkehrsrecht also das ganze ist nur ein
beispiel
aber einfach nur um zu zeigen wie man
diese abfragen machen kann bei dem thema
worum geht s möchte ich das ganz gerne
als checkboxen haben dass man einfach
davon kreuzchen setzen kann worum es
geht und im nächsten schritt soll der
kunde ganz normal seine nachricht
angeben können jetzt noch text dazu
schreiben will also das ist erstmal das
setting was ich ganz gerne in meinem
kontaktformular umgesetzt haben möchte
ich bin auf der seite und ich möchte
diese seite nun mit elemento pro also
mit elementen bearbeiten ich klicke auf
mit elemento bearbeiten und nun lebt
praktisch elemente
nach dem element tor geladen ist wir
sehen hier ich hatte schon ein beispiel
importiert nach dem element tor nun
geladen ist mache ich im ersten schritt
eines action so jetzt habe ich hier
dieses action und in dieser session
möchte ich natürlich ganz gerne mein
kontaktformular haben ich suche deswegen
in meiner linken später einmal nach vor
und da finde ich auch schon das formular
ich ziehe das formular in den
entsprechenden abschnitt hinein und ich
sehe hier ein standardformular das hat
dann immer halt immer die abfrage name e
mail nachricht warum hat dieses formular
bei mir diese farben ganz einfach indem
template was sich in element ohr
importiert habe da waren diese
farbenfroh eingestellt als basic haben
wir sehen auch hier dieses gelbgold ist
das gleiche was hier button gelbgold ist
nun möchte ich die farben die frau an
die abfragen formulieren und das kann
ich jedem halt hier in meiner linken
spalte tun da wo name steht das ändere
ich jetzt einmal ganz kurz auf vorname
und
platz weiter das ist also das label ist
immer das oder der fade name den man
hier hat das nennt man auch label das
ist das was über dem eingabefeld steht
und der platz weiter ist das was in
diesem eingabefeld schon in grau
hinterlegt voreingestellt drin steht da
soll natürlich auch
vorname drin stehen dann kann ich hier
noch auswählen was das für ein eingabe
typ ist und standardmäßig haben wir den
text wenn wir eine e-mail haben wir hier
e mail aus wenn wir zahlen haben wählen
wir zahl aus et cetera welchen vorteil
hat das ganze elemente prüft bei e mail
zum beispiel schon ob der angegebene
wert ein abzeichen hat und wenn es keine
zeichen hat ist es wohl keine e-mail
oder wenn wir hier den typ zahl
auswählen kann derjenige der das
kontaktformular ausfüllen nur zahlen
angeben aber keine buchstaben
und bei text kann man so ziemlich alles
angeben also text vorname haben war ich
bin faul ich möchte dieses feld weil ich
mit der nachname abfragen kopieren hier
gibt es dieses kopieren symbolen ich
drücke einmal drauf und gebe jetzt hier
ebenheit nachname ein
nachname
hier auch nachname so jetzt sehen wir
hier in unserer vorschau schon direkt
vorname dieses eingabefeld geht von
links nach rechts und nachname geht von
links nach rechts ich glaube die
allerwenigsten die ein kontaktformular
ausfüllen haben so ein lang vornamen
oder so einen langen nachnamen dass
diese ganze zeile ausgefüllt wird damit
das optisch etwas schöner aussieht
möchte ich ganz gerne vorname nachname
nebeneinander platziert haben dass beide
eingabefelder nur noch 50 prozent so
groß sind von dem was sie jetzt haben
das kann ich hier tun ich wähle nochmal
vorname als erstes aus ich sehe hier
spaltenbreite
und ich sehe neben spaltenbreite auch
das desktop symbol das heißt ich kann
die spaltenbreite für den desktop fürs
tablet und für smartphone individuell
einstellen dass schon mal so was ich
wähle jetzt die spaltenbreite aus und
setzte diese auf 50 prozent und wir
sehen sofort vorname dieses feld hat nur
noch 50 prozent größer jetzt will ich
den nachnamen aus setzte diesen auch auf
50 prozent und schon stehen diese beiden
eingabefelder direkt nebeneinander
hervorragt ich guck doch mal auf meinen
auf meinen dokument was ich alles
abfragen euch denn ein kontaktformular
als nächstes soll die telefonnummer und
die e mail abgefragt werden ok also e
mail haben wir schon da ich verfüge mal
ein neues feld hinzu für die
telefonnummer so haben wir das auch ich
kann jetzt dieses feld verschieben wir
sehen telefon ist jetzt die letzte
abfrage hinter nachricht ich kann hier
in meiner linken spalte einfach per drag
and drop die sachen verschieben an die
entsprechende stelle und schon sehe ich
wie das hier sich eben halt auch
geändert hat jetzt haben wir hier die
telefonnummer hier die e mail adresse
ich klicke auf e mail wir sehen typ
eingabefeld ist e mail das ist schon mal
hervorragend auch hier möchte ich dass
das feld nur 50 prozent der größe
einnimmt zack und bei telefonnummer so
jetzt ähnlich sein auch nur 50 prozent
der größe haben wir auch jetzt möchte
ich hier ganz kurz einmal die
eingabefelder sehen von
der telefonnummer und jetzt könnten wir
zum beispiel sagen mensch die
telefonnummer da wären wir hier telefon
aus das heißt leute können eben halt nur
zahlen eingeben wie bei einer
telefonnummer auf plus das plus zeichen
für +49 1 was vielleicht noch wichtig
ist was wir uns noch mal angucken
sollten dass es dieses jahr das pflicht
fällt sind die angaben pflichtfelder ja
oder nein später ausgefüllt werden
müssen vorname besteht möchte ich keine
pflicht feld haben nachname ist
natürlich ein pflicht fällt da telefon
auch in pflicht fällt sein e mail soll
auch ein pflicht feld seien hervorragend
damit der kunde weiß was pflichtfelder
sind und was nicht mache ich der aus
nutzerfreundlichkeit gründen hier
nochmal ein sternchen hinter damit jeder
sofort sehen kann mit dem sternchen dass
es eben halt ein pflicht eingabefeld ist
viel einfacher ist es wir haben hier und
noch entscheider für pflichtfelder und
wenn ich den aktiviere haben alle
pflichtfelder automatisch an das
sternchen dahinter gesetzt spart
natürlich arbeit also wir haben jetzt
telefon und e-mail und als nächstes
möchte ich fragen ob der kunde schon
mandant der kanzlei ist und möchte jetzt
dieses feld hinzufügen
so sind sie schon mandant unserer
kanzlei und als typ ich möchte ja dass
man auswählen kann zwischen ja und nein
und das ganze soll eine sogenannte
auswahlliste sein so jetzt habe ich hier
die auswahlliste und jetzt kann ich hier
meine option eben halt reinschreiben was
man auswählen kann in unserem fall ja
und natürlich nein
und können wir das ganze mal angucken
ich schieb das noch an die richtige
stelle und jetzt sieht praktisch dieses
feld hier so aus man kann hier
draufklicken und kann dann eben halt
zwischen ja und nein auswählen im
nächsten schritt kommt die abfrage worum
geht es und hier möchte ich ja so
checkboxen haben wo der kunde dann einen
haken setzen kann das ganze nennt sich
auswahlbox und jetzt gebe ich hier mal
den feld nahmen ein worum geht es und
jetzt kann ich hier eben halt die
einzelnen optionen die angewählt werden
können eintragen ob ihr wird das ganze
einmal
füge ist ja ein jetzt habe ich hier
diese auswahl kästchen ebenheit drin
jetzt möchte ich natürlich nicht dass
die untereinander kommen finde ich schön
ich würde schöner finden wenn die in
einer reihe angezeigt werden denn soviel
platz nehmen die er nicht ein kann ich
hier sagen in einer reihe anordnen dann
kann ich noch sagen das machen wir
nochmal eine option den zone um etwas
anderes hat sich auch komisch an aber es
ist nur ein beispiel für ein
kontaktformular so jetzt haben wir hier
die auswahl boxen worum geht es das
wollen wir noch ja da kommt auch schon
die nachricht ihre nachricht dieses feld
war glaube ich schon direkt drin jetzt
kann ich da hier natürlich noch dass
ihre davor setzen ihre nachricht das
ganze sei pflicht fällt sein so und
jetzt bei ihrer nachricht möchte ich
ganz gerne dass man hier die nachricht
eingeben kann wir sehen hier noch wie
viele reihen angezeigt werden sollen ich
zeig mal ein extrembeispiel angenommen
wir sagen 40 rein dann sehen wir schon
das ganze fest sind wo man seine
nachricht verfassen kann ist riesengroß
standardmäßig werden dort vier reihen
angezeigt ich sage in diesem fall mai
sollen nur drei reihen angezeigt werden
und damit habe ich mehr oder minder
schon unser kontaktformular ich spreche
das ganze einmal und gucke es mir direkt
in der vorschau an
und so sieht das ganze jetzt aus das
meisterwerk vorname.nachname telefon
e-mail sind sie bereits mandant ja nein
worum geht es kann man ankreuzen und
hier kann man seine nachricht ebenheit
hinterlassen
alle diese punkte haben wir abgearbeitet
jetzt gibt es leider noch etwas was hier
fehlt und zwar laut datenschutz grund
verordnung also der dsgv müssen wir
darauf hinweisen dass mit unserem
kontaktformular daten erhoben werden und
wir müssen auf die datenschutzerklärung
hinweisen mehr noch am besten wir
verlinken sogar unsere
datenschutzerklärung
aus meiner sicht total sinnbefreit denn
ich glaube jeder weiß dass nur ein
kontakt formular ausfüllt da übermittelt
werden aber mich hat ja keiner gefragt
und wir sind gut beraten wenn wir das
hier einmal umsetzen das hier unten
drunter ein kasten kommt eine checkbox
wo wir darauf hinweisen auf die
datenschutzerklärung
um ein solches kästchen hinzuzufügen
wählen wir diesmal beim typ acceptance
auf akzeptanz so und jetzt können wir
hier praktisch den text den ich hier
schon mal vorbereitet haben eintragen
und zwar datenschutzerklärung
da das ganze ist eine pflicht feld
wichtig der kunde kann das
kontaktformular nur abwenden wenn er
hier zugestimmt hat und jetzt kommt ein
text ich stimme der datenverarbeitung zu
das ganze können wir noch erweitern wenn
wir möchten
und zwar durch folgendes muss man aber
nicht ich bin auch kein jurist aber
ich nutze das ganze so dass da eben halt
noch zusätzlich die angabe kommt die
angaben aus dem kontaktformular werden
nach oben und verarbeitet jetzt gibt es
hier noch die option standardmäßig
ausgewählten ist diese hatten schon
vorher gesetzt das würde ich nicht tun
denn ich habe gelesen dass das laut
datenschutz grund verordnung nicht
erlaubt ist sondern derjenige der das
kontaktformular ausfüllt muss
eigenständig diesen haken setzen ok
lassen wir diesen weg jetzt hatte ich ja
noch gesagt es wäre super wenn wir das
ganze hier eben halt einmal mit unserer
datenschutzerklärung
verlinken wir können hier mit html aber
wenn wir in html ein zeilenumbruch haben
wollen dann machen wir spitze kammer auf
br spitze klammer zu und wir sehen super
jetzt ist hier ein zeilenumbruch
gemacht worden jetzt möchte ich ganz
gerne dass die schrift die hier unten
drunter angezeigt wird dass die kleiner
ist die sollen einfach einen tick
kleiner sein also will ich hier aus
style
gleich anführungszeichen oben von zeiss
doppelpunkt small und für uns zeichnen
oben spitze klammern zu und am ende des
satzes noch mal ein spitze klammer auf
spitze kann man zu das ganze wie man das
hier verlinkt diesem beispiel text den
packe ich auch einfach mal in die video
beschreibung rein kannst du einfach raus
kopieren wenn du dir nehmen halt
verwenden möchte ist jetzt haben wir das
ganze hier etwas vom aussehen her
bearbeitet gut schön aber wir haben hier
das wort datenschutz währung noch gar
nicht verlinkt und das ist natürlich
schade weil wir sollten ja eben halt die
datenschutzerklärung verlinken auch hier
verwende ich wieder html und auch das
packe ich einfach mal in die
video beschreibung allerdings müsst ihr
dann natürlich den link zu eurer
datenschutzerklärung die müsst ihr
anpassen das funktioniert das ganze
nicht jetzt habe ich hier meine
datenschutzerklärung verlinkt und jeder
kann hier auf datenschutzerklärung
draufklicken gespeichert das ganze
einmal wir gucken uns das ganze in der
vorschau einmal an und wir sehen jetzt
hier unser kontaktformular wir sehen
hier die checkbox mit ich stimme der
datenschutzerklärung zu und ich kann
jetzt hier natürlich den haken setzen
logisch ich kann auch
datenschutzerklärung klicken und wir
sehen jetzt gleich das sich bei mir die
datenschutzerklärung hoffentlich öffnet
hier eröffnet sich die
datenschutzerklärung mehr habe ich nicht
ist es eben halt nur eine test webseite
aber in eurem fall müsst ihr jetzt hier
die richtige datenschutzerklärung kommen
ich sehe gerade hier ist noch ein
ständchen zu viel das läuft bei mir aus
dem text einmal ganz kurz heraus jetzt
haben wir hier praktisch unser
wunderbares kontaktformular hervorragend
jetzt stellt sich natürlich im nächsten
schritt die frage was soll passieren
wenn ein nutzer ein webseitenbesucher
dieses kontakt formular ausfüllt jetzt
wird das ausgefüllt hat auch senden
geklickt ja und und dann das heißt wir
müssen jetzt im nächsten schritt wo wir
unser kontaktformular erstellt haben
einmal konfigurieren welche aktionen
danach erfolgen sollen also im
standardfall ist es ja so dass wir eine
benachrichtigung eine e mail erhalten
wollen mit den daten die der kunde
ausgefüllt hat wir gucken uns das einmal
und zwar haben wir jetzt hier in
elemente um das ganze chronologisch
durchzugehen noch schaltfläche
schaltfläche ist zum beispiel wenn man
ein mehrstufiges kontaktformular hat das
heißt erster schritt weiter schritt
dritter schritt absenden dann hätte man
eben halt mehrere schaltfläche nämlich
vor und zurück eine schaltfläche ist
aber auch dieses senden hier was wir
sehen hier steht hier senden und das ist
natürlich auch eine schaltfläche
angenommen wir wollen hier das senden
ändern in absenden da kann ich einfach
reingehen absenden und strom steht hier
drin absenden wenn ich die größe des
buttons anpassen möchte kann ich das
hier tun wenn ich blocksatz nehme ist
der button ebenheit von links nach
rechts meiner meinung nach sieht das am
besten aus ich kann hier noch die button
größe etwas werden wird er größer oder
kleiner
ich fand das auch schmal aber schon sehr
passend wenn ich etwas weiter nach unten
gehen sehen wir jetzt aktion nach dem
versenden und dass das was ich vorher
angesprochen hatte nämlich was soll
passieren wenn der kunde das ausgefüllt
hat und wir sehen standardmäßig in
elemento sind zwei sachen eingestellt
nämlich collections und e mail
collections ist alle e-mails die alle
kontaktformulare die ausgefüllt wurden
es können wir im dashboard bei uns
später einsehen und e mail ist
standardmäßig dass wir eine e-mail
zugesandt bekommen jetzt sehen wir bei
diese beiden sachen ausgewählt sind ich
nehme e mail mal weg einfach nur zum
spaß so dass hier collect mission steht
weil hier oben collections drinsteht
will ich hier ein e mail aussehen wir
sofort hier taucht auch das e mail fällt
aus wir können ja mal reinklicken und
gucken was noch alles möglich ist wir
können auch weitere e-mails sind kann ja
sein dass ich eine e mail erhalten soll
und dass das vertriebsteam auch eine e
mail erhalten sollte könnte ich das hier
einrichten
weiterleiten ist angenommen ich möchte
denjenigen der das kontaktformular
ausgefüllt hat nachdem er es ausgefüllt
hat auf eine kranke seite weiter leiden
danke dass du das kontaktformular
ausgeführt hast da kann ich das hier mit
weiter allein machen betrug ist wenn ich
eben halt custom etwas programmiert habe
dann gibt es so genannte web bugs wo ich
dann eben halt verschiedene programmcode
einschieben kann da könnte ich das hier
eben halt mittwoch festlegen legend ist
ein programm um e mail newsletter zu
versenden und e-mail-kampagnen
aufzusetzen es ist ein amerikanisches
tool und man sollte es nicht mehr nutzen
aufgrund der datenschutzbestimmungen
hier in europa also aufgrund des gvo da
ist major sehr umstritten bzw eigentlich
nicht erlaubt grip ist so etwas
ähnliches wie major und active kampagnen
auch wir sehen es gibt noch mehr wir
sehen es gibt noch gelb respons
ebenfalls für e mail newsletter
kampagnen convert kit ist ein
umfangreiches tool mit dem ich ebenheit
popups öffnen kann und vor die marketing
maßnahmen einleiten kann mailer leid via
e-mail senden slack ich glaube dass ein
bekannt genauso disco server das dient
eben halt lag als auch disc ort der
kommunikation und ein popup öffnen stand
hat pop up öffnen ich las dass der
einfachheit halber einmal so und
klicke jetzt mich ja mal durch
collections die können wir später wie
gesagt in elementaren dashboard einsehen
und bei e mail steht jetzt meine eigene
e mail adresse hier drin und jetzt
könnte ich natürlich auch festlegen was
hier drin stehen soll ja zum beispiel
eine neue
punkten anfrage über das über die
kontaktseite
könnte es auch kürzer fassen jetzt sehe
ich hier drunter die nachricht die ich
jetzt praktische halter an meine e-mail
der kunde hat das ausgefüllt ich kriege
die e mail ich kriege jetzt die daten
die der kunde hinterlegt hat das ist das
was die nachricht drin steht hier steht
eine eckige klammer und in der eckigen
klammern steht ort viel das bedeutet
alle felder die hier ausgefüllt werden
die werden mir in meiner e mail
übertragen
angenommen ich möchte das gar nicht
sondern ich möchte nur einzelne wörter
erhalten dann könnte ich das hier auch
tun kann ich das aus filz wegnehmen und
könnte jetzt das entsprechende feld
eintragen wie funktioniert das ich gehe
auf das formularfeld was ich eben hat
speziell haben möchte angenommen ich
möchte nur die telefonnummer kriegen
macht natürlich keinen sinn aber
beispiel dann klicke ich hier auf
erweitert und jetzt sehe ich hier den
short code für das feld richtig und ich
nehme diesen short code kopieren ideen
und aktionen nach dem versenden e mail
an den hier eintragen sobald ich jetzt
das gold fields hier wegnehmen würde ich
mache das einmal dann würde ich eben
halt nur noch die telefonnummer
übermittelt kriegen später weil ich ja
hier den short code für die
telefonnummer habe also ich setze hier
einmal die telefonnummer dass so viel
zurück und lösche den short code für die
telefonnummer wieder aus gucken wir uns
an was wir noch festlegen können und
zwar von von namen wenn ich später die
ergebnisse hier gesendet kriege möchte
ich dass vornahme dieser nachname hier
drin steht er hier angegeben wurde ich
gehe also zurück auf formularfelder
wähle nachname aus erweitert und wähle
hier den short code aus der eben halt
für den nachnamen steht
anschließend gehe ich wieder auf e-mail-
und trage hier eben halt bei von
nachname den short code für den
nachnamen von e mail dort trage ich den
short code für das e mail feld ein das
heißt wieder formularfelder ein bisschen
mühselig e mail erweitert wir nehmen
hier einmal den short code
und tragen jetzt den short code hier ein
dann antwort an wenn ich praktisch diese
nachricht dieses kontaktformular meine e
mail programm gesendet bekommen
dass wir nicht auf antworten klicke
einfach automatisch die e mail an das e
mail fällt was je steht gesendet wird
kann ich hier in dem dropdown auch
einfach direkt e mail fällt auswählen
etwas weiter unten sehen wir hier noch
meta daten die übermittelt werden an
mich und zwar datum und uhrzeit wann das
kontaktformular ausgefüllt wurde die
seitenwahl ist in diesem fall meine
meine webseite die kontaktseite benutzer
agent ist welcher browser et cetera vom
kunden verwendet wurde remote ip die
ip-adresse und credit ist ebenheit da
steht dann so etwas drin wie unterstützt
von elemente also kredite brauche ich
nicht die ip brauche ich nicht den
benutzer agent brauche ich nicht uhrzeit
und datum nicht schön dieser brauch
eigentlich auch nicht so also datum
uhrzeit passt senden als html- oder nur
text html die thematik schöner ausmachen
wir sind als html step settings wäre nur
wichtig wenn wir ein multi step formular
haben wo es dann eben halt vor zurück
erster schritt weiter schritt et cetera
gibt aber eher nicht weitere optionen
hier kann ich festlegen welche
nachrichten erfolgen sollen wenn jemand
eine fehlermeldung kriegt oder die
erfolgsmeldung ich habe das hier bei mir
schon einmal konfiguriert gehabt darum
steht das jetzt hier automatisch drin
und mein tipp cook auch dubai der im
kontaktformular nach was dort drin steht
ist nämlich ärgerlich wenn man jetzt
eine deutsche webseite hat der kunde
füllt das e mail fällt nicht aus und
kriegt dann eine englische fehlermeldung
ja sieht jetzt eben halt da nicht so
ganz professionell aus also hier am
besten alles einmal auf deutsch
hineinschreiben
ich speicher das ganze einmal
und jetzt ist natürlich die frage wie
können wir das ganze kontaktformular
anpassen ich muss gestehen das
aufnahmeprogramm ist einmal abgestürzt
ich hatte es hier schon angepasst bis
ich gemerkt hatte dass die aufnahme
ebenfalls stehen geblieben ist der
vollständigkeit halber hier klicken hier
in der linken spalte wenn sie das
formular ausgewählt haben einmal auf
style und können jetzt hier den speichen
abstand also hier diesen abstand zum
beispiel festlegen mit dem schieberegler
ist jetzt mal wieder auf 16 und den
reinen abstand das ist wie eng das hier
eben halt gequetscht sein soll ich sitze
es mal wieder in meinem fall auf 30
pixel
dann kamen wir hier noch den feld nahm
das ist hier zum beispiel vorname oder
telefon und das eingabefeld den abstand
dazu können wir hier unter abstände feld
nahmen anzeigen können wir festlegen ich
letztes mal auf 10
und genau so können wir hier die
typographie und die farben festlegen von
den namen wenn wir hier unter
typographie auf den stift klicken können
wir hier den schrift schnitt
beeinflussen wenn ich 200 mache dann ist
das hier ganz dünn gedruckt wenn ich das
zurück auf 700 macher zb ist super fett
und auf 500 finde ich persönlich
eigentlich ganz ansprechend das heißt
alles unter stil können wir jetzt hier
das ganze aussehen unseres
kontaktformular sun passen genauso die
eingabefelder die sind jetzt hier gerade
weiß und es ist so eine große schrift
drin das könnte ich auch ändern und zwar
konnte ich zum beispiel das eingabefeld
spaß machen und die schrift weiß klicke
ich hier auffällt hintergrundfarbe wähle
ich mal dunkles blau aus und bei
text farbe will ich jetzt einfach mal
weiß aus und wir sehen super ich habe
jetzt die farben invertiert mehr oder
minder und wir haben eben halt dunkler
eingabefelder wenn man das möchte ich
persönlich finde es nicht ganz so schön
darum setze ich das mal wieder zurück
schaltfläche
das ist hier dieser button da kann ich
jetzt die farben von diesem bakken
festlegen wenn ich das eben halt ändern
möchte normal ist wie wir ihn jetzt
gerade sehen java ist immer wenn ich mit
mauszeiger über fahrer welche farben
dann kommen soll die werden allerdings
nur angezeigt wenn ihr alle felder
vorher schon ausgeführt wurden sind
hervorragend hervorragend so weit zu
unserem kontaktformular großartig
dann würde ich vorschlagen gespeichert
das ganze einmal und wir testen ob es
auch funktioniert
und trage jetzt hier die verschiedenen
werte ein
mein name telefonnummer fantasie
telefonnummer e mail ist auch eine
fantasie e-mail-adresse man dann
erst soll um etwas anderes gehen da ich
benötige
hilfe
so und jetzt wollen wir mal gucken ob es
funktioniert hier bei e mail wenn ich
das ebt weglassen denn ich hatte ja
gesagt sie haben ja typ e mail
ausgewählt und bei typ e mail wird
automatisch und elemento gecheckt ob ein
ob ein zeichen vorhanden ist ich sage
einmal absenden und wir kriegen die
fehlermeldung hier dass das keine
richtige e mail ist ich pack das
abzeichen weil wieder hin
jetzt sehen wir noch ich habe hier die
datenschutzerklärung nicht eingewilligt
mal gucken ob er das auch mit krieg und
er seit nun bitte klicken sie dieses
kästchen an um fortfahren zu können also
hier für die datenschutzerklärung machen
wir das auch mal und rücken auf absenden
es wurde gesendet und ich habe jetzt
hier unten drunter die erfolgsmeldung
das formular wurde erfolgreich versendet
auch hier die größe und farbe kann man
eben halt in elemente direkt anpassen so
gucken wir mal in meinen e mail programm
wie das jetzt aussieht was ich bekommen
habe
ich habe meinen e mail programm geöffnet
und ich habe folgende nachricht da
heilen von bode also der nachname der
automatisch ausgelesen wurde an meine
adresse wurde das e mail kontaktformular
gesendet antwort wenn ich hierauf
antworten clique soll an diese e-mail
gehen die der kunde hinterlegt hatte
stimmt jetzt habe ich hier die ganzen
daten die der kunde an gegeben hat weil
ich habe ja wohl vieles ausgewählt also
vorname benjamin nachname bode
telefonnummer ebay sind sie bereits
mandant unserer kanzlei nein worum geht
es um etwas anderes ihre nachrichten ich
benötige ihre hilfe datenschutzerklärung
wurde aktiviert ok und dann kann ich
hier noch das datum und die uhrzeit
leben halt sehen hervorragend und wenn
ich den kunden und antworten wie kann
ich hier einfach auf antworten klicken
meine nachricht verfassen und sie geht
direkt an den kunden
jetzt hatte ich ja noch gesagt dass wir
auch so etwas haben was sich nennt
collect admissions das heißt wir können
die ganzen nachrichten die hier
angegeben wurden auch direkt in unserem
wordpress der sport unter elemento
reinsehen machen wir das ganze einmal
ich gehe ins dashboard lade dass der
sport einmal neu und gehe jetzt in der
linken spalte auf elemento admissions
und wenn ich hier aufs admissions
gegangen bin kann ich hier das
kontaktformular sehen was ausgefüllt
wurde ich kann hier draufklicken und sie
jetzt die einzelnen angaben die im
kontaktformular gemacht wurden und kann
das jetzt hier jederzeit wieder angucken
wie du gesehen hast ist das erstellen
eines kontaktformular smit elemente prog
eine schwierige aufgabe es geht relativ
einfach wir können direkt unser ergebnis
angucken und können wunderbare
kontaktformulare erstellen wenn wir alle
mentor pro auf unserer webseite nutzen
kann man natürlich für das
kontaktformular auch andere plugins
nutzen meiner meinung nach macht das
aber wenig sinn sondern hören wir schon
auch elemente pro setzen dann können wir
hier auch die kontaktformular funktionen
verwenden die funktioniert super gut ich
habe schon seit einigen jahren im
einsatz und damit sehr zufrieden
ich hoffe dieses video hatte für dich
einen mehrwert und du baust nun auch
wunderschöne kontaktformulare auf deiner
webseite
wenn du fragen hast lass es mich gerne
in den kommentaren wissen natürlich
würde es mich freuen wenn du meinen
kanal unterstützt indem du diesen kanal
abonnierst und dem ganzen video
vielleicht einen like gibst
wenn du elemento pro spannend findest
aber elemente pro noch nicht im einsatz
hast dann kannst du natürlich elemente
pro erwerben ich hab das mal hier unten
unter dem video verlinkt den link zu
elemento rpo hin und wieder gibt es dort
sonderrabatt aktion beispiel black
friday oder jetzt war auch eine aktion
in geburtstag unglaublich gerade am
laufen auf jeden fall macht es sinn da
einmal vorbei zu gucken der link unter
diesem video ist ein empfehlungs link
also ein sogenannter feeling wenn du
diesen nutzt hast du keine nachteile
aber du unterstützt mich ich kriege dann
einen obolus und das kann ich dann
natürlich verwenden um hier ein besseres
equipment zu haben mehr videos zu machen
und es motiviert mich natürlich so dass
wir jetzt auch schon gewesen sein ich
freue mich wenn du beim nächsten mal
wieder dabei bist bis dahin toto
[Musik]
Browse More Related Video
The BEST Way to Summarize Anything With GPT-4o
Building an Elementor Starter Blueprint Site
After Close Formular erstellen und automatisieren als Agentur und Coach
So erstellst du fotorealistische KI Bilder in Canva. Schritt für Schritt Anleitung.
Create First Person Animations in Unreal Engine 5! (TUTORIAL)
Neues Bestellformular anlegen und gestalten | Digistore24 Bestellformular anlegen
5.0 / 5 (0 votes)