Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen
SOLVEHallo Community,
ich habe ein Formular in Arbeit, in dem einige Ticketeingenschaften sind, z.B. ein mehrzeiliger Text. Diese Eigenschaft kann ich nicht mehr löschen.. der Lösch Button fehlt - was ist hier der Grund??
Weiterhin möchte ich mehrere Felder abfragen, z.B.
Mustername 1, Musterfarbe 1, Kundenname 1 und Datei Upload Logo 1.
Und dies auch für Mustername 2,3 etc.
Aktuell kann ich diese nur untereinander anordnen.. was das Formular ziemlich lang erscheinen lässt .. sieh hier:
Gibt es weitere Möglicheiten, dies UX freundlicher abzubilden als nur untereinander? Oder sind das die Grenzen der Starter Version?
Freue mich über eure Hilfe,
Viele Grüße
Angi
2 Accepted solutions
Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen
SOLVEHi @Angi,
danke für deine Frage!
Wegen der Ticket-Eigenschaften, die du nicht löschen kannst – sind das die Eigenschaften "Ticketname" und "Ticketbeschreibung"?
Diese Eigenschaften können leider nicht manuell gelöscht werden. Sie werden automatisch entfernt, wenn man den Schalter zum automatischen Erstellen von Tickets deaktiviert:
Wenn man Ticket-Eigenschaften im Formular verwendet, wird bei jeder Formulareinsendung ein neues Ticket erstellt (hier geht's zum Wissensdatenbankartikel, wo das genauer erklärt wird).
Alle anderen Ticket-Eigenschaften sollte man problemlos bearbeiten und löschen können.
Zu deiner zweiten Frage über das UX-freundlichere Abbilden von langen Formularen:
Hi @mii, @Anton, @FabianRichter, habt ihr vielleicht Tipps für @Angi? Sie nutzt die Starter-Version von HubSpot. Danke!
Beste Grüße
Mia, Community Team
 | Wusstest du, dass es auch eine DACH-Community gibt? Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst Did you know that the Community is available in other languages? Join regional conversations by changing your language settings |
Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen
SOLVEHi @Angi,
wenn es sich um ein "normales" Formular handelt, kann man es natürlich nach belieben stylen.
Sind die Felder zufälligerweise mit "conditional-logic" verbunden?
Falls ja, dann kann man sie wirklich nur untereinander anordnen (zumindest in HubSpot). Dies hat leider nichts mit Starter sondern mit HubSpot zu tun. Man kann dies aber mittels CSS und/oder JavaScript anpassen. Da dies allerdings immer speziell pro Formular entwickelt werden muss, sind folgende Tipps nur als eine Art "Tutorial" zu betrachten:
- jedes Formular Feld hat eine eigene, sogenannte CSS Klasse. Diese kann man mittels CSS und JavaScript ansprechen und sie umstylen. Bei den beiden Feldern aus dem Screenshot waren meine Klassen ".hs_TICKET.hs_file_upload" und ".hs_TICKET.subject". Desweiteren haben beide Elemente die Klasse ".hs-form-field"(wie jedes Formular-Feld).
Schreibt man in eine CSS Datei nun bspw
form .hs-dependent-field .hs-form-field div[class^="hs_TICKET"]{
max-width:50%;
display:inline-block;
}
form .hs-dependent-field .hs-form-field .div[class^="hs_TICKET"]:not(:last-of-type){
margin-right:2rem;
}Spricht man alle Input-Felder, die in der Conditional-Logic enthalten sind und eine Klasse, die mit "hs_TICKET" anfängt an und gibt ihnen eine max-breite von 50% (somit sollten sie nebeneinander erscheinen).
Hier ein Screenshot des Quellcodes des oben erstellten Formulars
- Mittels JavaScript (oder jQuery) lassen sich auch alle Felder erneut gruppieren, was das coding vereinfachen kann. Allerdings ist es hier sehr schwierig von Außen etwas zu sagen.
Bezüglich UX:
Ich empfehle die Formulare so kurz wie möglich zu halten. Niemand möchte von einer Wand aus Formularfeldern erdrückt werden. Da ist die Absprungrate, erfahrungsgemäß, sehr hoch.
Etwas, was auch sehr gut für UX sein kann ist ein Mitgliederbereich. Jedoch sind die echten Membership-areas nur in Enterprise enthalten. Dies bedeutet aber nicht, dass man sie nicht über ein paar Umwege auch in der Starter erstellen kann.
Dazu braucht man nur eine Liste(ob dynamisch oder statisch ist dir überlassen) in die die Personen, die das Formular ausfüllen, hinzugefügt werden sollen. Dies kann man mittels simplen Workflow auch in Starter einstellen.
Anschließend erstellt man eine seperate Seite, bei der man in den Seiteneinstellungen den Zugang auf "Privat - registration required" und die entsprechende Liste auswählt.
Somit haben alle Personen aus der Liste Zugriff auf diese Seite. Diese Seite sollte dann unteranderem ein weiteres Formular enthalten, welches mit den Ticket Eigenschaften befüllt ist. Da du hier mit Smart-rules und Personalization Tokens arbeiten kannst, kannst du den Personen einen persönliches "Ticket" Center bauen. Kann viel Aufwand sein, sich aber UX technisch rentieren.
Du kannst die Seite bspw. als Thank-you-Weiterleitungsziel einstellen oder in einer E-Mail als Button hinterlegen.
Weitere Tipps für UX:
- Wenn du Checkboxen oder Radio-Button Funktionen verwenden möchtest, die mehr als 4 Auswahlmöglichkeiten haben, erstelle stattdessen lieber eine Dropdown property. Ist eine Faustregel der UX.
- Separiere dein Formular mit Trennern und/oder Überschriften. Du kannst hierfür die Paragraph(Rich-Text) Option nutzen.
Hoffe das hilft,
Viele Grüße
Anton
Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen
SOLVEFormulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen
SOLVEHi @Angi,
wenn es sich um ein "normales" Formular handelt, kann man es natürlich nach belieben stylen.
Sind die Felder zufälligerweise mit "conditional-logic" verbunden?
Falls ja, dann kann man sie wirklich nur untereinander anordnen (zumindest in HubSpot). Dies hat leider nichts mit Starter sondern mit HubSpot zu tun. Man kann dies aber mittels CSS und/oder JavaScript anpassen. Da dies allerdings immer speziell pro Formular entwickelt werden muss, sind folgende Tipps nur als eine Art "Tutorial" zu betrachten:
- jedes Formular Feld hat eine eigene, sogenannte CSS Klasse. Diese kann man mittels CSS und JavaScript ansprechen und sie umstylen. Bei den beiden Feldern aus dem Screenshot waren meine Klassen ".hs_TICKET.hs_file_upload" und ".hs_TICKET.subject". Desweiteren haben beide Elemente die Klasse ".hs-form-field"(wie jedes Formular-Feld).
Schreibt man in eine CSS Datei nun bspw
form .hs-dependent-field .hs-form-field div[class^="hs_TICKET"]{
max-width:50%;
display:inline-block;
}
form .hs-dependent-field .hs-form-field .div[class^="hs_TICKET"]:not(:last-of-type){
margin-right:2rem;
}Spricht man alle Input-Felder, die in der Conditional-Logic enthalten sind und eine Klasse, die mit "hs_TICKET" anfängt an und gibt ihnen eine max-breite von 50% (somit sollten sie nebeneinander erscheinen).
Hier ein Screenshot des Quellcodes des oben erstellten Formulars
- Mittels JavaScript (oder jQuery) lassen sich auch alle Felder erneut gruppieren, was das coding vereinfachen kann. Allerdings ist es hier sehr schwierig von Außen etwas zu sagen.
Bezüglich UX:
Ich empfehle die Formulare so kurz wie möglich zu halten. Niemand möchte von einer Wand aus Formularfeldern erdrückt werden. Da ist die Absprungrate, erfahrungsgemäß, sehr hoch.
Etwas, was auch sehr gut für UX sein kann ist ein Mitgliederbereich. Jedoch sind die echten Membership-areas nur in Enterprise enthalten. Dies bedeutet aber nicht, dass man sie nicht über ein paar Umwege auch in der Starter erstellen kann.
Dazu braucht man nur eine Liste(ob dynamisch oder statisch ist dir überlassen) in die die Personen, die das Formular ausfüllen, hinzugefügt werden sollen. Dies kann man mittels simplen Workflow auch in Starter einstellen.
Anschließend erstellt man eine seperate Seite, bei der man in den Seiteneinstellungen den Zugang auf "Privat - registration required" und die entsprechende Liste auswählt.
Somit haben alle Personen aus der Liste Zugriff auf diese Seite. Diese Seite sollte dann unteranderem ein weiteres Formular enthalten, welches mit den Ticket Eigenschaften befüllt ist. Da du hier mit Smart-rules und Personalization Tokens arbeiten kannst, kannst du den Personen einen persönliches "Ticket" Center bauen. Kann viel Aufwand sein, sich aber UX technisch rentieren.
Du kannst die Seite bspw. als Thank-you-Weiterleitungsziel einstellen oder in einer E-Mail als Button hinterlegen.
Weitere Tipps für UX:
- Wenn du Checkboxen oder Radio-Button Funktionen verwenden möchtest, die mehr als 4 Auswahlmöglichkeiten haben, erstelle stattdessen lieber eine Dropdown property. Ist eine Faustregel der UX.
- Separiere dein Formular mit Trennern und/oder Überschriften. Du kannst hierfür die Paragraph(Rich-Text) Option nutzen.
Hoffe das hilft,
Viele Grüße
Anton
Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen
SOLVEHi @Angi,
danke für deine Frage!
Wegen der Ticket-Eigenschaften, die du nicht löschen kannst – sind das die Eigenschaften "Ticketname" und "Ticketbeschreibung"?
Diese Eigenschaften können leider nicht manuell gelöscht werden. Sie werden automatisch entfernt, wenn man den Schalter zum automatischen Erstellen von Tickets deaktiviert:
Wenn man Ticket-Eigenschaften im Formular verwendet, wird bei jeder Formulareinsendung ein neues Ticket erstellt (hier geht's zum Wissensdatenbankartikel, wo das genauer erklärt wird).
Alle anderen Ticket-Eigenschaften sollte man problemlos bearbeiten und löschen können.
Zu deiner zweiten Frage über das UX-freundlichere Abbilden von langen Formularen:
Hi @mii, @Anton, @FabianRichter, habt ihr vielleicht Tipps für @Angi? Sie nutzt die Starter-Version von HubSpot. Danke!
Beste Grüße
Mia, Community Team
| Wusstest du, dass es auch eine DACH-Community gibt? Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst Did you know that the Community is available in other languages? Join regional conversations by changing your language settings |
Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen
SOLVEFormulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen
SOLVESehr gerne Angi, lieben Dank für die akzeptierte Lösung 🙂
Ich wünsche dir ein schönes Wochenende!
| Wusstest du, dass es auch eine DACH-Community gibt? Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst Did you know that the Community is available in other languages? Join regional conversations by changing your language settings |
