Crea il tuo modulo

Il builder è il luogo in cui decidi cosa chiede un modulo di candidatura. Aggiungi campi, li raggruppi in righe, dividi il modulo in pagine e configuri ogni campo. L’anteprima al centro mostra il modulo come lo vede chi acquista nel tuo negozio.

Nota

Per aprire il builder, vai su Forms in Sami B2B Onboarding e fai clic su Edit accanto a un modulo, oppure fai clic sul nome del modulo. Solo il personale con ruolo di amministratore può modificare i moduli.

Il builder in breve

Area	Dove	A cosa serve
Barra delle sezioni	Estrema sinistra	Passa tra Elements, Appearance, After submit, Email e Integrations. Collapse la riduce alle sole icone.
Pannello Elements	Sinistra	La struttura del modulo: Header in alto, Content, ogni pagina con i suoi campi e righe, Add page e Footer in fondo.
Anteprima	Centro	Il modulo come lo vede chi acquista. Fai clic su un campo, sul titolo di una pagina, sull’intestazione o sui pulsanti per selezionarli.
Pannello delle impostazioni	Destra	Si apre quando selezioni qualcosa e ne mostra le impostazioni. Fai clic su × (Close) per chiuderlo.
Barra degli strumenti	Sopra l’anteprima	La casella Form name, il badge Active o Draft, … (More actions), Language, i pulsanti di anteprima desktop e mobile, il pulsante dell’ispettore e Preview.

Il pannello Elements elenca ogni pagina, riga e campo nell’ordine in cui li incontra chi acquista.

Le altre sezioni della barra hanno pagine dedicate:

Sezione	Cosa imposti	Per saperne di più
Appearance	Layout, larghezza, font, stile dei campi e colori.	Personalizza il modulo
After submit	Il messaggio di ringraziamento, o una pagina in cui portare chi si candida.	Dopo l’invio da parte di chi si candida
Email	Chi viene informato di questo modulo e la versione di ogni email specifica per questo modulo.	Modifica i modelli di email e Scegli chi riceve le notifiche
Integrations	Dove vanno le risposte in Shopify, più Klaviyo, webhook, completamento automatico degli indirizzi e captcha.	Associa le risposte a Shopify

Aggiungi un campo

1. Apri l’elenco dei campi

   Usa il metodo che ti è più comodo:

   • Nel pannello Elements, fai clic su + (Add field) accanto al nome della pagina, oppure su Add field alla fine della pagina. All’interno di una riga, fai clic su Add element per aggiungere il campo a quella riga.
   • Nell’anteprima, fai clic su Add a field alla fine della pagina.
   • Nell’anteprima, passa il mouse sul bordo di un campo e fai clic sul + che compare. Il suggerimento dice Add field above, Add field below, Add field to the left o Add field to the right. Sinistra e destra affiancano il nuovo campo a questo in una riga.

2. Trova il campo

   Scorri l’elenco oppure digita in Search fields per restringerlo.

   

   I campi sono raggruppati per tipo e Add all su un blocco indirizzo aggiunge un indirizzo completo con un clic.

3. Aggiungilo

   Fai clic sul campo. Viene aggiunto alla pagina e selezionato, e le sue impostazioni si aprono a destra. Dagli un’etichetta e configuralo (vedi Impostazioni dei campi).

Attenzione

Ogni modulo mantiene un campo Email e un campo salvato come nome dell’azienda. Il campo Email non si può rimuovere né nascondere e Save viene rifiutato con Map a field to Company · Name. se nessun campo è salvato come nome dell’azienda.

Campi che puoi aggiungere

Gruppo	Campo	Cosa ottiene chi si candida
Basic fields	Short text	Una casella di testo a riga singola.
	Long text	Una casella di testo a più righe.
	Number	Una casella che accetta solo numeri.
	Email	Una casella che verifica che la risposta abbia l’aspetto di un indirizzo email.
	Phone	Una casella per il numero di telefono, con bandiera del paese, prefisso e verifica del numero facoltativi.
	Country	Un elenco di paesi.
	State / province	Un elenco degli stati o delle province del paese scelto nel campo Country che lo precede nella pagina. Compare quando la persona sceglie un paese che ha stati ed è una normale casella di testo se nessun campo Country lo precede.
	Dropdown	Un elenco per scegliere un’opzione, o più opzioni con Allow multiple choices.
	Checkbox	Una singola casella da spuntare, per esempio «Accetto i termini». Se è obbligatoria, la persona deve spuntarla.
	Checkboxes	Un elenco di opzioni di cui la persona può spuntare quante vuole.
	Radio buttons	Un elenco per scegliere un’opzione, con un’opzione Other facoltativa che la persona scrive.
	Date and time	Un selettore di data, un orario, o entrambi.
	File upload	Una casella di caricamento. Per impostazione predefinita accetta file PDF, JPG, JPEG e PNG fino a 10 MB.
Company fields	Company name	Una casella di testo salvata come nome dell’azienda.
	Tax ID	Una casella di testo per il codice fiscale o la partita IVA dell’azienda. I controlli del codice fiscale dell’app leggono questo campo.
	Website	Una casella di testo per il sito web dell’azienda.
Document fields	Business license, Tax certificate, Tax registration, Reseller certificate	Una casella di caricamento. Il file viene conservato con la candidatura come quel tipo di documento. Vedi Documenti.
Static text	Heading	Un titolo con una didascalia facoltativa sotto.
	Paragraph	Testo formattato, come le istruzioni.
	HTML	Il tuo markup HTML.
	Divider	Una linea orizzontale.
Address blocks	Shipping address	Dieci campi in una riga: Recipient / department, First name, Last name, Phone, Address line 1, Address line 2, City, Country, State / province e ZIP / postal code. Fai clic su Add all.
	Billing address	Una casella Same as shipping address, poi dieci campi di fatturazione (Department / attention, Billing first name e così via) in una riga nascosta finché la casella è spuntata. Fai clic su Add all.
Layout	Row	Una riga vuota in cui inserire i campi. Vedi Raggruppa i campi in righe.

Per aggiungere un singolo campo indirizzo invece di un intero blocco, fai clic su Show the individual address fields sotto Address blocks. I campi aggiunti da un blocco indirizzo non vengono salvati in Shopify finché non li associ. Vedi Associa le risposte a Shopify.

Impostazioni dei campi

Fai clic su un campo nell’anteprima o nel pannello Elements. Le sue impostazioni si aprono a destra, divise in sezioni. Vedi solo le sezioni che valgono per quel tipo di campo.

Sezione	Impostazioni
Content	Label, la domanda che legge chi si candida. Placeholder, il testo tenue dentro una casella vuota. Help text, mostrato sotto il campo. Default, una risposta compilata all’apertura del modulo (per un singolo Checkbox: Ticked by default).
Options	Per Dropdown, Checkboxes e Radio buttons. Fai clic su Add option o Change per modificare le opzioni: digita la Label di ogni opzione, trascina per riordinare, Add another option, oppure Bulk add per inserire un’opzione per riga. I Customer tags vengono aggiunti al cliente Shopify quando viene approvata la candidatura di chi ha scelto quell’opzione (fino a 40 caratteri ciascuno). Disattiva Use the label as the value per salvare qualcosa di diverso da ciò che legge la persona. Un Dropdown ha anche Allow multiple choices. I Radio buttons hanno anche Other option, Other label e Other placeholder.
Upload	Per File upload e i campi documento. Accepted: Only certain file types (poi elencali in File types) oppure Any file type. Max size: da 1 a 20 MB. Allow more than one file.
Phone number	Show country flag and dial code. Se è attivo: Check the number is valid e Default country (From the buyer’s browser a meno che tu non ne scelga uno).
Date and time	Asks for: Date, Time o Date and time. Date format, Time format, Other language per il selettore di data e Limit the range con Earliest e Latest.
Validation	Required. Se è attivo, Error message, mostrato quando il campo viene lasciato vuoto; digita {{ label }} per includere l’etichetta del campo. Limit characters con Min characters e Max characters, per Short text, Long text, Email, Phone e Tax ID. Lascia vuoto un limite per non averne.
Layout	Icon, disegnata all’inizio della casella (non per Checkbox, Checkboxes, Radio buttons o caricamenti). Hide label, con Keep the label’s space e Still show the required mark. Column width, da 1 a 12. Number of options per line, da 1 a 5, per Checkboxes e Radio buttons.
Visibility	Conditional display: mostra, nascondi, richiedi o disattiva il campo in base alle risposte precedenti. Vedi Mostra, richiedi o disattiva i campi con le regole.
Custom CSS	Custom CSS class, un nome di classe che puoi stilizzare con il CSS del tuo tema. Vengono mantenuti solo i nomi di classe semplici.

Per Dropdown, Country e State / province, il segnaposto è la prima riga dell’elenco, per impostazione predefinita Select…. Se lo svuoti, Select… ricompare.

Il testo statico ha meno impostazioni. Un Heading ha il testo in Label, più Caption e Heading tag (da Heading 1 a Heading 6). Un Paragraph ha Text e HTML ha Markup. La loro Label è solo il nome che vedi nel pannello Elements. Tutto il testo statico ha anche Column width, Visibility e Custom CSS.

Le impostazioni di un campo sono raggruppate in sezioni, da ciò che legge la persona a quando il campo compare.

Disponi i campi

Sposta un campo

• Nel pannello Elements: trascina un campo dalla sua maniglia. Rilascialo su un altro campo per collocarlo sopra o sotto, sul nome di una pagina per spostarlo alla fine di quella pagina, o sul nome di una riga per inserirlo in quella riga.
• Nell’anteprima: fai clic su un campo, poi trascinalo dalla maniglia a sinistra della sua barra degli strumenti (Drag to move this field). Rilascialo sul bordo superiore o inferiore di un altro campo per collocarlo sopra o sotto. Rilascialo sul bordo sinistro o destro per affiancare i due in una riga.

Imposta la larghezza delle colonne

Le larghezze si contano su 12 colonne e ogni nuovo campo parte da 12, la larghezza piena. I campi consecutivi condividono una riga quando le loro larghezze lo permettono, quindi due campi da 6 stanno affiancati e tre da 4 formano tre colonne.

• Trascina Layout › Column width nelle impostazioni del campo, oppure
• Fai clic su Change width nella barra degli strumenti del campo selezionato nell’anteprima. Scorre tra un terzo, metà e la larghezza piena.

Quando il modulo è più stretto di 480 pixel, per esempio su un telefono, ogni campo occupa l’intera riga.

Raggruppa i campi in righe

Una riga tiene insieme i campi e può aprirli con un’intestazione: un’etichetta e una descrizione sopra i campi. Puoi mostrare, nascondere o spostare un’intera riga in una volta.

Per creare una riga, fai una di queste operazioni:

• Apri l’elenco dei campi e fai clic su Row sotto Layout. Nel pannello Elements compare una riga vuota. Fai clic su Add element al suo interno per aggiungere campi.
• Apri l’elenco dei campi e fai clic su Select fields (compare quando la pagina ha due o più campi fuori dalle righe). Spunta i campi nel pannello Elements, poi fai clic su Group into row.
• Aggiungi un campo a sinistra o a destra di un altro, oppure rilasciane uno accanto a un altro nell’anteprima.

Fai clic sul nome della riga nel pannello Elements per aprirne le impostazioni:

Impostazione	Cosa fa
Label	Il titolo della riga. Chi si candida lo vede sopra i campi della riga.
Hide the heading block	Nasconde etichetta e descrizione a chi si candida. Vengono conservate e tornano quando lo disattivi.
Description	Testo mostrato sotto l’etichetta.
Icon	Un’icona accanto all’etichetta.
Conditional display	Mostra o nascondi l’intera riga in base alle risposte precedenti. Vedi Mostra, richiedi o disattiva i campi con le regole.
Ungroup row	Scioglie la riga. I suoi campi restano nella pagina.

Nel pannello Elements, l’icona a occhio della riga nasconde tutti i suoi campi e Duplicate row la copia. Per togliere un campo da una riga, selezionalo e fai clic su Remove from row.

Il modulo Wholesale application usa righe con il blocco dell’intestazione nascosto, perché ogni sezione si apre già con un campo Heading.

Usa più pagine

1. Aggiungi una pagina

   Fai clic su Add page in fondo al pannello Elements. Viene aggiunta una pagina chiamata Untitled page 2 e si aprono le sue impostazioni. Digita un nuovo Page name e premi Enter.

2. Trasforma le pagine in passaggi

   Fai clic su Content nel pannello Elements e attiva Show step progress bar. Scegli Step labels: Name and number, Name only o Number only.

   Ora chi si candida vede una pagina alla volta con una barra dei passaggi in alto. Ogni pagina termina con un pulsante Continue che controlla le risposte della pagina prima di procedere, e l’ultima pagina termina con il pulsante di invio. Senza la barra dei passaggi, tutte le pagine compaiono una dopo l’altra in un unico modulo.

3. Scegli se è possibile tornare indietro

   Ogni passaggio dopo il primo ha un pulsante Back, perché Let buyers go back a step è attivo per impostazione predefinita. Per cambiarlo, fai clic su Footer nel pannello Elements. Disattiva Let buyers go back a step per rimuovere il pulsante, oppure cambia Back label. Queste impostazioni compaiono solo mentre la barra dei passaggi è attiva e il modulo ha due o più pagine.

Fai clic sul nome di una pagina nel pannello Elements per le sue impostazioni:

Impostazione	Cosa fa
Page name	Il nome della pagina nel builder e nella barra dei passaggi.
Hide the heading block	Fa iniziare la pagina dal primo campo. Titolo e descrizione vengono conservati per dopo.
Heading e Description	Mostrati in cima alla pagina.
Continue button label	Il testo del pulsante Continue della pagina. Non compare nell’ultima pagina.
Icon	Sostituisce il numero di questo passaggio nella barra dei passaggi. Compare solo con la barra dei passaggi attiva.
Header and footer	Use custom header e Use custom footer danno a questo passaggio un testo di intestazione e una nota propri. Finché è possibile tornare indietro, il piè di pagina personalizzato ha anche Show Back button on this step. Compare solo con la barra dei passaggi attiva.
Visibility	Mostra o nascondi l’intera pagina in base alle risposte delle pagine precedenti.
Delete page	Elimina la pagina e i suoi campi. Un modulo ha bisogno di almeno una pagina e la pagina che contiene il campo Email non si può eliminare finché non sposti quel campo.

Intestazione e piè di pagina

Fai clic su Header in cima al pannello Elements, oppure sul titolo nell’anteprima:

• Show store logo, poi Upload image: un file .jpg, .png o .svg fino a 1 MB, di circa 200×60 pixel.
• Heading e Subheading in cima al modulo.
• Show this block per mostrare o nascondere l’intera intestazione.

Fai clic su Footer in fondo al pannello Elements, oppure sui pulsanti nell’anteprima:

• Submit label, il testo del pulsante di invio.
• Reset button e Reset label, un pulsante che cancella il modulo.
• Full-width buttons, oppure Alignment: Left, Center o Right.
• Note, testo mostrato con i pulsanti, e Put the note above the buttons.

Nascondi, copia o rimuovi un campo

• Hide this block (l’icona a occhio nel pannello Elements o nella barra degli strumenti del campo) toglie il campo dal modulo per chi si candida ma lo conserva, con le sue impostazioni, nel builder. Il campo esce dall’anteprima e appare in grigio nel pannello Elements. Fai clic sulla sua icona a occhio lì per ripristinarlo.
• Duplicate field colloca una copia subito dopo il campo e la seleziona.
• Remove field (nella barra degli strumenti o in fondo al pannello delle impostazioni) elimina il campo al salvataggio.

Visualizza l’anteprima del modulo

• Desktop preview e Mobile preview cambiano la larghezza dell’anteprima.
• Il pulsante dell’ispettore (l’icona a bersaglio) passa dalla modifica alla prova. L’ispettore è attivo all’apertura del builder e il pulsante riporta Deactivate inspector: il clic seleziona gli elementi da modificare e le regole non vengono eseguite, quindi un campo che una regola nasconderebbe è comunque visibile. Fai clic per disattivare l’ispettore e compilare l’anteprima come chi acquista: le regole vengono eseguite e Continue e il pulsante di invio controllano le tue risposte. Non viene inviato nulla. Fai di nuovo clic (Activate inspector) per tornare alla modifica. La scorciatoia è ⌘ Shift I su Mac o Ctrl Shift I su Windows.
• Language mostra il modulo in una lingua in cui lo hai tradotto. Le parole non ancora tradotte compaiono in inglese. Per tradurre, scegli Translate this form da … (More actions), che apre Translate.
• Preview (l’icona a occhio) apre in una nuova scheda la pagina del modulo nel tuo negozio. Funziona dopo che il modulo è stato salvato e pubblicato.

Salva le modifiche

Fai clic su Save nella barra di salvataggio. Compare il messaggio Form saved e, se il modulo è Active, chi acquista ottiene subito la nuova versione. Discard scarta tutto ciò che è stato fatto dall’ultimo salvataggio.

Se c’è qualcosa da correggere, il salvataggio viene rifiutato e un banner in cima all’anteprima elenca ogni problema, come Enter a form name o due campi salvati nello stesso campo Shopify. Dove una riga termina con un pulsante a freccia, fai clic per andare direttamente al campo o all’impostazione.

Passaggi successivi

• Mostra, richiedi o disattiva i campi con le regole: fai una domanda solo quando una risposta precedente lo richiede.
• Associa le risposte a Shopify: scegli dove viene salvata ogni risposta all’approvazione.
• Personalizza il modulo: adatta il modulo all’aspetto del tuo negozio.
• Crea e pubblica un modulo: pubblica il modulo e controllalo nel tuo negozio.