Inhalt
- Video: Das Formular
- Einführung
- Formular automatisch ausfüllen
- Die Formulareinstellungen
- Formular auf deiner Webseite einbinden
Video: Das Formular
Einführung
Nutze in der Kampagne das Ereigniselement "Formular".
Dieses Formular ist die Verbindung zwischen deiner Website und Quentn (sofern du keine Quentn-Landingpage nutzt).
Du kannst es selbst gestalten und anschließend komfortabel auf deiner Webseite einbinden, selbst wenn du mit Landingpagebuildern wie OptimizePress & Co. arbeitest.
Info: Responsives Design
Die Formulare sind im Responsiven Design angelegt und passen sich auch kleineren Displays, wie dem eines Smartphones, automatisch an.
Allgemein
- Öffne das Element mit einem Doppelklick. Es empfiehlt sich, im Vollbild-Modus zu arbeiten.
- Auf der linken Seite findest du alle deine Kontaktfelder: blau sind die Standard-Felder, orange deine selbst angelegten Kontaktfelder
- Ziehe per Drag & Drop die gewünschten Felder wie Vorname, Nachname und vor allem: E-Mail in das Formular. Ohne dieses Feld kannst du das Formular nicht speichern.
- Um Felder auch nebeneinander positionieren zu können, klicke auf Layout. Ziehe das Feld Spalten in das Formular. Es können nur 2 Felder nebeneinander stehen!
- Der Button für die Anmeldung ist immer unten.
Tipp: Wenige erforderliche Felder nutzen
Je weniger persönliche Daten du von einem potentiellen Kunden erfragst, desto größer ist die Chance, dass er dein Formular ausfüllt. Wenn ein Kontaktfeld unbedingt ausgefüllt werden muss (z. B. E-Mail), setze unter Feldeinstellungen ein Häkchen bei "erforderlich".
Achtung: Das Formular kann nur gespeichert werden, wenn entweder die E-Mail-Adresse oder die vollständige Adresse Pflichtfelder sind.
Optionen & Design
- Passe die Headline und dein Formular sowie die Felder an, indem du auf den entsprechenden Bereich klickst. Der markierte Bereich ist gelb hinterlegt.
- Auf der rechten Seite erscheinen dann 2 Reiter: Optionen und Design
- Unter Optionen kannst du alle Einstellungen vornehmen, die Texte und Inhalte betreffen.
- Unter Design stellst du Schriftart- und Größe, Farben, Schriftausrichtung, etc. ein.
|
|
|
Überschrift des Formulars
Klicke auf den Text "<Headline>". Auf der rechten Seite kannst du unter Optionen dann den Text eingeben.
Kontaktfelder
Klicke auf das entsprechende Kontaktfeld. Bestimme beispielsweise, ob die Bezeichnung deines Kontaktfeldes über dem Feld (trage den Text dann bei “Beschriftung” ein) oder in dem Feld stehen soll (trage den Text dann bei “Platzhalter” ein).
Wenn du möchtest, kannst du auch einen Hilfstext für die Interessenten eingeben.
Außerdem bestimmst du hier, ob das Kontaktfeld erforderlich sein soll.
Button
Um den Button anzupassen, klicke auf diesen. Auch hier kannst du unter Optionen den Text bestimmen, der auf dem Button stehen soll.
Unter Design bestimmst du das Aussehen des Buttons: Form und Farbe, ob er sich links, mittig oder rechts befinden soll, Größe, etc.
Vorschau
Unter “Vorschau” siehst du, wie deine Landingpage am PC und auch mobil aussieht. Klicke auf den Button um in die Vorschau zu gelangen oder sie wieder zu verlassen.
Design speichern
Du kannst dein Formular-Design speichern, indem du auf den Button klickst.
Bitte beachte: Es werden nur die Design-Einstellungen gespeichert, nicht jedoch die Kontaktfelder. Das bedeutet: Sobald du das Design lädst, werden Schriftart, -farbe und -größe, -stil etc. übernommen. Die Kontaktfelder musst du jedoch immer erneut im Formular anlegen.
Beim Speichern kannst du auswählen, ob ein Design überschrieben werden soll, oder ob du ein neues Design speichern möchtest. Klicke auf "Speichern".
Nun benenne dein Design, damit du es später unter "Design laden" wieder findest.
Mehrstufiges Formular
Gerade, wenn es um höherpreisige Angebote geht oder du mehr Daten deiner Interessenten benötigst, sie aber nicht gleich mit einem langen Formular mit vielen Kontaktfelder verschrecken möchtest, bietet sich ein mehrstufiges Formular an.
Zuerst gibt der Kontakt z. B. seine E-Mail-Adresse ein und klickt auf “Weiter”. Anschließend gibt er seine Adressdaten ein, usw.
Mit Quentn kannst du mehrere Seiten für dein Formular erstellen.
Klicke dafür “Seite hinzufügen” und konfiguriere die Seiten nach deinen Vorstellungen.
Du kannst maximal 5 Seiten anlegen!
Um Seiten wieder zu entfernen, klicke auf das rote Kreuz und bestätige, dass du die Seite wirklich löschen möchtest.
Formular automatisch ausfüllen
Sofern du bekannte Besucher - also Kontakte, die sich schon in deinem Quentn-System befinden und den Double Opt-In in der Vergangenheit vollzogen haben- via Kampagnen-Mail oder Newsletter auf dein Formular schickst, kannst du das Formular bereits automatisch ausfüllen, sodass der Kontakt ggf. nur Informationen ergänzen muss.
Um ein Formular vorauszufüllen, benötigst du zuerst den Link zu der Seite, auf der sich das Formular befindet. Diesen Link fügst du in deine Kampagnen-E-Mail ein.
Nun musst du den Link um die URL-Parameter erweitern:
Füge am Ende der URL ein Fragezeichen ein und bestimme, welche Felder welche Informationen beinhalten sollen. Nimm dir dafür die Platzhalter zur Hilfe, um die exakten Bezeichnungen zu übernehmen. Um mehrere Felder zu bestimmen, setze ein “&” zwischen die Parameter. Nutze keine Leerzeichen!
Beispielsweise fragen wir in unserem Formular den Vornamen, Nachnamen und die E-Mail ab. Diese Daten sollen auch in Quentn angelegt werden. Die URL zum Formular mit den voreingestellten Daten sieht dann also so aus:
https://meinetestseite.de/?first_name={{contact.first_name}}&family_name={{contact.family_name}}&mail={{contact.mail}}
Wenn man den Link verschickt, wird das Formular bei bekannten Besuchern mit den vorhandenen Daten vorausgefüllt.
Vorausgefüllte Kontaktfelder verstecken
Wenn das Formular vorausgefüllt werden soll, kannst du unter dem Reiter “Optionen” bestimmen, ob das ausgefüllte Feld für den Interessenten sichtbar sein soll, oder nicht.
Das heißt: Die bekannten Daten werden in das Feld geschrieben, es wird dem User aber nicht angezeigt und nur die offenen Felder sind zu sehen.
Manchmal sind die Datensätze aber nicht immer gleich vollständig, beispielsweise möchtest du Vor- und Nachname vorausfüllen, bei einem Kontakt fehlt aber der Vorname. Dieser wird das Feld noch sehen (weil es ja leer ist) und kann so die fehlenden Daten noch nachreichen.
Beispiel: Affiliate-ID
Du kannst natürlich auch eine Affiliate-ID mit übergeben und bei dem Kontakt hinterlegen.
Außerdem solltest du noch folgende Einstellungen vornehmen:
- Ziehe das eigene Kontaktfeld in das Formular, in das die Affiliate-ID eingetragen werden soll
- Unter “Optionen” setzt du die Haken bei
- Vorausfüllen (hier kannst du den Namen des GET-Parameters auch umbenennen)
- Immer verstecken
Damit nun auch alles funktioniert, muss die Affiliate-ID als GET-Parameter in der URL, die auf die Webseite mit dem Formular zeigt, vorhanden sein.
Das könnte dann so aussehen: https://meinetestseite.de/?first_name={{contact.first_name}}&family_name={{contact.family_name}}&mail={{contact.mail}}&aff_ID={{contact.aff_ID}}
Die Formulareinstellungen
Flood Protection
Wenn diese Funktion aktiviert ist, kann das Formular bis zu 20 Mal innerhalb von 60 Minuten von derselben IP-Adresse aus gesendet werden. Alle weiteren Versuche werden blockiert.
Ist die Option deaktiviert, kann das Formular von derselben IP-Adresse aus beliebig oft abgeschickt werden. Dies ist z. B. dann sinnvoll, wenn viele Teilnehmer einer Veranstaltung dieselbe Internetverbindung nutzen.
Wir empfehlen dringend, diese Funktion zu aktivieren, um Spam-Angriffe zu verhindern.
Weiterleitung (unbestätigte Kontakte)
Hier wird eingestellt, wohin der User geleitet wird, wenn er das Formular abgeschickt hat:
- auf eine Bestätigungsnachricht, die vom System generiert wird
- Hier musst du nur noch einen entsprechenden Text eintragen. Der vorgegebene Text ist nur optional.
- auf eine Web-Adresse, die du selbst entwirfst und online stellst.
- hier musst du dann die URL eingeben
Weiterleitung (bereits bestätigte Kontakte)
Hier kannst du bestimmen, wie du mit Usern verfährst, von denen du bereits die bestätigte E-Mail-Adresse besitzt (sie haben also bereits den Double Opt-In vollzogen).
Lässt du das Häkchen auf "Standard", wird den Kontakten die gleiche Bestätigungsnachricht oder Web-Adresse angezeigt, wie den Unbekannten. Das könnte mitunter zu Verwirrungen führen, da den Kontakten gesagt wird, dass sie gleich eine Bestätigungs-E-Mail erhalten werden. Da Kontakte aber den Double Opt-In nicht zweimal durchlaufen (können), wird die E-Mail nicht kommen.
Daher empfehlen wir, die Kontakte, die schon Daten hinterlegt haben, auf eine eigene URL leiten.
Formular auf deiner Webseite einbinden
Um dein erstelltes Formular auf deiner Webseite einzubinden, klicke in deinem Formular auf Einbettung.
Javascript (empfohlen)
Schritt für Schritt:
- Zuerst kopierst du dir das Header-Skript und fügst dieses auf deiner Webseite im Header-Bereich ein. Falls das nicht geht, kannst du dieses Skript auch als erste Zeile zusammen mit dem Code aus Schritt 2 eingeben.
- Solltest du das Formular mehrfach auf einer Seite einbinden wollen, achte darauf, dass das Script nur ein einziges Mal verwendet wird.
- Anschließend kopierst du dir den Code aus Schritt 2 des Formulars und gibst diesen auf deiner Webseite an der Stelle ein, an der das Formular erscheinen soll.
Raw HTML
Erstelle zuerst den Code, indem du auf den grünen Button "Generiere HTML" klickst. Kopiere dir dann den Code und füge ihn auf deiner Webseite an der entsprechenden Stelle ein.
Die unterschiedlichen Embed-Codes
Javascript:
Bei dieser empfohlenen Variante wird das Formular in einem iframe angezeigt. Sämtliche Style-Informationen werden aus dem Form-Builder übernommen, sodass dein Formular genau so aussieht, wie du es zuvor gestaltet hast. Solltest du dein Formular noch einmal bearbeiten, musst du den Code nicht noch einmal kopieren und auf der Webseite einbinden.
Raw HTML:
Diese Variante ist für gewisse Drittanbieter gedacht, z. B. Leadpages oder OptimizePress. Sämtliche Style-Informationen aus dem Form-Builder werden hier nicht übernommen. Die hier enthaltenen Informationen dienen ausschließlich dazu, die Formulareingaben an die richtige Adresse, also deine Quentn-Kampagnen, zu senden.