WordPress Kontaktformular erstellen mit Elementor (Tutorial)

Summary

In 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

00:00

😊 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.

05:01

👨‍💻 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.

10:02

💬 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.

15:02

⚙️ 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.

20:05

🎨 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.

25:05

😃 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.

Keywords

💡Kontaktformular

Ein Kontaktformular ist ein Formular auf einer Website, mit dem Besucher der Seite dem Seitenbetreiber eine Nachricht senden können. Kontaktformulare werden häufig für Supportanfragen, Newsletter-Anmeldungen oder allgemeine Nachrichten an den Seitenbetreiber verwendet. In dem Video geht es darum, wie man mit Elementor Pro ein Kontaktformular erstellt.

💡Elementor

Elementor ist ein WordPress Page Builder Plugin, mit dem man WordPress Webseiten visuell gestalten kann, ohne Code schreiben zu müssen. Elementor Pro ist die Premium Version von Elementor, die erweiterte Funktionen wie z.B. Kontaktformulare bietet. Das Video zeigt, wie man mit Elementor Pro ein Kontaktformular erstellt.

💡Eingabefeld

Ein Eingabefeld ist ein Formularfeld, in das der Besucher Daten eingeben kann, z.B. Name, E-Mail oder Telefonnummer. In dem Video werden verschiedene Eingabefelder wie Vorname, Nachname, Telefon und E-Mail für das Kontaktformular erstellt.

💡DSGVO

Die DSGVO (Datenschutz-Grundverordnung) ist eine EU-Verordnung, die die Verarbeitung personenbezogener Daten regelt. Laut DSGVO muss man Besucher über die Datenerhebung im Kontaktformular informieren. Im Video wird gezeigt, wie man eine Checkbox für die Datenschutzerklärung einfügt.

💡Aktion nach dem Versenden

Nachdem der Besucher das Kontaktformular abgesendet hat, kann man Aktionen festlegen, die dann automatisch ausgeführt werden. Typische Aktionen sind das Senden einer Bestätigungs-E-Mail oder das Speichern der Formulardaten. Im Video wird gezeigt, wie man eine Bestätigungs-E-Mail nach dem Absenden des Formulars einrichtet.

💡Formularfelder

Unter Formularfelder versteht man die einzelnen Felder in einem Formular, wie z.B. Name, E-Mail, Telefon etc. Im Video kann man in den Formularfeldern festlegen, ob ein Feld ein Pflichtfeld ist, welcher Eingabetyp erlaubt ist (Text, E-Mail, Zahl etc.) und deren Eigenschaften anpassen.

💡E-Mail-Benachrichtigung

Bei der E-Mail-Benachrichtigung wird automatisch eine E-Mail an eine festgelegte E-Mail-Adresse gesendet, wenn ein Besucher das Formular absendet. Im Video wird gezeigt, wie man die E-Mail-Adresse und den Inhalt der Benachrichtigungsmail anpassen kann, um die Formulardaten zu erhalten.

💡Style

Unter Style kann man im Video das Aussehen des Kontaktformulars anpassen, wie z.B. Abstände, Schriftgrößen und Farben der einzelnen Elemente.

💡Shortcode

Ein Shortcode ist ein Platzhalter für Inhalte in WordPress. Mit Shortcodes kann man z.B. Formularfelder in der E-Mail-Benachrichtigung einbinden, um die Eingaben des Besuchers in der Mail anzuzeigen. Im Video wird gezeigt, wie man die Shortcodes von verschiedenen Formularfeldern einfügt.

💡Collections

Collections sind gespeicherte und archivierte Formulareinsendungen in der Elementor-Datenbank. Über die Collections kann man später auf die gespeicherten Formulardaten zugreifen, ohne die einzelnen E-Mail-Benachrichtigungen aufbewahren zu müssen. Im Video sieht man, wie die Collections im Dashboard angezeigt werden.

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]