So gehen Formulare bei Squarespace-Websites

July 27, 2024 Victoria Weber & Team

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.

Letztes Update: 27. Juli 2024

Wenn du eher Team “Video schauen” bist, dann klicke auf das folgende YouTube Video. Für Team “Lesen” scroll einfach weiter! 😉

Update zum Video: Seit Sommer 2024 kannst du nun endlich auch Dateien über Formulare einreichen lassen, woop woop!

See this content in the original post

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
E-Mail-Adresse
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.

Neu im Sommer 2024:

Dateien über Formulare schicken lassen

Ganz neu ist im Sommer 2024, dass du direkt über das Formular Dateien senden lassen kannst. Dazu musst du einfach den entsprechenden Punkt auswählen und die Datei kann von deinem Website-Besucher direkt IM Formular hochgeladen werden.

Das war früher nicht möglich, ist also ziemlich praktisch.

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.

Wir hatten es schon bei einigen Leuten als Problem, dass sie sich gewundert haben, warum sich niemand meldet - bis rauskam, dass auf der mobilen Seite die Buttons gar nicht klickbar waren.

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: