Stili personalizzati

Elementi del modulo Hubspot in Webflow

Questa pagina rappresenta la struttura HTML di alcuni elementi dei moduli di HubSpot; utilizzate la potenza del designer Webflow per definire gli stili CSS per un modulo HubSpot grezzo.

Alcuni elementi del modulo
hs-form
modulo-colonne-1
modulo-colonne-2
hs-form è la classe principale del modulo.
form-columns-1 è una classe di wrapper con 1 colonna per gli input.
form-columns-2 è una classe di wrapper con 2 colonne per gli input.
ingresso ed etichetta
hs-input
Descrizione del campo / Testo di aiuto
hs-campo-desc
Questo è il testo di aiuto per il campo
Messaggio di errore del campo
hs-error-msgs elenco degli ingressi
hs-error-msg
  • Etichetta del messaggio di errore
hs-error-msgs inputs-list è un elemento HTML di tipo lista.
hs-error-msg è uno spazio di testo all'interno dell'elemento HTML List Item.
Area di testo Ingresso
hs-input hs-type-textarea
hs-type-textarea è aggiunto come classe combo.
Caselle di controllo
hs-form-booleancheckbox
hs-form-booleancheckbox-display
elenco degli ingressi
hs-input
Nota: HubSpot utilizza caselle di controllo HTML di base; le caselle di controllo di Webflow funzionano in modo diverso rispetto a quelle HTML predefinite, pertanto per stilizzare le caselle di controllo di HubSpot è necessario un CSS personalizzato.
è possibile utilizzare la casella di controllo di Webflow per creare lo stile e poi copiare i CSS da essa.
Pulsanti radio
elenco degli ingressi
hs-form-radio
hs-form-radio-display
elenco degli ingressi
hs-input
Messaggio di successo
messaggio inviato
RecaptCHA
hs-recaptcha
Pulsante di invio
hs_submit
pulsante hs
Oops! Qualcosa è andato storto durante l'invio del modulo.

Confermiamo il numero di telefono

In qualità di istituto finanziario regolamentato, siamo obbligati ad assicurarci di sapere con chi stiamo lavorando. Questo è l'ultimo passo prima di darvi il benvenuto nel nostro Sandbox!

Conferma il mio numero
Oops! Qualcosa è andato storto durante l'invio del modulo.

Esempio dal vivo

Modulo Webflow

Grazie! Il vostro invio è stato ricevuto!
Oops! Qualcosa è andato storto durante l'invio del modulo.

Modulo HubSpot

Inserisci il tuo codice HubSpot all'interno dell'embed :)

Successo!

Grazie! Abbiamo ricevuto la vostra richiesta.