Kontaktformular mit Gutena Forms

WordPress Kontaktformular erstellen. Ein Kontaktformular gehört auf jede Website. Kontaktformular-Plugins zu konfigurieren macht allerdings keinen Spaß. Die üblichen Plugins verursachen diese vier Probleme:

1. Die Unsicherheit, ob alle Kontaktanfragen auch ankommen.
2. Den Zwang, zusätzlich ein SMTP-Plugin installieren zu müssen.
3. Die komplexe Konfiguration von Kontakt- und SMTP-Plugins.
4. Die datenschutzrechtlichen Folgen, wenn externe Mailversender in Anspruch genommen werden müssen.

Wer sich mit all diesen Problemen nicht belasten will, greift zu Gutena Forms. Gutena Forms versendet keine Emails und ist komplett im Gutenberg-Editor integriert. Das moderne Minimal-Plugin, die erste Version erschien im August 2022, ist für die Häfte aller Websites völlig ausreichend. In diesem Beitrag zeige ich dir, wie du mit Gutena Forms in zehn Minuten ein betriebssicheres Kontaktformular baust.

Pro und kontra Gutena Forms

Du suchst ein modernes Kontaktformular-Plugin, das sich nahtlos in das Blocksystem von WordPress einfügt. Du suchst ein Plugin ohne Pagebuilder? Wenn du mit zwei Einschränkungen leben kannst, ist Gutena Forms eine Überlegung wert.

Pro Gutena Forms

• Keine Kontaktanfragen gehen verloren.
• Kein externer Versendedienst nötig, du musst keine zusätzlichen Accounts irgendwo anlegen.
• Keine Shortcodes wie bei Contact Form 7.
• Kein Pagebuilder wie bei WP Forms.
• Kein nerviges, zusätzliches SMTP-Plugin nötig.
• Gutena Forms ist in 10 Minuten einsatzbereit. Versprochen!

Kontra Gutena Forms

Warum Gutena Forms nicht für alle Websites geeignet ist? Hier sind zwei heftige Einschränkungen:

• Gutena Forms enthält keinen Auto-Responder – dieses Feature ist aber in der Entwicklung (Stand Januar 2025).
• In der kostenlosen Basisversion werden die Kontaktanfragen nur lokal in WordPress gespeichert, aber nicht per E-Mail an den Betreiber der Website versendet (Stand Januar 2025).

Die möchtest Gutena Forms trotzdem installieren? Dann lies weiter…

Gutena Forms installieren

Die Installation von Gutena Forms funktioniert ganz normal über dein Backend:

1. Gehe auf Plugins / Hinzufügen.
2. Gib „Gutena“ in die Plugin-Suche ein.
3. Installierte und aktiviere Gutena Forms.

Gutena Forms starten

Nach der Installation und Aktivierung findest du in der schwarzen Menüleiste links den neuen Eintrag Forms. Ein Klick darauf führt auf das Dashboard von Gutena Forms.

Das Gutena Forms Dashboard

Auf dem Gutena-Dashboard findest du vier Rubriken:

• Introduction – hier findest du ein ein englischspachiges Erklärvideo.
• Entries – hier sind die Kontaktanfragen gelistet.
• Settings – in der kostenlosen Version sind hier keine Funktionen verfügbar.
• Knowledge Base – diese Rubrik führt auf das Supportforum des Plugins auf WordPress.org.

Entries, also Kontaktanfragen, sind jetzt natürlich noch keine vorhanden. Ein Kontaktformular wurde ja noch gar nicht erstellt. Doch zunächst soll eine neue Seite für das Kontaktformular angelegt werden.

Eine Kontaktseite anlegen

Wo soll das Kontaktformular hin? Ein Kontaktformular kann auf jeder Seite und auch auf mehreren Seiten eingefügt werden.

Aber davon unabhängig sollte jede Website über eine eigene Kontakt-Seite verfügen. Als Beispiel soll die Seite der Band Too Young To Die eine Kontaktseite erhalten: https://www.2y2d.de/kontakt/.

Seitentitel und Seiten-URL wurden kurz und knackig gewählt. Die Seite heißt schlicht und einfach Kontakt und ebenso der sogenannte Slug, also der letzte Teil der URL.

Ein-Spalten-Block als Container

Auf die Kontakt-Seite wird zunächst ein spezieller Block eingefügt, und zwar ein Spaltenblock mit einer einzigen Spalte. Technisch notwendig ist dieser Block zwar nicht, aber dadurch lässt sich die Optik des Formulars später viel einfacher anpassen. Dieses Vorgehen wird auch im Erklärvideo von Gutena Forms empfohlen.

Es gilt hier folgende WordPress-Weisheit: Was sich nicht in einem normalen Block anpassen lässt, kann mit hoher Wahrscheinlichkeit in einem „Container“ angepasst werden, der diesen Block umgibt. Ein solcher Container ist der Ein-Spalten-Block.

Bitte lege diesen Ein-Spalten-Block jetzt ebenfalls an!
Wir brauchen ihn später noch für die Gestaltung des Kontaktformulars!

Der Ein-Spalten-Block in der Listenansicht

Gutena Forms passt sich dem Block-System von WordPress an. Zur Übersicht der Blöcke brauchst du die Listenansicht:

1. Klicke links oben auf das Icon mit der „Treppe“, um die Listenansicht zu öffnen. Damit klappt die linke Seitenleiste auf,
2. Klicke in der linken Seitenleiste auf den Spaltenblock.
3. Im Hauptfenster ist nun der Ein-Spalten-Block eingeblendet. Mit einem Klick auf das Pluszeichen kannst du nun einen Block einfügen. In unserem Fall kommt da der Formularblock rein.

Formular-Block auswählen

Mit der Installation von Plugins wird WordPress in vielen Fällen auch mit neuen Blöcken ausstaffiert. So ist es auch bei Gutena Forms. Gutena Forms hat einen Block mitgebracht, er trägt den Namen Form und ist hellgrün. Dieser Block Form soll nun hier eingefügt werden. Die Vorgehensweise:

1. Tippe „form“ in die Blocksuche ein.
2. Wähle den hellgrün eingefärbten Block Form aus.

Formular-Vorlage auswählen

Das Kontaktformular musst du nicht von Anfang an selbst aufbauen. Gutena bietet diverse Vorlagen an, auch Varianten genannt. Folgende Varianten stellt Gutena Forms zur Verfügung:

1. One column basic – Felder in einer Spalte, Stil basic.
2. One column modern – Felder in einer Spalte, Stil modern.
3. Two column basic – Felder in zwei Spalten, Stil basic.
4. Two column modern – Felder in zwei Spalten, Stil modern.
5. Ohne Vorlage beginnen.

Für den Anfang wählst du am besten die erste Option: One column basic.

Eingabefelder betrachten

One Column basic ist eingefügt. Das Formular ist schon mit fünf Eingabefeldern und einem Absendebutton bestückt und damit startklar. Aber zunächst schauen wir uns die Details an:

1. Hast du die Listenansicht geöffnet? Falls nicht, klicke links oben auf das Icon mit der Treppe. Damit öffnet sich die Listenansicht in der linken Seitenleiste.
2. In der Listenansicht siehst du nun die verschiedenen Eingabefelder, zum Beispiel First Name (Vorname), Last Name (Nachname) und Email-Adresse.

Die Felder kannst du beliebig umbenennen, verschieben oder löschen. Wenn du weiter nach unten scrollst, siehst du drei besondere Felder.

Das sind die drei Sonderfelder noch den normalen Eingabefeldern:

1. Der Submit-Button, also der Sendbutton.
2. Die Confirmation Message, also die Bestätigung, falls das Absenden des Formulars funktioniert hat.
3. Die Error-Message, also eine Fehlermeldung, falls das Absenden des Formulars nicht funktioniert hat.

Kontaktfomular testen

Die Feinheiten kommen später dran, jetzt soll das Kontaktformular erstmal auf seine Funktion getestet werden. Nach dem Abspeichern wird das Formular mit Daten befüllt: First Name, Last Name, Email, Subject und Message.

So testest du, ob falsche Emails zu einer Fehlermeldung führen: Gib eine falsche Adresse ein, zum Beispiel irgendwas@mail (es fehlt die Endung).

Im obigen Bild wurden die Daten korrekt eingegeben und mit einem Klick auf den Sendebutton Submit abgeschickt. Hier ist das Ergebnis:

Gutena Forms meldet: Your form submitted successfully. Es hat geklappt, die Daten wurde erfolgreich abgesendet und können nun auf dem Dashboard von Gutena Forms unter Entries abgerufen werden.

Das Versenden klappt, der Eintrag ist in WordPress angekommen.
Achtung: Eine automatische Versendung des Eintrags per E-Mail findet zur Zeit (Januar 2025) nicht statt. Mit deser Einschränkung musst du leben!

Nächster Schritt: Das Formular wird auf die Anforderungen der Website angepasst.

Formularfelder anpassen

Wenn ein Formular zu viele Felder hat, wirkt das abschreckend. Im Beispiel geht es um eine Band-Website, da kann das Formular ein bisschen aufgeräumt werden. Separate Felder für Vor- und Nachname braucht es nicht. So löschst du ein überflüssiges Feld:

1. Klicke das zu löschende Feld in der linken Seitenleiste in der Listenansicht an.
2. Klicke mit der linken Maustaste auf das „Ampelmenü“, also die drei Punkte untereinander, und anschließend auf Löschen.

Formular eindeutschen

Die Begriffe über den Eingabefeldern kannst du direkt eindeutschen. Bei den Platzhaltern in den Eingabefeldern („First name“. etc.) ist das nicht möglich. Für die Umbenennung der Platzhalter gehst du so vor:

1. Klicke in die linke Seitenleiste: Wähle in der der Listenansicht das betreffende Feld an.
2. Klicke in die rechte Seitenleiste: Ersetze unter PLACEHOLDER den Namen.

Pflichtfelder definieren

Unterhalb des PLACEHOLDER-Felds in der rechten Seitenleiste findet du den Schieber Required (Verpflichtend). Hier kannst du für jedes Feld entscheiden:

• Schieber ist links: Das Feld kann freiwillig ausgefüllt werden.
• Schieber ist rechts: Das Feld ist ein Pflichtfeld. Wenn es nicht ausgefüllt wird, lässt sich der Absendebutton nicht betätigen.

Design des Kontaktformulars anpassen

Okay, Formular hat jetzt die richtige Anzahl von Feldern und ist eingedeutscht. Aber optisch ist noch Luft nach oben. Jetzt werden die Farben geändert.

Farben anpassen

So änderst du die Hinterundfarbe des Formulars

1. Öffne die Listenansicht und klicke in der linken Seitenleiste auf den Ein-Spalten-Block, also den Container, der den Forms-Block umgibt.
2. Klicke in der rechten Seitenleiste auf Block.
3. Klicke in der rechten Seitenleiste auf das Icon mit dem Halbmond.
4. Wähle in der rechten Seite eine Textfarbe und eine Hintergrundfarbe aus.

Abstände und Rand anpassen

Jetzt kommen die Feinheiten dran. So definierst du die Abstände und den Rand:

1. Scrolle in der rechten Seitenleiste etwas nach unten. Bei Innenabstand kannst du nun mit dem Schieberegler die Abstände rechts und links zwischen den Eingabefeldern und dem Rand festlegen.
2. Bei Ränder kannst du eine Farbe und eine Dicke für den Rand festlegen.
3. Bei Radius kannst du die Ecken abrunden.

Absendebutton anpassen

So passt du den Absendebutton an:

1. Klicke in der linken Seitenleiste auf Button.
2. Klicke in der rechten Seitenleiste auf Farben und wähle eine Farbe fürText (Text des Buttons) und Hintergrund (Farbe des Buttons).
3. Klicke in der rechten Seitenleiste auf Typografie und passe die Schriftgröße des Buttons an.

Das fertige Kontaktformular

Fertig ist das Kontaktformular. Hier ist es im Einsatz: 2y2d.de/kontakt