Riassunto AI
Desideri che i campi del tuo modulo vengano visualizzati su una singola riga? Avere il tuo modulo su una singola riga può aiutarti a posizionarlo in aree chiave del tuo sito (come la sezione superiore della tua home page) per ottenere la massima visibilità.
In questo tutorial, ti mostreremo come visualizzare il tuo modulo su una singola riga.
Nota: Se preferisci un'opzione di trascinamento della selezione per personalizzare il layout del tuo modulo, ti consigliamo di utilizzare il campo Layout. Tuttavia, la classe inline-fields trattata in questo tutorial è ancora supportata ed è consigliata se desideri allineare il pulsante di invio sulla stessa riga dei campi del tuo modulo.
Per il nostro esempio, creeremo un modulo con tre campi: Nome, Telefono e Email.
Per visualizzare i campi del modulo su una singola riga, vai su Impostazioni » Generali nel tuo form builder e aggiungi la classe CSS inline-fields al campo Classe CSS del Modulo.
Nota: Tieni presente che l'utilizzo della classe inline-fields in WPForms a volte può entrare in conflitto con gli stili del tuo tema WordPress. Di conseguenza, l'aspetto potrebbe non corrispondere alle tue aspettative.
Quindi, per ridurre l'altezza del tuo modulo, apri la sezione Avanzate di ciascun campo e seleziona l'opzione Nascondi etichetta.
Successivamente, imposteremo del testo segnaposto per fornire indicazioni agli utenti. Per il nostro esempio, aggiungeremo Email come testo segnaposto per il nostro campo Email.
Nota: Se desideri modificare l'aspetto del pulsante di invio per adattarlo allo stile del tuo modulo, puoi seguire la nostra guida sulla personalizzazione del pulsante di invio.
Ecco come apparirà il modulo sul frontend del sito:
Nota: Se stai cercando un altro esempio o un modello pronto all'uso per un modulo su una singola riga, dai un'occhiata al nostro Modello di modulo di iscrizione alla newsletter inline.
Fatto! Ora puoi creare moduli che verranno visualizzati su una singola riga.
Successivamente, desideri ricevere una copia delle informazioni inviate dai tuoi utenti tramite i tuoi moduli? Assicurati di consultare il nostro tutorial su come impostare le notifiche del modulo per maggiori dettagli.