[Beta]{class="badge informative" title="Questa funzione è attualmente in versione beta limitata"}
Progettazione del modulo
Dopo aver creato un modulo, lo spazio di progettazione visiva apre una bozza con una definizione di modulo di base predefinita. Nel pannello Riepilogo a destra, fai clic su Modifica modulo e utilizza lo spazio di progettazione visiva per definire lo stile del modulo e i componenti campo.
Campi
I campi modulo vengono utilizzati per acquisire i dati del profilo della persona che possono essere utilizzati per eseguire il targeting delle persone e associarle ad account e gruppi di acquisto. Tutti i nuovi moduli iniziano con i campi seguenti in un layout a colonna singola:
- Nome
- Cognome
- Indirizzo e-mail
Utilizza gli strumenti di progettazione dei campi per creare il set di campi e il layout necessari per raccogliere i dati necessari per le attività di marketing basate sull’account.
Aggiungi un campo add-field
-
Nel pannello Componenti a sinistra, trascina il componente di contenuto Campo e rilascialo nell'area di lavoro.
-
Fare clic su Seleziona attributo campo.
-
Nella finestra di dialogo Seleziona attributo campo, seleziona la casella di controllo per l'attributo profilo persona che desideri utilizzare per il campo e fai clic su Seleziona.
Gli schemi aziendali XDM determinano gli attributi disponibili. Sono inoltre disponibili eventuali campi personalizzati definiti per l’istanza di Journey Optimizer B2B edition. Utilizzare la casella di testo Cerca per filtrare l'elenco in base al nome oppure fare clic sull'icona Filtro per filtrare l'elenco in base allo schema o al tipo di dati.
Nell’area di lavoro, l’etichetta del campo predefinito per l’attributo selezionato viene compilata nell’area di lavoro. I Dettagli campo sono visualizzati nel pannello a destra.
-
Se necessario, modificare il testo Label.
Il testo viene visualizzato accanto al campo nel modulo. Il testo predefinito viene compilato dall’attributo del campo.
-
Imposta Tipo di campo in base al tipo di dati per il campo:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 Tipo di campo Utilizzo Esempio Casella di controllo Utilizza questo tipo in modo che i visitatori possano selezionare un valore true (selezionato) o false (non selezionato). Gruppo di caselle di controllo Utilizza questo tipo in modo che i visitatori possano selezionare un valore true (selezionato) o false (non selezionato) per più elementi. Valuta Utilizzare questo tipo per consentire un campo float che rappresenta il tipo di valuta predefinito selezionato per l'istanza di Journey Optimizer B2B edition. Data Utilizzare questo tipo per limitare l'immissione a un formato data e fornire un selettore calendario nel campo. Doppio E-mail Utilizzare questo tipo per limitare l'immissione a un formato di indirizzo e-mail. Numero Utilizzare questo tipo per limitare il campo a un valore numerico. Gruppo pulsanti di scelta Usa questo tipo per consentire ai visitatori di selezionare una delle opzioni disponibili. Seleziona Utilizza questo tipo per consentire ai visitatori di selezionare una delle opzioni disponibili in un elenco a discesa. Cursore Usa questo tipo per consentire ai visitatori di impostare un valore numerico utilizzando un cursore. Telefono Utilizzare questo tipo per un campo di immissione numeri telefonici. Testo Utilizzare questo tipo per un campo di immissione testo standard (stringa). Area testo Utilizzare questo tipo per supportare l'immissione di testo più lunga. URL Utilizzare questo tipo per limitare l'immissione di testo a un URL, incluso il protocollo URL standard. -
A seconda del tipo di campo selezionato, impostare le altre opzioni per l'immissione e la convalida del campo:
-
Segnaposto: il valore segnaposto per il campo che fornisce al visitatore un esempio di ciò che è previsto per il campo.
-
Istruzioni - Testo istruttivo che aiuta il visitatore a completare il campo. Immetti il testo da visualizzare come testo al passaggio del mouse per il campo.
note tip TIP Istruzioni e testo segnaposto Utilizza queste due proprietà per guidare i visitatori nella compilazione del campo. Quando si passa il puntatore del mouse sul campo, il testo delle istruzioni viene visualizzato come testo di descrizione comando o testo a comparsa. Il testo segnaposto viene visualizzato inattivo all'interno del campo e scompare quando il visitatore immette il testo nel campo. È possibile utilizzare entrambi i metodi o solo uno. -
Valore predefinito - Utilizzare questa opzione per specificare un valore predefinito per il campo.
-
Messaggio di convalida - Utilizzare questa opzione per specificare un messaggio di convalida per il campo. Questo messaggio viene visualizzato se il visitatore immette un valore non valido per il campo. Il messaggio Standard è impostato per impostazione predefinita. Scegli Personalizzato e immetti il tuo messaggio.
-
Lunghezza massima - Immettere il numero massimo di caratteri che è possibile immettere nel campo.
-
-
Imposta Comportamenti campo in base alle esigenze:
-
Obbligatorio - Selezionare la casella di controllo per rendere obbligatorio l'input del campo per l'invio del modulo.
-
Abilita maschera di input - Selezionare la casella di controllo per limitare l'input del visitatore utilizzando una maschera di input. Ad esempio, potrebbe essere utile che i visitatori immettano i numeri di telefono in un formato specifico. Nella finestra di dialogo, immetti la maschera utilizzando
9per qualsiasi numero,aper qualsiasi lettera e*per entrambe. Fare clic su Salva per attivare la maschera di input specificata.
-
Modificare lo stile dei campi field-styling
Seleziona la scheda Stili nel pannello di destra per modificare lo stile del campo selezionato.
-
Sfondo - Selezionare la casella di controllo per applicare un colore di sfondo al campo. Il bianco è il colore predefinito. Fare clic sul quadrato Colore di sfondo per aprire il selettore colore popup e scegliere un colore per lo sfondo del campo.
-
Etichetta - Lo stile dell'etichetta controlla le caratteristiche visive del testo visualizzato accanto al campo. Scegli una visualizzazione dell’etichetta superiore o laterale relativa al campo. È possibile impostare la dimensione del carattere, l'altezza della linea, lo stile e l'allineamento del testo. Fare clic sul quadrato Colore carattere per aprire il selettore colore popup e scegliere un colore per il testo dell'etichetta.
-
Bordo - Fare clic sul quadrato Colore bordo per aprire il selettore colore popup e scegliere un colore per il bordo. È possibile definire un bordo per il campo, inclusi il colore e lo spessore della linea. Deselezionare la casella di controllo per rimuovere il bordo del campo visualizzato. È inoltre possibile modificare le impostazioni relative alla dimensione del bordo (larghezza in pixel), allo stile e al raggio degli angoli.
-
Dimensione - Selezionare un'impostazione di dimensione per determinare la larghezza di visualizzazione del campo. Scegliere Larghezza intera, Larghezza dimezzata o Automatica.
-
Margine - Imposta i margini (in pixel) intorno al campo. È possibile impostare lo stesso margine su tutti e quattro i lati oppure selezionare la casella di controllo Margine diverso per ciascun lato per impostare separatamente i margini orizzontale e verticale.
-
Spaziatura interna - Imposta spaziatura interna (in pixel) intorno al campo. È possibile impostare lo stesso margine su tutti e quattro i lati oppure selezionare la casella di controllo Spaziatura interna diversa per ciascun lato per impostare i margini orizzontale e verticale separatamente.
Riordina campi field-reorder
Puoi spostare i campi modulo direttamente nell’area di lavoro visiva. Fai clic sullo strumento Sposta sul bordo destro del campo selezionato e trascinalo in una nuova posizione.
Aggiungi componenti strutturali al modulo e sposta i campi in colonne per raggrupparli e modificare il layout. Fai clic sullo strumento Sposta sul bordo sinistro del componente colonna selezionato e trascinalo in una nuova posizione all'interno del modulo.
Eliminare o duplicare un campo field-delete-duplicate
Fai clic sull'icona Elimina (
Fai clic sull'icona Duplica (
Pulsante Invia
Per impostazione predefinita, il pulsante Invia (campo piè di pagina) fa parte del modulo e non può essere rimosso. Selezionate il componente pulsante/piè di pagina nel modulo per modificare il testo e lo stile del pulsante.
Modificare il contenuto del pulsante button-content
Nella scheda Contenuto visualizzata nel pannello di destra, modifica il testo nel campo Testo pulsante. Il ridimensionamento del pulsante viene regolato in base alla lunghezza del testo.
Personalizzare lo stile del pulsante Invia button-styles
Seleziona la scheda Stili nel pannello di destra per modificare lo stile del componente pulsante/piè di pagina selezionato.
-
Sfondo - Selezionare la casella di controllo per applicare un colore di sfondo al pulsante. Blu è il colore predefinito. Fare clic sul quadrato Colore di sfondo per aprire il selettore colore popup e scegliere un colore per lo sfondo del pulsante.
-
Etichetta - Lo stile dell'etichetta controlla le caratteristiche visive del testo all'interno del pulsante. È possibile impostare la dimensione del carattere, l'altezza della linea, lo stile e l'allineamento del testo. Fare clic sul quadrato Colore carattere per aprire il selettore colore popup e scegliere un colore per il testo dell'etichetta.
-
Bordo - Fare clic sul quadrato Colore bordo per aprire il selettore colore popup e scegliere un colore per il bordo. È possibile definire un bordo per il pulsante, inclusi il colore e lo spessore della linea. Deselezionare la casella di controllo per rimuovere il bordo del pulsante visualizzato. È inoltre possibile modificare le dimensioni del bordo (larghezza in pixel), lo stile e l'impostazione del raggio per gli angoli arrotondati.
-
Dimensioni - Selezionare un'impostazione di dimensione per determinare la larghezza di visualizzazione del pulsante. Scegliere Larghezza intera, Larghezza dimezzata o Automatica. La spaziatura viene regolata in base alle impostazioni di dimensione e allineamento.
-
Allineamento pulsante - Quando si sceglie una dimensione di Metà larghezza o Automatico per il pulsante, impostare l'allineamento a sinistra, a destra o al centro. La spaziatura viene regolata in base alle impostazioni di dimensione e allineamento.
-
Margine - Imposta i margini (in pixel) intorno al campo. È possibile impostare lo stesso margine su tutti e quattro i lati oppure selezionare la casella di controllo Margine diverso per ciascun lato per impostare separatamente i margini orizzontale e verticale.
-
Spaziatura interna - Imposta spaziatura interna (in pixel) intorno al campo. È possibile impostare lo stesso margine su tutti e quattro i lati oppure selezionare la casella di controllo Spaziatura interna diversa per ciascun lato per impostare i margini orizzontale e verticale separatamente. La spaziatura viene regolata se si modificano le impostazioni di dimensione e allineamento.
Stile modulo form-styling
È possibile modificare gli stili dell'area del modulo quando si fa clic all'esterno dei componenti strutturali o del modulo. I componenti del modulo (campi e pulsante) ereditano gli stili Corpo definiti negli stili di livello superiore, a meno che non siano definiti altri stili a livello di campo o di pulsante/piè di pagina.
Stili CSS
Nei nuovi moduli viene utilizzato il CSS predefinito per lo stile. Se desideri modificare gli stili modificando il CSS, puoi copiarlo e quindi utilizzarlo per definire un CSS personalizzato per il modulo.
Per definire un CSS personalizzato per il modulo :
-
Fai clic su Visualizza CSS nel pannello di destra per rivedere il codice CSS.
-
Seleziona il codice CSS nella finestra di scorrimento e copialo negli Appunti.
-
Fai clic su Chiudi.
-
(Facoltativo) Incolla il codice copiato nello strumento CSS preferito e modifica il CSS in base allo stile desiderato.
-
Fai clic su Aggiungi CSS personalizzato nel pannello di destra.
-
Incolla il codice CSS nella finestra.
Potete modificare il testo incollato in questa finestra.
-
Fai clic su Salva.
Stile manuale
Modificate le impostazioni nel pannello di destra per definire la visualizzazione per l'intero modulo.
-
Colore di sfondo - Selezionare la casella di controllo per applicare un colore di sfondo attorno all'area del modulo. Il bianco è il colore predefinito. Fare clic sul quadrato del colore per aprire il selettore colore popup e scegliere un colore per lo sfondo del modulo.
-
Sfondo del riquadro di visualizzazione - Selezionare la casella di controllo per applicare un colore di sfondo a tutti i componenti del modulo. L'impostazione predefinita è nessun colore (eredita dallo sfondo esterno). Fate clic sul quadrato del colore per aprire il selettore colore popup e scegliete un colore per i componenti strutturali del modulo.
-
Testo - Scegliere una Famiglia di caratteri per il modulo, che influisce sulle etichette, sui suggerimenti e sul testo segnaposto per i campi modulo. Influisce anche sul testo predefinito del pulsante Invia.
-
Dimensioni - Modifica le dimensioni (larghezza) del modulo in pixel.
-
Margine - Imposta i margini (in pixel) intorno ai componenti del modulo. È possibile impostare lo stesso margine su tutti e quattro i lati oppure selezionare la casella di controllo Margine diverso per ciascun lato per impostare separatamente i margini orizzontale e verticale.
