Formulardesigner

was ist ein formulardesigner? in 4leads dient der formulardesigner dazu, deine formulare individuell per drag & drop zu erstellen und anschließend mit einem design deiner wahl zu gestalten der formulardesigner kommt an verschiedenen stellen im system zum einsatz und wird deshalb in diesem separaten artikel behandelt felder hier wird das formular gebaut und definiert, welche felder es mit welchen einstellungen und in welcher reihenfolge besitzt um felder zum formular hinzuzufügen, öffne eines der aufklappmenüs auf der rechten seite und ziehe das gewünschte feld in das formular oder klicke auf das plus symbol, um es an letzter stelle hinzuzufügen themenbereiche gib deinem formular einen themenbereich, dem der nutzer zustimmen muss somit gibt er dir die einwilligung, weitere e mails zu diesem thema erhalten zu können stammsatz enthält alle felder, welche standardmäßig in 4leads vorhanden sind zusatzfelder hier findest du alle benutzerdefinierten felder, welche du in deinem 4leads account erstellen kannst formatierung um deine formularfelder optisch etwas abzugrenzen, gibt es einige elemente, die dazu beitragen, das formular etwas besser zu formatieren das stammsatzfeld e mail ist standardmäßig als pflichtfeld bereits gesetzt und kann nicht gelöscht werden alle weiteren felder sind optional formularfelder bearbeiten um ein feld zu bearbeiten, fahre mit der maus über das entsprechende feld und klicke auf den blinkenden editierbutton anschließend gelangst du zur feldkonfiguration label des feldes gib deinem feld eine beschriftung, um zu kennzeichnen, was verlangt wird platzhalter gib einen kurzen text ein, welcher in dem feld als platz steht, solange noch nichts eingetragen ist er kann als hinweise und zur unterstützung dienen pflichtfeld bestätige die checkbox, wenn du das feld als verpflichtend einstellen möchtest erweiterte einstellungen je nach zusatzfeld gibt es verschiedene zusätzliche einstellungsmöglichkeiten speichere dein formular ab, um es im nächsten tab layout aktualisiert zu sehen layout im tab layout kannst du alle einstellungen zum design deines formulars treffen auf der rechten seite siehst du direkt, wie sich deine änderungen auf das formular auswirken auf der linken seite hast du verschiedene aufklappmenüs, über welche die anpassungen eingestellt werden können vorlagen im ersten aufklappmenü findest du bereits einige fertige layouts, welche du per klick auf den link laden der jeweiligen vorlage, laden kannst es erfolgt ein popup, welches dich darauf hinweist, dass das layout nun angewendet wird, jedoch alle bis dato ungespeicherten einstellungen überschrieben werden farben das tab farben ermöglicht dir eigenständig das design des formulars anzupassen du kannst hierbei aus der farbpalette eine farbe auswählen oder einen entsprechenden hexa code eingeben hintergrund die hintergrundfarbe des formulars hintergrund (verlauf) eine zweite hintergrundfarbe, welche zusammen mit der ersten hintergrundfarbe einen farbübergang ermöglicht deckkraft hintergrund gib an, wie transparent die farbe des formularhintergrunds sein soll der wert 100 ist volle deckkraft der farbe, während 1 mehr oder weniger komplett transparent ist verlaufsübergang gibt an, wie der hintergrund verläuft der verlauf ist immer horizontal oben befindet sich die hintergrundfarbe, darunter die hintergrundfarbe (verlauf) ein niedriger wert auf der skala gibt dem hintergrund (verlauf) mehr priorität, welcher so mehr platz nach oben einnimmt, ein höherer wert lässt den hintergrund mehr platz nach unten einnehmen text (global) die farbe des textes im gesamten formular hinweistexte welche farbe sollen hinweistexte im formular haben eingabefeld rahmen definiere die farbe, welche ein formularfeld umrandet eingabefeld hintergrund die hintergrundfarbe eines eingabefelds focus highlight die farbe, welcher der rahmen des formularfelds annimmt, sobald du es fokussierst lässt du das feld leer, so wird kein highlight gesetzt focus highlight typ wähle hier zwischen drei highlight typen rahmen färbt lediglich den schmalen rand des formularfelds ein, außen erzeugt um das feld eine art farbigen schatten und innen führt zu einer art schatten in der innenseite des randes des formularfelds eingabefeld text wähle eine textfarbe, die gut auf dem hintergrund lesbar ist eingabefeld platzhalter steht in dem formularfeld ein platzhaltertext, so kannst du hier die farbe anpassen primärfarbe diese farbe erhalten einige hervorgehobene elemente deines formulars es kann deine corporate farbe sein ein beispiel hierfür ist das checkbox element icon bereich verfügt ein formularfeld über ein icon vorne oder hinten, so kannst du hier die hintergrundfarbe der icons bestimmten icon bereich text falls ein icon im formularfeld vorhanden ist, so kannst du hier die farbe festlegen allgemein im tab allgemein lassen sich anschließend noch einige grundlegende einstellungen zur darstellung der formularelemente und inhalte treffen größe skaliert die größe aller formularelemente abrundung rundet die ecken von formularfeldern ab mindestabstand gibt den innenabstand der formularbox zu den formularelementen an schriftart wähle eine schriftart deiner wahl aus dem drop down menü aus pflichtfelder markieren gebe an, wie genau pflichtfelder im formular kenntlich gemacht werden sollen wähle hierbei zwischen ausrufezeichen, stern, beidem oder gar keiner kenntlichmachung label textgewicht wie dick soll die schrift des labels, also der bezeichnung eines feldes, sein wähle zwischen bold (dick), semi bold (mittel dick) und regular (normal) feldrahmen stelle ein, ob ein feld komplett von einem rahmen umrundet sein soll, nur am unteren rand einen rahmen besitzt oder garkeinen rahmen button(s) im letzten aufklappmenü kannst du entscheidungen zu den buttons deines formulars treffen icon vorne / hinten klicke auf den pfeil nach unten um jeweils ein symbol auszuwählen, dass du im eingabefeld an anfang oder ende angezeigt haben möchtest textgröße gib an, wie groß der text im button ist, hierbei wächst der button je nach größe automatisch mit untertitel größe stelle die größe von untertiteln ein größe definiert, we groß der button ist, ein hoher wert bedeutet ein großer button rahmenbreite falls du deinem button einen rahmen geben möchtest, kannst du hier einen einstellen setzt du den wert 0, so erhält der button keinen wert textgewicht wie dick soll die schrift im button sein wähle zwischen bold (dick) und regular (normal) ausrichtung soll der text im button links, rechts, mittig oder als blockschrift gesetzt sein abrundung entscheide, ob die ecken des buttons etwas runder sein sollen oder nicht schriftart wähle eine schriftart deiner wahl aus dem drop down menü aus farbe in welcher farbe der button erscheinen soll textfarbe wähle die farbe des textes im button sollte gut lesbar sein auf dem hintergrund rahmenfarbe falls du dem button einen rahmen gegeben hast, stelle hier falls gewünscht einen farbton dafür ein animation gib deinem button eine animation klicke dich durch die verschiedenen animationen im drop down menü und schaue wie sie aussehen in der vorschau sobald du fertig bist, klicke auf speichern , um deine anpassungen im system festzuhalten und auf das formular anzuwenden texte im dritten tab texte findest du allgemeine einstellungen für das gesamte formular diese kannst du jedoch als optional betrachten und nur anwenden, falls du es wirklich benötigst zu jedem einzelnen feld in den einzelnen kategorien findest du die entsprechende erläuterung auch direkt in der software über dem feld meldungen hier kannst du einen seitentitel vergeben und texte für verschiedene ereignisevents im formular vergeben seitentitel der seitentitel ist sichtbar, falls das formulare als webseite aufgerufen wird ist kein titel angegeben wird der kampagnenname verwendet anmeldung nicht erfolgreich wird über dem absende button angezeigt, falls mindestens ein feld nicht korrekt ausgefüllt wurde als platzhalter für die anzahl an feldern, welche nicht korrekt sind, kann "\[num errors]" verwendet werden anmeldung erfolgreich wird über dem absende button angezeigt, fall die anmeldung erfolgreich war bei einer weiterleitung auf eine dankesseite, ist diese meldung nur sehr kurz sichtbar kampagne ist nicht aktiv wird angezeigt, falls der status der kampagne nicht aktiv ist pflichtfeld nicht ausgefüllt wird angezeigt, falls ein pflichtfeld beim absenden noch leer ist feld ungültig wird angezeigt, falls ein feld mit einem ungültigen wert ausgefüllt wird ungültige e mail adresse wird angezeigt, falls die e mail adresse kein gültiges format hat blockierte e mail adresse wird angezeigt, falls die e mail adresse in der account blacklist geführt wird oder eine wegwerfadresse erkannt wird tippfehler e mail adresse wird angezeigt, falls ein tippfehler umfragemodus lege einen weiter button fest, biete tastenkombinationen zur navigation innerhalb des formulars an und lasse fehler prüfen weiter button sobald ein feld einen gültigen wert enthält, wird der button unterhalb des feldes angezeigt bei einem klick wird das nächste feld aktiviert hinweis enter mit der enter taste gelangt der kontakt zum nächsten feld dies ist der hinweis für die tastenkombination der platzhalter \[keycode] wird durch die gültige taste ersetzt hinweis zum zeilenumbruch mit shift + enter können in textfeldern zeilenumbrüche erzeugt werden dies ist der hinweis für die tastenkombination der platzhalter \[keycode] wird durch die gültige taste ersetzt aufforderung fehler zu prüfen ist ein feld im formular fehlerhaft, kann der kontakt mit einem klick zum feld gelangen bei dem die probleme liegen der aufforderungstext dazu wird hier festgelegt buttons definiere, welcher text im absende button des formulars steht absende button lege den text für den absende button fest absende button untertitel lege fest ob der absende button in einer weiteren zeile einen kleineren untertitel haben soll