Formulare, Buttons und Widgets

Modul 4: Seiten, Aussehen und Funktionen · Lesezeit: 8 Minuten

Lernziel: Nach dieser Lektion können Sie das Kontaktformular einrichten (Empfänger, Bestätigung, Dankesseite, Spamschutz, Newsletter und Versandart), schwebende Buttons für WhatsApp und Kontakt setzen und ein Widget eines anderen Dienstes einbinden. Außerdem wissen Sie, wann Eigener Code und Eigenes HTML passen.

Kernbegriffe: Kontaktformular, Empfänger, Bestätigungs-E-Mail, Dankesseite, Captcha, Double-Opt-in, Versandart, schwebender Button, Widget, Einbettungscode, Einwilligung, Eigener Code, Eigenes HTML

Das Kontaktformular: zwei Stellen

Ein Formular auf Ihrer Website besteht aus zwei Teilen. Das Formular selbst, mit den Feldern, die ein Besucher ausfüllt, steht auf einer Seite. Sie fügen es mit dem Abschnitt Kontakt ein (über Blöcke oder Abschnitt hinzufügen) oder über den Chat. Was passiert, wenn jemand auf Senden klickt, legen Sie unter Einstellungen > Formulare fest. Dieses Panel richten Sie immer selbst ein; der Chat übernimmt das nicht.

Das Formular hat immer die Felder Name, E-Mail und Nachricht. Über den Chat fügen Sie weitere Felder hinzu, höchstens acht: ein Textfeld, eine Auswahlliste (zum Beispiel „Innen oder außen?“), E-Mail, Telefon, ein langes Textfeld, ein Datum oder eine Zahl. Ein Feld zum Mitsenden einer Datei oder eines Fotos gibt es nicht. Möchte Schildersbedrijf Example Fotos vom Auftrag erhalten, schreibt der Betrieb in den Dankestext: „Senden Sie uns gern Fotos an unsere E-Mail-Adresse.“

Wichtig: Auf der kostenlosen Website ohne Paket ist das Formular sichtbar, aber ausgegraut, und es versendet keine E-Mail. Formulare versenden erst wirklich, wenn Ihre Website in einem AI Builder-Paket liegt. Die folgenden Einstellungen können Sie aber schon vorbereiten; sie werden dann sofort verwendet.

Einstellungen > Formulare

Das Panel hat fünf Bereiche.

Nachrichten empfangen. Bei Nachrichten senden an tragen Sie die E-Mail-Adresse ein, an die ausgefüllte Formulare gehen. Lassen Sie das Feld leer, gehen sie an die E-Mail-Adresse Ihres Kontos bei WebOké. Füllen Sie es bewusst aus. Bei Betreff der E-Mail wählen Sie den Betreff (leer: „Neue Nachricht über Ihre Website“). Bei Nach dem Absenden wählen Sie Dankesnachricht anzeigen mit Ihrem eigenen Text oder Auf eine Seite weiterleiten: eine Dankesseite, die Sie selbst anlegen und nicht ins Menü aufnehmen (Lektion 4.1). Damit können Sie später messen, wie oft das Formular abgeschickt wird.

Versenden über. Wie die E-Mail verschickt wird. WebOké-Server funktioniert sofort, mit noreply@weboke.site als Absender. Ihre eigene E-Mail-Adresse (SMTP) wird empfohlen: Die E-Mail kommt dann von Ihrer eigenen Domain und landet seltener im Spam. Mit Für mich einrichten legt der Builder diese Adresse auf Ihrer Domain an. Unter Ihrer eigenen E-Mail-Adresse können Sie auch einen Mailversanddienst wählen, etwa Postmark, Brevo, Mailgun oder SendGrid. Warum der Absender so viel ausmacht, lesen Sie in Lektion 5.3.

Bestätigung an den Besucher. Schalten Sie Dem Besucher eine Kopie senden ein, erhält der Besucher eine Bestätigungs-E-Mail. Das ist oft die erste Nachricht, die jemand von Ihnen bekommt. Sie wählen den Betreff, Ihr Text (mit {naam} für den Namen des Besuchers), die Signatur und ob die ausgefüllte Nachricht mitgeschickt wird. Der Builder setzt Ihren Text in die Gestaltung Ihrer Website, mit Ihrem Logo. Mit Text von der KI schreiben lassen erhalten Sie einen Vorschlag.

Spam abwehren. Jedes Formular hat immer eine unsichtbare Prüfung: ein verstecktes Feld und eine Zeitsperre. Sie hält den meisten Spam ab, ohne dass Besucher etwas davon merken. Bekommen Sie trotzdem viel Spam, wählen Sie eine zusätzliche Prüfung, ein Captcha: Cloudflare Turnstile oder hCaptcha. Dafür legen Sie ein kostenloses Konto bei diesem Dienst an und tragen den Site key und den Secret key ein. Schalten Sie ein Captcha erst ein, wenn es nötig ist: Jeder zusätzliche Schritt kostet Besucher.

Newsletter. Sie können ein Häkchen ins Formular setzen, mit dem sich Besucher bei Mailchimp, Laposta, Brevo oder MailerLite anmelden. Nur wer das Häkchen selbst setzt, wird hinzugefügt. Immer mit Double-Opt-in: Der Besucher bestätigt zuerst per E-Mail. Bei Laposta und MailerLite schalten Sie das selbst in diesem Dienst ein; der Builder sagt Ihnen, wo. Ohne Double-Opt-in kann jeder fremde Adressen in Ihre Liste eintragen.

Außerdem: Ein Besucher kann höchstens 5 Nachrichten pro Stunde senden. Haben Sie eine Datenschutzerklärung, steht unter dem Formular ein Link dorthin. Ein Formular erhebt personenbezogene Daten; was Sie dafür regeln müssen, steht in Lektion 7.1.

Stolperfalle: Testen Sie das Formular nach jeder Änderung selbst, von einer anderen Adresse als der Empfangsadresse. Sehen Sie auch in Ihrem Spamordner nach und prüfen Sie, ob die Bestätigung beim „Besucher“ ankommt.

Schwebende Buttons

Unter Einstellungen > Buttons setzen Sie Buttons, die auf jeder Seite unten im Bild bleiben, rechts oder links (Ecke: Unten rechts oder Unten links).

• WhatsApp-Nummer: im internationalen Format, also mit Ländervorwahl (zum Beispiel +49 für eine deutsche oder +31 für eine niederländische Nummer) und ohne die führende 0. Lassen Sie das Feld leer, gibt es keinen WhatsApp-Button. Eine Vorausgefüllte Nachricht ist möglich, zum Beispiel „Ich hätte gern ein Angebot für Malerarbeiten.“ Der Button öffnet einen Chat mit Ihrer Nummer.
• Schwebender Kontakt-Button: öffnet Ihr Kontaktformular in einem Fenster. Die Nachricht kommt an derselben Adresse an wie Ihr Formular. Sie wählen den Button-Text.

In der Vorschau stehen die Buttons etwas höher als auf Ihrer echten Website, damit sie nicht hinter dem Hilfe-Button des Builders verschwinden.

Achtung: Ein WhatsApp-Button verspricht eine schnelle Reaktion. Lesen Sie WhatsApp nur abends, wählen Sie lieber den Kontakt-Button.

Widgets anderer Dienste

Ein Widget ist ein Stück eines anderen Dienstes auf Ihrer Seite: ein YouTube-Video, eine Google-Maps-Karte, ein Terminplaner von Calendly, Ihr Instagram, eine Spotify-Playlist. Bei vielen Diensten genügt der Link; der Builder erstellt den Player oder das Formular selbst. Beispiele: YouTube, Vimeo, Spotify, Calendly, Google Maps (die Adresse genügt), Google Kalender, Instagram und TikTok (Ihr @Name genügt) sowie Google Formulare. Bei anderen Diensten, etwa Salonized, Trustpilot oder Bandcamp, fügen Sie den Einbettungscode ein: das Stück Code, das Sie bei diesem Dienst erhalten, um es auf eine Website zu setzen.

So geht es: Sagen Sie es im Chat mit dem Link dazu („Setzen Sie unsere Anfahrtskarte unter den Kontaktblock, Adresse Dorfstraße 1“), fügen Sie den Code in den Chat ein oder wählen Sie in Blöcke den Abschnitt Widget. Der Builder erkennt den Dienst, schlägt Höhe und Überschrift vor und warnt, wenn etwas nicht funktionieren wird. Lassen Sie die KI das Widget einfügen, ist das eine Anweisung und kostet Bearbeitungen; Sie sehen vorher, wie viele. Ein eingefügtes Widget ändern Sie mit Code bearbeiten am Block in der Vorschau.

Drei Dinge, die Sie wissen sollten:

1. Ein Widget lädt erst nach der Einwilligung. Dienste anderer Anbieter setzen oft Cookies oder verfolgen Besucher. Ist der Cookie-Banner eingeschaltet, lädt ein Widget erst, wenn der Besucher in diese Art von Cookies einwilligt. Der Dienst erscheint automatisch in Ihrem Cookie-Banner unter „Was jetzt auf Ihrer Website läuft“. Prüfen Sie danach auch Ihre Datenschutzerklärung (Lektion 7.1 und 7.2).
2. Google Kalender muss öffentlich sein. Einen privaten Kalender kann niemand sonst sehen. Machen Sie in Google Kalender nur einen eigenen Kalender öffentlich, der enthält, was Besucher sehen dürfen, niemals Ihren persönlichen Kalender.
3. Unsicherer Code kommt nicht auf die Website. Code, der Daten von Besuchern weiterleiten kann, verschleiert, was er tut, oder etwas von einer unbekannten Website lädt, setzt die KI nicht auf Ihre Website. Sie erklärt, warum.

Eigener Code und Eigenes HTML im Überblick

Für Fortgeschrittene gibt es zwei Stellen.

Eigener Code steht ganz unten unter Einstellungen > Integrationen: Code, der auf jeder Seite stehen muss, Im Head jeder Seite oder Am Ende jeder Seite. Zum Beispiel das Ladeskript eines Chatdienstes oder eines Bewertungs-Widgets. Diesen Code prüft der Builder nicht („Diesen Code prüfen wir nicht“). Bekannte Dienste hält der Cookie-Banner zurück, bis eine Einwilligung vorliegt. Setzen Sie das Häkchen bei Dieser Code ist notwendig nur bei Code, der keine Besucher verfolgt, denn dann lädt er sofort. In der Vorschau im Builder wird eigener Code nicht ausgeführt, auf Ihrer echten Website schon. Auf der kostenlosen Website funktioniert eigener Code nicht. Für eine Mess-ID wie Google Analytics verwenden Sie nicht Eigener Code, sondern das feste Feld unter Integrationen (Lektion 7.2).

Eigenes HTML ist ein Abschnitt in Blöcke. Sie fügen eigenes HTML und gegebenenfalls CSS ein und ändern es später mit HTML bearbeiten. Farben und Schriften folgen Ihrem Corporate Design. Skripte, iframes und Formulare funktionieren hier nicht; dafür verwenden Sie ein Widget.

Verwenden Sie beides nur, wenn es nicht anders geht: Fremder Code ist ein Risiko für Geschwindigkeit, Sicherheit und Datenschutz.

Im Builder: so gehen Sie vor

1. Setzen Sie den Abschnitt Kontakt mit Formular auf Ihre Kontaktseite.
2. Öffnen Sie Einstellungen > Formulare. Füllen Sie Nachrichten senden an aus.
3. Wählen Sie bei Versenden über Ihre eigene E-Mail-Adresse, oder lassen Sie den WebOké-Server eingestellt, bis Ihre Domain bereit ist (Lektion 5.3).
4. Schalten Sie Dem Besucher eine Kopie senden ein und schreiben Sie Ihren eigenen Text.
5. Wählen Sie bei Nach dem Absenden eine Dankesnachricht oder eine Dankesseite.
6. Setzen Sie bei Bedarf unter Einstellungen > Buttons einen WhatsApp- oder Kontakt-Button.
7. Stellen Sie Ihre Website online und senden Sie eine Testnachricht.

Zusammenfassung

• Das Formular steht auf einer Seite; was damit passiert, regeln Sie unter Einstellungen > Formulare.
• Füllen Sie Nachrichten senden an bewusst aus; wählen Sie als Absender möglichst Ihre eigene E-Mail-Adresse.
• Auf der kostenlosen Website versendet das Formular keine E-Mail; eine Datei mitzuschicken ist nie möglich.
• Schwebende Buttons für WhatsApp und Kontakt finden Sie unter Einstellungen > Buttons.
• Widgets laden erst nach der Einwilligung; Eigener Code und Eigenes HTML sind für Fortgeschrittene.

Quiz

Aufgabe

Aufgabe D4.3: Ihr Kontaktformular und ein Widget. Richten Sie Ihr Formular vollständig ein und fügen Sie ein Widget ein, das wirklich etwas bringt.

Checkliste:

• [ ] Abschnitt Kontakt mit Formular auf Ihrer Kontaktseite;
• [ ] Nachrichten senden an mit einer Adresse ausgefüllt, die Sie täglich lesen;
• [ ] Versandart gewählt und verstanden, warum;
• [ ] Bestätigung an den Besucher mit Ihrem eigenen Text;
• [ ] Dankesnachricht oder Dankesseite eingerichtet;
• [ ] ein Widget eingefügt (zum Beispiel eine Karte oder einen Terminplaner) und gesehen, dass es im Cookie-Banner steht;
• [ ] Website online und eine Testnachricht gesendet (nur mit einem Paket; auf der kostenlosen Website prüfen Sie die Einstellungen).

Fragen:

1. An welcher Adresse kommen Ihre Formularnachrichten an, und über welche Versandart?
2. Welches Widget haben Sie gewählt, was bringt es Ihren Besuchern und was sieht ein Besucher, der nicht einwilligt?
3. Ist Ihre Testnachricht angekommen, und kam die Bestätigung beim „Besucher“ an oder im Spam?

Nach „erledigt“ sehen Sie eine Beispielantwort: Schildersbedrijf Example sendet Nachrichten an info@example.com über die eigene E-Mail-Adresse auf der Domain; das Widget ist eine Google-Maps-Karte mit der Adresse, die erst nach der Einwilligung lädt und sonst eine Fläche mit einem Button zum Einwilligen zeigt; die Testnachricht ist angekommen, die Bestätigung auch, nicht im Spam.

Weiterführende Links

• Ein Kontaktformular auf Ihrer Website: Felder per E-Mail versenden und Spam verhindern
• Kostenloser Kurs E-Mail in Ordnung: einrichten und gut ankommen lassen 7.3: Mail von Ihrer Website und Formularen
• Kostenloser Kurs E-Mail in Ordnung: einrichten und gut ankommen lassen 7.2: Einwilligung, Abmeldung und eine saubere Liste
• Click to Chat verwenden (WhatsApp-Hilfebereich): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Google Kalender-Hilfe, Englisch): https://support.google.com/calendar/answer/37083