So gehen Formulare bei Squarespace-Websites
Wenn du an Formulare denkst, denkst du dann an langweilige Ausfüllfelder?
Wenn ja, dann lass mich dir sagen, dass Formulare nicht langweilig sind, sondern ganz im Gegenteil für deine Squarespace-Website echt nützlich sind!
Durch Formulare sammelst du nicht nur Informationen – sie sind die Schaltzentrale für Interaktion und Engagement auf deiner Website.
In diesem Artikel möchte ich dir zeigen, wie du nicht nur effektive, sondern auch coole Formulare erstellst. Erfahre, wie du sie individuell designen und perfekt auf deine Website abstimmen kannst.
Wenn du eher Team “Video schauen” bist, dann klicke auf das folgende YouTube Video. Für Team “Lesen” scroll einfach weiter! 😉
Inhaltsverzeichnis:
Warum solltest du Formulare einbauen?
Formulare sind ein praktisches Werkzeug für deine Website. Aber nicht nur das.
Sie sind eine unverzichtbare Schnittstelle zwischen deinem Unternehmen und deinen (potentiellen) Kunden.
Durch Formulare können deine Website-Besucher Kontakt zu dir aufnehmen, dir Fragen stellen und und und
Formulare ermöglichen also eine nahtlose Interaktion und erfassen wichtige Informationen für eine reibungslose Kommunikation.
Das klingt doch richtig wichtig, oder?
Das ist es auch!
Denn die Kommunikation mit deinen (potentiellen) Kunden ist das A und O.
Und wie genau du nun Formulare für deine Squarespace-Website erstellst, zeige ich dir jetzt.
So legst du ein Formular bei Squarespace an
Zunächst musst du natürlich deine Squarespace-Website öffnen. 😉
Platzierung des Formulars
Überleg dir dann, wo du dein Formular platzieren möchtest. Ein Formular eignet sich besonders für eine
allgemeine Kontaktseite,
eine About-Seite oder
deine Angebotsseite.
Nehmen wir mal an, du hast die About-Seite ausgewählt. Suche dir nun einen Platz auf dieser Unterseite aus, wo du das Formular gerne haben möchtest.
Füge ein Formular ein
Das Formular fügst du nun ein, indem du auf “Blog hinzufügen” klickst.
Hier siehst du dann verschiedene Bausteine, die du in deine Squarespace-Website einbauen kannst. Wähle “Formular” aus.
Jetzt erscheint erstmal ein allgemeines Formular.
Dieses kannst du nach Belieben verkleinern und stylen. Dazu aber später mehr.
Zuerst möchte ich dir zeigen, wie du die Inhalte deines Formulars bearbeiten kannst.
Inhalte: Bearbeite dein Squarespace-Formular
Um dein Formular zu bearbeiten, musst du auf den “Stift” klicken.
Benenne dein Formular
Und jetzt wird es wichtig: Gib deinem Formular einen Namen (“Formularname”). Dieser ist für deine Website-Besucher nicht sichtbar, aber für dich relevant.
Wähle einen Namen für dein Formular, anhand welchem du erkennen kannst, woher die Leute kommen, die das Formular ausgefüllt haben.
Also “formular-1” wäre nicht zu empfehlen, “formular-about” ist schon sinnvoller.
Bearbeite den Formular-Button
Der “Button-Text” entspricht dem Call-to-Action. Also zum Beispiel “jetzt kontaktieren”, “jetzt abschicken” et cetera.
Mit dem Button gibst du deinen Website-Besuchern eine Handlungsaufforderung.
Formularfelder bearbeiten
Für dein Formular stehen dir verschiedene Felder zur Verfügung.
Die klassischen und bereits vorhandenen sind
Name
Betreff
Nachricht
Du kannst auch weitere Felder hinzufügen wie Drop Down, Freitext oder Telefonnummer.
Die Felder “Uhrzeit” und “Datum” sind, je nachdem in welcher Version du unterwegs bist, schwierig. Beachte auch, dass in Deutschland der Kalender am Montag beginnt und in den USA am Sonntag!
Beschreibung und Platzhalter hinzufügen
Zu den einzelnen Feldern kannst du auch eine Beschreibung hinzufügen.
Die Beschreibung steht unter der Bezeichnung des Feldnamens und über dem Eingabefeld (siehe Screenshot 😉 ).
Die Beschreibung ist eine Art Unterüberschrift oder kleine Anmerkung. Gib in diese ein, was wichtig für deine Besucher ist.
Beim Platzhalter kannst du einen Beispieltext einfügen, anhand dessen sich deine Besucher orientieren können, wenn sie das Formular ausfüllen.
👉 Ständig frische Tipps für dein Webdesign-Business? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Erforderliche Felder einrichten
Du möchtest, dass die Leute bestimmte Felder ausgefüllt haben MÜSSEN, bevor sie das Formular abschicken können?
Das kannst du ganz easy einrichten.
Wenn du möchtest, dass sie ihre E-Mail-Adresse auf jeden Fall angeben müssen, dann lässt du den Regler auf grün (=erforderlich). Und so können die Besucher das Formular ohne die Angabe ihrer E-Mail-Adresse nicht abschicken.
Was auch oft notwendig ist, ist, dass die Leute angeben, die AGB gelesen und zur Kenntnis genommen haben.
Und so kannst du dies einbauen:
Wähle ein Kontrollkästchen mit nur einer Auswahl aus.
Tippe das Wort “Ja!” ein.
Und setze das Kästchen auf “erforderlich”.
Jetzt können die Besucher das Formular nur abschicken, wenn sie das Kästchen angeklickt und den AGB zugestimmt haben.
Tipp: Feedback nach dem Absenden verschicken
Wenn jemand ein Formular ausgefüllt und abgesendet hat, würde ich dir empfehlen, dass du ihm ein Feedback sendest.
Du kannst ihm entweder eine Nachricht senden mit “Hey, danke dir für deine Anfrage! Ich melde mich innerhalb von 24 Stunden bei dir.”.
Oder, was viel cooler ist:
Du leitest ihn nach dem Absenden auf eine andere Seite (eine Konfetti-Seite) um. Auf dieser Seite würde dann etwas Ähnliches wie in der Nachricht stehen.
Aber der Unterschied ist ganz klar, dass eine Seite einfach viel professioneller wirkt, als eine einfache Nachricht.
Wenn du also genug Zeit hast, um diese einzurichten, würde ich dir die zweite Variante empfehlen!!!
Speicherplatz festlegen
Im Reiter “Speicherplatz” legst du fest, an welche E-Mail-Adresse das ausgefüllte Formular gesendet wird.
Achte unbedingt darauf, dass es eine E-Mail ist, die noch aktuell ist und in die du auch reinschaust ;)
Du hast auch die Möglichkeit, dir die verschickten Formulare im Formularabsender anzuschauen.
Sicherheit für deine Formulare
Übrigens solltest du auch reCAPTCHA aktiviert lassen.
Google reCAPTCHA sorgt für die Sicherheit deiner Formulare und dafür, dass du nicht so viel Spam erhältst.
Design: Erstelle individuelle und ansprechende Formulare
Jetzt geht’s ans Kreative!
Beim Designen deines Formulars kannst du zwischen globalen Einstellungen und individuellen Einstellungen unterscheiden.
Globale Einstellungen wirken sich auf alle Formulare deiner Squarespace-Website aus.
Hier legst du
den Hintergrund,
die Farbe,
die Platzierung,
die Feldform,
den Rand,
das Padding (Abstand nach außen),
die Schriftart
und und und
für deine Formulare fest.
Dies ist relativ cool und auch neu bei Squarespace!
Du kannst aber auch individuelle Anpassungen für ein spezifisches Formular vornehmen. Wie
den Button-Stil,
eine Lightbox auswählen (dazu später mehr),
die Ausrichtung der Buttons.
Schau, was dir wichtig ist und welches Design zu dir und deiner Marke passt!
Aber mach es nicht zu wild, die Leute möchten es noch ausfüllen können 😉
So erstellst du “kompliziertere” Formulare
Ganz oft bekomme ich auch die Frage gestellt: “Victoria, wie stelle ich es ein, dass nur bestimmte Leute das Formular sehen und ausfüllen können?”
Wenn du möchtest, dass eine Qualifikation vorliegt, also nur für Website-Besucher das Formular sichtbar ist, die beispielsweise vorher sieben Fragen mit “Ja” beantwortet haben, musst du ein externes Tool nutzen.
Stand heute kann Squarespace dies noch nicht.
Das ist aber kein Problem!
Mit externen Tools wie Typeform kannst du eine Qualifikationsprüfung und andere Abfragen ohne großen Aufwand einbauen.
Optimiere deine Formulare für die mobile Anwendung
Das ist ganz wichtig!
Bevor du dein Formular veröffentlichst und somit als sichtbar für deine Website-Besucher stellst, solltest du dir anschauen, wie dein Formular auf mobilen Endgeräten ausschaut.
Wenn du bei der mobilen Ansicht siehst, dass ein blaues Pünktchen auftaucht, heißt dies, dass dein Formular nicht mobil-optimiert ist.
Schaue, dass die Abstände stimmen und das Formular gut sichtbar ist!
Meine Empfehlungen für deine Formulare!
Stelle deine Website-Sprache auf Deutsch ein
Du hast eine deutschsprachige Website?
Dann solltest du deine Website-Sprache ganz klar auf Deutsch einstellen.
Squarespace ist nämlich automatisch auf Englisch eingestellt. Das heißt, dass alle Anmerkungen - auch bei den Formularen - auf Englisch sind. Wie beispielsweise das Wort “required”.
Und so stellst du deine Website-Sprache auf Deutsch ein:
Gehe auf Einstellungen
Dann auf Website
Wähle Website-Sprache aus
Und wähle “Deutsch aus
Und das war’s auch schon. Ganz einfach!
Lege alternative Kontaktmöglichkeiten an
Du hast eine Kontaktseite mit einem Formular angelegt? Super!
Was aber noch besser ist: Wenn du zusätzlich weitere Kontaktmöglichkeiten - wie eine E-Mail-Adresse oder Telefonnummer - angibst.
Denn es gibt Leute - und dazu gehöre ich auch - die Kontaktformulare hassen (!). Wenn ich stattdessen eine E-Mail schreiben darf, dann mache ich das viel lieber.
Das Problem ist nämlich, wenn jemand Kontaktformulare nicht mag, dass er entweder
geht und deine Website verlässt oder
die E-Mail-Adresse im Impressum nutzt.
Deswegen ist nur ein Formular als Kontaktmöglichkeit relativ schwach. Scheu dich also nicht davor, Alternativen anzubieten 😉
👉 Ständig frische Tipps für dein Webdesign-Business? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Wann sollte ich eine Lightbox verwenden?
Viele mögen eine Lightbox eher, anstatt ein direkt sichtbares Formular einzubetten.
Ich würde allerdings sagen, dass wenn deine Website-Besucher direkt sehen sollen, dass sie etwas eintragen können, dann hilft es, wenn das Formular sichtbar ist.
Wenn das Formular aber nicht in den Vordergrund rücken soll und deine Website-Besucher nicht zwingend sofort sehen müssen, dass es sich um ein Formular handelt, ist die Lightbox-Funktion die deutlich bessere Wahl.
Ich wünsche dir viel Spaß beim Erstellen deines ersten Formulars!
Hast du noch Fragen? Dann schreib uns in die Kommentare.
Diese Artikel könnten dich auch interessieren:
Eigene Email-Adresse bei und mit Squarespace-Websites: Was tun?
Begrenzungen, Blogposts, Speicherplatz: So groß kann deine Squarespace-Website werden!
So richtest du Google Analytics 4 für deine Squarespace-Website ein (easy, ohne zu verzweifeln!)
Google Fonts & Adobe Fonts bei Squarespace: Was mache ich mit der DSGVO?
Squarespace vs. Shopify: Was passt besser zu deinem Online-Shop?
So baust du einen Countdown-Zähler (Timer) bei deiner Squarespace-Website ein
