Crea un modulo standard

Questa guida percorre l’intero modulo, nell’ordine in cui lo presenta l’editor.

1. Apri l’editor Customize

   Vai su Quote settings. Nella pagina Request a Quote, trova la scheda Customize e clicca su Customize. L’editor si apre a schermo intero.

2. Apri la scheda Quote form

   L’editor ha quattro schede: Button & widget, Quote form, Quote cart page e Success message. Apri Quote form.

3. Parti da un modello

   Form template mostra il modello su cui è costruito il tuo modulo, con una breve descrizione di a chi è adatto.

   Clicca su Change. Si apre un selettore con il titolo Choose a form template e la nota “Select a starting point. The form fields will change only after you confirm.” Ce ne sono tre:

   Modello	Come lo descrive l'app	Tag
   Simple quote form	"Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload."	Fast setup · 7 fields
   Detailed quote form	"For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance."	More details · 14 fields
   B2B customer form	"For wholesale or business buyers who need company, shipping, billing, and payment term information"	B2B

   Scegli quello la cui descrizione corrisponde al lavoro per cui fai preventivi, poi clicca su Use this template per confermare. Cancel lascia intatto il modulo attuale. Fallo subito, prima di iniziare a modificare i campi.

   

   Parti da un modello anziché da un modulo vuoto.

   Attenzione

   Scegliere un modello diverso sostituisce l’elenco dei campi attuale. Le sezioni e i campi visibili vengono sostituiti da quelli del nuovo modello, quindi ogni sezione aggiunta, ogni campo rinominato e tutto ciò che hai rimosso va perso. Scegli prima il modello, personalizza dopo.

4. Decidi se il modulo compare nelle pagine prodotto

   Sotto Product page form display (“Show the quote form directly on product pages”) spunta Enable product page form display se vuoi che chi acquista compili il modulo senza uscire dal prodotto.

   Spuntandola compare Form position on product page, un menu a tendina con tre scelte:

   Posizione	Dove compare il modulo
   Below Add to Cart button	In alto nella pagina, subito sotto i pulsanti di acquisto: l'opzione più visibile.
   Below product description	Dopo il testo di presentazione, per chi lo ha già letto.
   Below product information	Alla fine del blocco delle informazioni sul prodotto.

   

   Disattiva questa impostazione se preferisci che chi acquista crei prima un carrello dei preventivi.

5. Scorri il Form builder

   Il Form builder (“Manage sections, rows, fields, and validation with the visual form builder”) contiene le tue domande, raggruppate in sezioni. Quali sezioni ci sono dipende dal modello che hai appena scelto:

   Modello	Sezioni nel builder
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Tre cose che puoi fare con una sezione:

   • Attivarla o disattivarla. Apri le impostazioni della sezione e spunta o deseleziona Enable. Una sezione disattivata non viene mostrata, indipendentemente da quanti campi contenga.
   • Rinominarla. Lo stesso pannello delle impostazioni ha una Label: cambiala con il nome che userebbe chi acquista.
   • Spostarla. Trascina la sezione dalla sua maniglia per riordinare il modulo.

   Espandi una sezione con la sua freccia per vedere i campi al suo interno e usa Add element per aggiungere un altro campo a quella sezione.

   I campi di contatto e indirizzo sono trattati in Campi con i dati della clientela; azienda, fatturazione e termini di pagamento in Crea un modulo B2B.

   Nota

   I controlli del builder disattivati, con una riga con un lucchetto che dice “🔐 This feature is available on …”, indicano che la funzione si trova in un piano superiore. Non c’è nulla di rotto: apri Pricing plans nell’app per vedere cosa include il tuo.

6. Modifica un campo

   Clicca su un campo qualsiasi nel builder e si aprono le sue impostazioni, con in testa il nome del campo e “Customize how this field appears on the form.”

   Impostazione	Cosa fa
   Label	Il testo che legge chi compila. È l'impostazione che si cambia più spesso.
   Hide label	Mantiene il campo ma elimina l'etichetta sopra di esso.
   Placeholder	Il testo di esempio grigio dentro la casella vuota. Usalo per il formato che desideri: "e.g. 500 units" è meglio di una casella vuota.
   Help text	Una riga sotto il campo, per tutto ciò che è troppo lungo per un segnaposto.
   Type	Che tipo di campo è e cosa può digitarvi chi compila.
   Required	Il modulo non si invia senza di esso. Chiedi meno campi obbligatori possibile.
   Options / Add option	Le scelte di un menu a tendina, di un gruppo di pulsanti di opzione o di un gruppo di caselle.
   Choose default value	Il valore con cui il campo parte quando il modulo si carica.
   Limit characters	Attiva Min characters e Max characters.
   Column width	Quanta parte della riga occupa il campo, così due campi brevi possono stare affiancati.
   Custom HTML class	Un nome di classe per il tuo CSS: consulta Aggiungi CSS personalizzato.
   Remove	Elimina il campo. È disponibile solo per i tuoi campi: i campi di contatto e indirizzo integrati sono protetti e non hanno Remove.

   

   Clicca su ogni elemento e configuralo ulteriormente (se serve)

   Concludi con Save changes nel pannello del campo, oppure Cancel per annullare la modifica.

   Attenzione

   Limit characters viene convalidato mentre digiti: Min characters e Max characters devono essere ciascuno un numero intero pari o superiore a 0 e il minimo non può essere maggiore del massimo. Se sbagli, l’editor blocca il salvataggio.

7. Metti i campi nell’ordine che preferisci

   I campi si riordinano trascinandoli. Afferra un campo dalla maniglia di trascinamento all’estremità sinistra della riga e rilascialo dove vuoi. Le sezioni hanno una propria maniglia e si spostano allo stesso modo.

   L’ordine conta più di quanto sembri: un modulo che chiede il CAP di consegna prima del nome sembra un database, non una conversazione.

   

   Trascina l’elemento per cambiarne posizione/ordine nel modulo del preventivo

8. Aggiungi le tue domande

   Extra info parte con ciò che il tuo modello vi inserisce, che cambia da modello a modello. Simple quote form include Quantity e Upload files; Detailed quote form include Project detail e Delivery service; B2B customer form include Message.

   Usa Add element per aggiungere qualsiasi altra cosa ti serva: tempi di consegna, data di consegna, riferimento del progetto.

   Se un gruppo di domande va insieme e non rientra in una sezione esistente, usa Add section per crearne una nuova.

   Pericolo

   Un campo non è facoltativo: il modulo deve contenere un elemento il cui name contiene la parola email. L’app blocca il salvataggio e te lo dice: Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Senza di esso, nessun preventivo che crei arriverà mai a chi lo ha richiesto.

   

   Clicca su Add element per aggiungere altri campi personalizzati al modulo del preventivo

   

9. Dai uno stile al modulo

   Style mostra il preset usato dal tuo modulo, con un pulsante Change che apre gli altri. I preset sono Material filled, Classic, Flat, Flat round, Classic round, Line, Line round e Material outlined, ciascuno mostrato come una piccola immagine del campo, quindi scegli a colpo d’occhio anziché dal nome.

   Accanto c’è Match theme styling if possible. Spuntala e il modulo prende in prestito i caratteri e i campi del tuo tema, che di solito è la via più breve per un modulo che non sembri aggiunto a posteriori. L’app precisa che “Theme styling applies on your storefront and is not shown in this preview”, quindi valutalo nella vetrina, non qui.

   Customize text imposta Font style, Title bar font size e Title bar font weight. Customize form color imposta i singoli colori: Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border e Quote popup primary color.

   

   Tutti i dettagli: Adatta lo stile al tuo tema.

10. Rileggi il modulo in Preview

    Il pannello Preview si trova accanto all’editor e si aggiorna mentre lavori. Due controlli della sua barra degli strumenti vale la pena usarli prima di salvare:

    • Il pulsante dello stato del cliente, che passa l’anteprima tra Guest e Logged-in: vedono moduli diversi.
    • Il selettore desktop / dispositivo mobile, perché un modulo lungo è un’altra cosa su smartphone.

11. Salva e provalo tu stesso

    Modifica qualcosa e compare la barra di salvataggio di Shopify con Save e Discard changes. Clicca su Save. Se un campo ha ancora un errore di convalida, l’editor rifiuta e dice “Please resolve validation errors before saving.”: correggi il campo indicato e salva di nuovo.

    Poi vai nella tua vetrina e invia una vera richiesta di prova. Controlla che arrivi in Quote list con tutto ciò che ti aspettavi.

    

    Il modulo nella vetrina, con Quote form appearance impostato su Multiple step.

Nota

Il modello stabilisce il tuo punto di partenza, non il tuo limite. Tutto ciò che il modello porta può essere modificato o rimosso e tutto ciò che lascia fuori può essere aggiunto con Add element o Add section. Ricorda solo che cambiare modello in seguito è un ricominciare, non una modifica: sostituisce l’elenco dei campi che hai costruito.

Attenzione

Invia sempre tu stesso una richiesta di prova prima di andare online. È l’unico modo per verificare che i campi, l’email e il registro del preventivo siano allineati.

Dove si trovano le altre impostazioni

La scheda Quote form riguarda solo le domande. Molte cose che chi vende cerca qui si trovano nelle altre schede dello stesso editor:

Cosa vuoi	Scheda	Cosa trovi
Il modulo in un'unica pagina o a passaggi	Quote cart page	Quote form appearance ("Controls how the quote form looks on the quote cart page"), impostato su Multiple step o Single page.
Cosa mostrano le righe dei prodotti	Quote cart page	Product list columns ("The product details shown as columns in the customer's quote cart"): consulta Gruppo di prodotti del preventivo.
Permettere a chi acquista di raggruppare i prodotti	Quote cart page	Enable Quote Sections ("Lets customers group the products in their quote cart into named sections"): consulta Gruppo di prodotti del preventivo.
Testo e posizione del pulsante	Button & widget	Testo del pulsante, azione al clic, posizione del pulsante e chi lo vede.
Cosa succede dopo l'invio	Success message	Il testo di ringraziamento e Redirect to custom URL.

Nota

L’editor stesso ti avvisa se provi a passare da una scheda all’altra a metà modifica: “Save your changes before switching tabs to avoid losing them.”

Passaggi successivi

• Campi con i dati della clientela: perfeziona ciò che chiedi
• Gruppo di prodotti del preventivo: colonne dei prodotti e sezioni del preventivo nella pagina del carrello dei preventivi
• Aggiungi reCAPTCHA: proteggi il modulo dallo spam
• Crea un modulo B2B: il modello per chi acquista all’ingrosso