MW

MW

Hast du noch Fragen? Schreibe mir einfach eine Nachricht!

Elementor-Kontaktformular erstellen: minimalistisch und klar

Das Elementor-Kontaktformular bei Wordpress sieht nicht gut aus und dies wollen wir ändern. Ich zeige dir, wie du trotzdem damit ein minimalistisches und modernes/ansprechendes Kontaktformular erstellen kannst

Als erstes suchen wir unter Widgets nach Formular und fügen es zu einem Abschnitt hinzu, wo es zu finden sein soll. Das sieht jetzt so aus und hinterlässt keinen guten Eindruck, oder? 

Bei Elementor haben wir drei Abschnitte: Inhalt, Stil und Erweitert. Wir gehen alle drei durch und führen die notwendigen Anpassungen durch. 

Elementor-Kontaktformular - Inhalt

In diesem Abschnitt legen wir fest, welche Felder bei uns im Kontaktformular auftauchen werden und was passiert, nachdem das Kontaktformular ausgefüllt wird. 

Inhalt-Formularfelder

In diesem Teil bestimmen wir welche Felder wir brauchen und wie diese heißen werden. Ich bin dafür, dass wir unsere potentiellen Kunden dabei nicht überfordern. 

Wenn du im Nachhinein noch zusätzliche Infos brauchst, kannst du immer eine E-mail schicken und nachfragen. Du brauchst drei Sachen: Namen, E-Mail-Adresse und einen Textbereich für die Nachricht, die an dich geschickt wird. 

Je weniger Informationen auszufüllen sind, desto besser ist es.

Eine gute Idee für diejenige, die mehrere Kanäle betreiben, ist eine Auswahlliste mit der Frage hinzufügen: Wie hast du mich gefunden? Dies liefert uns direkte Hinweise, ob organische Suche für uns gut funktioniert oder vielleicht läuft Instagram oder LinkedIn besser. 

Außerdem brauchen wir noch einen Akzeptanz-Feld, in dem wir eine Bestätigung von unseren Kunden einholen, dass sie unsere Datenschutzbedingungen akzeptieren. Das Feld sieht bei Elementor miserabel aus, aber dies ändern wir noch über zusätzliche CSS-Einstellungen. 

Wenn du auf ausgewählte Felder klickst, hast du die Möglichkeit, ein paar Einstellungen vorzunehmen, die schon jetzt für uns wichtig sind. Wenn du magst, dass dein Formular minimalistisch gehalten wird, lass entweder den Feldnamen anzeigen oder wähle einen leeren Platzhalter. Wir haben unsere Erfahrungen im Netz gesammelt und wissen schon, dass hier eine Spalte ist und da gehört mein Namen rein. Wenn es um kompliziertere Sachen geht, ist es sinnvoll, im Platzhalter einen Hinweis einzublenden. Dies ist hier aber nicht der Fall. 

Bei den Formularfeldern ist für uns noch die Spaltenbreite relevant. Wenn du über die ganze Bildschirmbreite dein Kontaktformular setzt, sieht es nicht gut aus, wenn der Wert dafür bei 100% liegt. 

Inhalt-Schaltflächen

Bei Schaltflächen bestimmst du die Größe deines Buttons. Diese ist abhängig davon, ob dein Kontaktformular über die ganze Breite geht oder nicht. Bei der Größe des Buttons setze ich auf mittel und bei Spaltenbreite 40%. Diese Parameter kannst du sowohl fürs Tablet als auch für die Handy-Variante individuell anpassen. 

In der absenden Schlaltfläche trage das Wort ein, was beim Button als CTA auftaucht. Das Wort sollte kurz sein, wie „senden“ oder „abschicken“. 

Der letzte Punkt, den du beim Inhalt des Kontaktformulars unbedingt überprüfen musst, ist die E-Mail Adresse, an die dieses Formular geschickt wird. Wenn du etwas nicht bekommst, kannst du es bei Elementor unter Submission überprüfen. Da sammelst du auch alle Anfragen, die im Laufe der Zeit über das von dir erstellte Kontaktformular gesendet werden.

Elementor-Kontaktformular-Stil

Schauen wir uns jetzt die Stil-Formularfelder an, die dafür verantwortlich sind, wie unser Formular aussehen wird. 

Formular

Hier kannst die Abstände zwischen den Reihen oder Spalten bestimmen.

Ich setze beim Reihenabstand den Wert auf 20. So sieht mein Formular luftig aus. 

Bei Feldnamen bestimmen wir die Farbe und Typografie dafür. Überprüfe generell bei allen Typografie-Feldern, dass da die Schriftart auftaucht, die du dafür vorgesehen hast. 

Bei HTML-Feld bestimmst du die Farbe und Typografie für Platzhalter, wenn du dich für diese Variante entschieden hast.

Feld

Hintergrundfarbe setze ich auf #F9EDED00, damit die Hintergrundfarbe der Website diese Rolle für mein Kontaktformular übernehmen wird. 

Rahmenfarbe bestimmt die Farben der Linien deines Kontaktformulars. Es ist sinnvoll, hier deine Brandingfarben zu wählen. Dabei denke an Kontrast mit deiner Website. Die Linien müssen gut zu sehen sein. 

Rahmenbreite bestimmt, wie dick diese Linien sein sollen. Ich mag minimalistische und elegante Varianten meines Kontaktformulars. Deswegen setze ich auf 1 bei unteren Rahmen. Auf diese Weise bekommen wir nur eine Linie unten zu sehen. 

Borderradius spielt für dich eine Rolle, wenn du die Rahmen deines Kontaktformulars abrunden möchtest. 

Schaltflächen

Bei Schaltflächen kannst das Aussehen deines Buttons anpassen. Bei Typografie prüfst du, ob die richtige Schriftart gesetzt ist. Dein Button sollte gut lesbar sind. Aus diesem Grund passen die Schriftarten mit großem Kontrast nicht so gut. Bei der Auswahl von Umwandlung wird der Text in Großbuchstaben gesetzt. Häufig werden Versalien bei Buttons genutzt. Wenn du es machst, erhöhe den Wert für den Zeichenabstand. Das ist einer der wenigen Fälle, in denen du an diesen Wert dran gehen solltest.

Bei Rahmentype habe ich durchgezogen gewählt und dabei die Rahmenbreite auf 1 gesetzt. So passt die Rahmenbreite des Buttons zur Rahmenbreite des Formularfelds. 

Das Aussehen des Buttons passt sowohl im normalen Zustand als auch auf Hover (wenn man mit der Maus über den Button geht). Wenn du Lust hast, kannst du auch zusätzliche Animation auf dem Cover hinzufügen. Dein Button kann größer werden (Hover-Animation-Grow).

Elementor-Kontaktformular-Erweitert

Worauf du achten solltest: Sind alle Schriften richtig angepasst? In den Standardeinstellungen von Elementor ist Roboto gesetzt. Wenn es geht, verzichte darauf. Sie wird viel zu häufig genutzt und glaub es mir: Du brauchst Roboto nicht!

Akzeptanz

Leider können wir bei Style nicht darüber bestimmen, wie unsere Akzeptanz-Checkbox aussehen wird. Aus meiner Perspektive fällt es momentan aus der Reihe und zerstört die visuelle Darstellung des Kontaktformulars.

Um dies anzupassen gehen wir zu eigenes CSS hinzufügen und platzieren diesen Code:“

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: 0;
opacity: 0.01;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 2.3em;
font-size: 1.05em;
line-height: 1.7;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.4em;
height: 1.4em;
border: 0.5px solid #595659;
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
-webkit-transition: all .275s;
transition: all .275s;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✓︎';
position: absolute;
top: .580em;
left: .25em;
font-size: 1.2em;
color: #595659 !important;
line-height: 0;
-webkit-transition: all .2s;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
/* Disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #e9e9e9;
}
[type="checkbox"]:disabled:checked + label:after {
color: #E16246;
}
[type="checkbox"]:disabled + label {
color: #E6AF15;
}

Du kannst die Farbe und Breite des Rahmens ändern. Ich habe diese Stellen fett markiert, damit du es einfacher finden kannst. Du kannst auch ein anderes Zeichen für Akzeptanz wählen. Passe nur auf: Manche Icons funktionieren nicht so gut!

So hast du ein Elementor-Kontaktformular erstellt, das minimalistisch und modern aussieht. Falls du Fragen hast, melde dich bei mir und ich schaue, dass ich dir bei deinem Kontaktformular helfe. 

Author picture

Ich bin Maria Wiedner und ich erstelle Websites für selbstständige Frauen und kleine Unternehmen. Erstelle mit mir zusammen deine Website!

Hallo, ich bin Maria!

Mein Ziel ist es, die Websites zu erstellen, die deine Kunden aufhören lassen zu scrollen und stattdessen beginnen mit dir zu interagieren und sich am Ende für dich entscheiden.