Marketing Hub | Fragen, Tipps & bewährte Methoden

Angi
Contributor

Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen

SOLVE

Hallo 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:

Angi_0-1708961520227.png

 

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

0 Upvotes
2 Accepted solutions
MiaSrebrnjak
Solution
Community Manager
Community Manager

Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen

SOLVE

Hi @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: 

 

Screenshot 2024-02-27 at 11.47.00.png

 

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

View solution in original post

Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen

SOLVE

Hi @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? 

Bildschirmfoto 2024-02-27 um 14.14.13.png

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 Bildschirmfoto 2024-02-27 um 14.30.21.png

- 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. Bildschirmfoto 2024-02-27 um 14.44.50.png

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. 
    Bildschirmfoto 2024-02-27 um 14.58.00.png

Hoffe das hilft,

 

Viele Grüße

Anton

Anton Bujanowski Signature

View solution in original post

0 Upvotes
5 Replies 5
Angi
Contributor

Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen

SOLVE

Hallo Anton, danke für die vielen Tipps. Hilft mir auf jeden Fall weiter!!!

Viele Grüße

Angi

Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen

SOLVE

Hi @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? 

Bildschirmfoto 2024-02-27 um 14.14.13.png

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 Bildschirmfoto 2024-02-27 um 14.30.21.png

- 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. Bildschirmfoto 2024-02-27 um 14.44.50.png

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. 
    Bildschirmfoto 2024-02-27 um 14.58.00.png

Hoffe das hilft,

 

Viele Grüße

Anton

Anton Bujanowski Signature
0 Upvotes
MiaSrebrnjak
Solution
Community Manager
Community Manager

Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen

SOLVE

Hi @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: 

 

Screenshot 2024-02-27 at 11.47.00.png

 

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

Angi
Contributor

Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen

SOLVE

Hallo Mia,

vielen Dank - du hast mir sehr geholfen.

Da ich bisher noch nicht viel mit Ticketeigenschaften gearbeitet habe, kannte ich diese De/Aktivierung noch gar nicht. 

Wieder was gelernt! Mega 😀

 

Viele Grüße

Angela

MiaSrebrnjak
Community Manager
Community Manager

Formulare mit Ticketeigenschaften und Kontakteigenschaften und mit UX Aspekt erstellen

SOLVE

Sehr 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

0 Upvotes