Styling Belle forme CSS con Styler globale WP Fluent Forms’

Ogni imprenditore online vuole trasformare i suoi contatti in clienti. Tuttavia, ciò che sperimentano in realtà sono le persone che visitano il sito regolarmente, ma non si convertono agli utenti finali. Per ottenere la conversazione in corso, molti uomini d’affari online ricorrere a moduli di contatto. Pur essendo uno strumento potente, molti utilizzano moduli di contatto senza alcun risultato. Se aggiungi un modulo di contatto al tuo sito senza considerare il suo stile e posizionamento, potrebbe fare più male che bene. Quindi, come puoi creare bellissimi moduli CSS per i tuoi potenziali clienti?

Bene, qualsiasi modulo standard ha bisogno di una struttura visiva pulita, una vera gerarchia di elementi del modulo e un’elevata funzionalità in modo che appaia perfetto mentre funziona senza intoppi. Ci sono un sacco di plugin form builder che vi aiuterà a progettare belle forme. In questo articolo, ci concentreremo su uno specifico plugin form builder chiamato WP Fluent Forms’ Global Styler, nella creazione di belle forme CSS. Ma prima di entrare in questo, cerchiamo di approfondire perché styling un modulo di contatto è essenziale.

Perché è necessario stilare moduli online?

beautiful CSS forms, styling contact forms
Conosci l’importanza di progettare contact forms

Un modulo di contatto è una parte cruciale del tuo sito web. Quando si progetta un sito web, si può trascurare il modulo di contatto in quanto è una piccola parte del business. Ma non puoi ignorare l’impatto che lascia. Questa parte ti aiuta ad aumentare il tasso di conversione per il tuo sito di business online. Quindi, durante la creazione del modulo di contatto, è necessario prestare la massima attenzione ad esso e prendere le misure necessarie per costruire un modulo stabile per il tuo sito web.

In caso contrario, il modulo potrebbe fornire una cattiva esperienza utente, confondere il pubblico, diminuendo così il tasso di conversione. Vediamo alcuni suggerimenti essenziali per la creazione di una buona forma sul tuo sito web.

Alcuni suggerimenti generali per la creazione di bellissimi moduli CSS

Beh, non ci sono regole rigide e veloci per lo styling dei moduli di contatto. È possibile personalizzare il modulo come si desidera. Ma è necessario tenere d’occhio alcune cose di base, come i modelli di domande in base alla forma, ai campi, al senso del design, ecc. Per favore, dai un’occhiata ai seguenti dettagli.

Includi campi necessari

styling forms CSS
Aggiungi campi importanti

Durante la compilazione di un modulo online, potresti spesso affrontare domande irrilevanti o inappropriate. Ad esempio, se un modulo di contatto richiede il tuo numero di passaporto quando non è affatto correlato al servizio che forniscono, è molto probabile che tu lasci quella pagina, vero?

D’altra parte, se il tuo modulo non include abbastanza domande pertinenti, lo scopo della raccolta dei dati potrebbe rimanere poco chiaro al tuo pubblico. È inoltre necessario assicurarsi di porre tutte le domande essenziali per ottenere tutti i dati necessari. Un modulo di contatto dettagliato ma coinvolgente incoraggerà il pubblico a completarlo.

In tali situazioni, devi organizzare il tuo modulo in un modo che non annoi le persone. Puoi aggiungere un piccolo chiarimento su ogni campo, che guadagnerà la fiducia delle persone e rimarranno sul tuo sito web.

Rendi il modulo user-friendly

Progettare il modulo utilizzabile per gli utenti

Gli utenti stanno ottenendo nel modulo sia dai loro desktop o qualsiasi dispositivo palmare. Quindi, il modulo dovrebbe essere in modo che gli utenti possano compilare il modulo senza alcuna difficoltà. Il modulo deve essere fornito in modo che gli utenti possano sentire il comfort di compilarlo.

Ci sono così tante ragioni per cui gli utenti non trovano il tuo modulo amichevole, come l’utilizzo , che può essere molto fastidioso. Quando si trova ad essere irritante te stesso, perché si rovina il tuo sito web con esso? Un altro fattore che allontanerà le persone dal compilare il modulo è l’applicazione di parole difficili o tecniche nelle domande. Le persone non metteranno da parte molto tempo per riempire il tuo modulo, quindi se devono dedicare più tempo e sforzi per capirlo, lo lasceranno sicuramente annullato. Evitare di fare questo errore a tutti i costi.

Un altro errore comune nella progettazione di un modulo di contatto è l’utilizzo di troppi colori scuri e caratteri di fantasia. Potresti pensare di decorare il tuo modulo per renderlo più redditizio quando, in realtà, gli utenti trovano queste cose inquietanti quando riempiono moduli online.

Consenti riempimento automatico

belle forme CSS
Abilita riempimento automatico

Google offre la funzione di riempimento automatico per rendere la vita più facile. Riduce al minimo il rischio di errori che si verificano in campi importanti. Così, durante la creazione di un responsive form CSS, o è possibile utilizzare rendere il vostro semplice in modo che Google può capire i campi del modulo facilmente, oppure è possibile utilizzare qualsiasi estensione per lo scopo di riempimento automatico. Quando stanno offrendo questo tipo di flessibilità per gli utenti, farà risparmiare loro tempo, e possono riempire rapidamente le query.

Usa un attraente pulsante call-to-action

styling contact forms, beautiful CSS forms
Crea un attraente CTA

Quando stai disegnando elementi del modulo, un pulsante call-to-action è la parte più necessaria di esso. È la parte centrale in cui gli utenti faranno clic per intraprendere alcune azioni. Se usi parole confuse sul tuo pulsante CTA, le persone non capiranno lo scopo del tuo modulo. Quindi, se non hai prestato attenzione a questa parte prima, devi tornare indietro e migliorare i tuoi pulsanti.

Ad esempio, in caso di un modulo di contatto, invece di usare parole semplici come “ok” o “invia”, usa “contattaci.”Usa” entra in contatto ” al tuo pulsante CTA per un modulo di richiesta. In questo modo, gli utenti capiranno facilmente cosa otterranno dopo aver inviato il modulo.

Applica barra di avanzamento

responsive forms CSS
Usa barra di avanzamento

Dovresti provare ad aggiungere una barra di avanzamento nel tuo modulo di contatto quando crei un modulo con una lunga lista di domande. Anche se non ha alcun impatto diretto sull’aumento del tasso di conversione per il modulo, si aggiungerà all’esperienza utente. I tuoi utenti saranno in grado di vedere il processo di compilazione del modulo. In questo modo, le probabilità di lasciare il modulo diminuiranno.

Beh, al giorno d’oggi, ci sono così tanti plugin form builder in WordPress che vi aiuterà a stile belle forme CSS per il tuo sito web. Oggi vedremo come è possibile creare responsive form CSS utilizzando WP Fluent Forms. Quindi, tuffiamoci nell’argomento.

Style beautiful CSS forms using WP Fluent Forms’ global styler

WP Fluent Forms è progettato in modo da poter creare diverse forme di bell’aspetto per il tuo sito web. Tuttavia, se vuoi creare un modulo che corrisponda allo stile del tuo sito web, puoi utilizzare la funzione global styler di WP Fluent Forms.

Lo styler globale consente di stile facilmente qualsiasi disegno per la forma senza un singolo sistema di codifica. Questo articolo vi aiuterà a fare belle forme CSS utilizzando Fluent Form elementi e layout con Styler globale in pochi click.

Dopo aver creato un modulo, fare clic su anteprima e progettazione dall’angolo in alto a destra dell’editor. Si aprirà una finestra di anteprima e ora è possibile modellare gli elementi del modulo come si desidera.

bellissime forme CSS

La parte di progettazione viene fornita con due supporti, denominati come Scheda Generale e Scheda Varie. La scheda Generale è per lo styling del modello di ogni modulo. Puoi scegliere tra uno qualsiasi dei modelli, come Predefinito, Moderno, classico, stile Bootstrap e Personalizzato (personalizzazione avanzata).

responsive form CSS, styling contact forms

Seleziona tra i modelli

Puoi scegliere qualsiasi tra i modelli predefiniti. Quando si seleziona un modello dall’elenco predefinito, è comunque possibile personalizzare gli stili globali del modulo. Ad esempio, ho scelto lo stile Bootstrap come modello. Per personalizzare il modulo, vai alla scheda Varie, situata vicino alla scheda Generale. La scheda sarà come l’immagine riportata di seguito.

styling contact forms, form builder

Qui, vedrai gli stili denominati, gli stili contenitore, gli stili asterisco, gli stili messaggio di errore in linea, Dopo l’invio degli stili messaggio di successo e dopo l’invio degli stili messaggio di errore.

Stili contenitore

Quando si fa clic sugli stili contenitore, si aprirà un menu a discesa con molti campi personalizzabili. Qui, vedrai i campi denominati come, Colore di sfondo, Colore, Margine del modulo, Riempimento del modulo, Tipo di bordo, Colore del bordo, Larghezza del bordo e Raggio del bordo. È possibile definire il colore del modulo, la larghezza del modulo, la larghezza del bordo e il colore nel modo desiderato con questi campi. Per una migliore comprensione, dai un’occhiata allo screenshot qui sotto.

plugin, WP Fluent Forms

Asterisk styles

Asterisk styles ti aiuterà a selezionare il colore degli asterischi nel tuo modulo.

WP Fluent Forms, form builder

Stili di messaggio di errore in linea

Selezionare il colore dei messaggi di errore con gli stili di messaggio di errore in linea. Inoltre, imposta la dimensione del carattere, i pesi dei caratteri, la decorazione del testo, l’altezza della linea e la spaziatura delle lettere. Controlla lo screenshot qui sotto.

responsive form CSS

Dopo aver inviato gli stili dei messaggi di successo

In questa impostazione, è possibile personalizzare il modulo dopo aver inviato i testi. A scopo di test, compila il modulo e fai clic su invia per visualizzare il testo dopo l’invio. Ora, fai clic su ” Dopo aver inviato gli stili di messaggio di successo.”Qui è possibile selezionare il colore per il testo, sfondo del testo, Tipografia, e Box-Ombra. Nel campo Tipografia, è possibile ridimensionare i font, selezionare Font-Peso, Trasformare, Stile del carattere, Testo-Decorazione, Altezza della linea, e la spaziatura delle lettere.

styling forms CSS

Il campo box-shadow ti consentirà di personalizzare l’ombra dietro l’area “dopo aver inviato la casella di testo” se lo desideri. Dai un’occhiata allo screenshot qui sotto.

Moduli di contatto per lo styling

Dopo aver inviato gli stili di messaggio di errore

È anche possibile personalizzare gli stili di messaggio di errore dopo aver inviato. Questa opzione di stile è simile agli stili di messaggio Dopo l’invio di successo. Imposta il colore del carattere, Colore di sfondo. La tipografia include la dimensione del carattere, i pesi dei caratteri, la decorazione del testo, l’altezza della linea e la spaziatura delle lettere. Dopo la casella Tipografia, è possibile passare alle Ombre della casella per modellare il messaggio dopo il successo.

bellissimi moduli CSS

Personalizzato (Personalizzazione avanzata)

Dalla scheda Generale, se si sceglie il modello personalizzato (personalizzazione avanzata), è possibile progettare i campi di input di cui si ha bisogno. La nuova finestra sarà simile alla schermata qui sotto.

styling forms CSS

Etichetta Stili

Quando si fa clic su Etichetta stili, un nuovo menu a discesa si aprirà con il colore e la tipografia. È possibile modificare il colore del carattere, la dimensione del carattere, il peso del carattere, lo stile del carattere, la decorazione del testo, ecc.

plugin, modulo di contatto

Input& Textarea

Cambia il colore di sfondo e il colore del carattere del tuo modulo con Input e Textarea. Inoltre, sarai in grado di impostare la dimensione del carattere, il tipo di carattere, la spaziatura delle lettere, il peso del carattere, ecc. con la Tipografia. Con Box-Shadow, puoi persino personalizzare l’ombra dietro le aree della scatola mostrate nell’immagine qui sotto.

form builder

Se vuoi decorare il bordo, fai clic su “Usa lo stile del bordo personalizzato.”Questo ti aiuterà a personalizzare il colore del bordo, la larghezza del bordo, il raggio del bordo dei campi del modulo.

strumento form builder

Puoi anche progettare un campo specifico quando è focalizzato.

plugin form builder

Stili segnaposto

Scegli il colore del segnaposto dei campi di input per dargli un aspetto di firma. Posiziona la tipografia insieme alla dimensione del carattere, ai pesi dei caratteri, alla decorazione del testo, all’altezza della linea e alla spaziatura delle lettere. Dai un’occhiata allo screenshot qui sotto.

forme di contatto styling

Stile interruzione di sezione

Se si desidera aggiungere il campo Interruzione di sezione al modulo, andare alle opzioni Modifica campi dalla barra superiore. Fai clic sull’opzione e otterrai l’interruzione di sezione sui campi avanzati dei campi di input del modulo.

styling forms CSS, beautiful CSS forms

Ora vai di nuovo all’opzione Anteprima e progettazione. Qui, vedrai un nuovo elemento aggiunto all’elenco degli elementi del modulo, denominato come Stile di interruzione di sezione. Questo campo è dotato di due parti denominate Etichetta Styling, e Descrizione Styling.

Nella sezione Stile etichetta, è possibile modificare l’etichetta del campo con la dimensione del carattere, il colore del carattere, la decorazione del testo, la spaziatura delle lettere, ecc. Supporta anche le sezioni Padding e Margin per il posizionamento dell’etichetta di testo.

plugin, modulo di contatto

D’altra parte, la porzione di Stile descrizione consente di personalizzare i testi dell’area descrizione del campo Interruzione sezione con le stesse opzioni di modifica dello stile etichetta. Ecco l’anteprima del setup.

WP Fluent Forms, plugin

Stile tabella griglia

Ora, se aggiungi anche una tabella griglia dai campi di input del tuo modulo, vedrai un’altra nuova sezione aperta nell’elemento sul CSS personalizzato di WP Fluent Forms. È chiamato come lo stile della tabella della griglia. Lo styler è dotato di due schede, testa del tavolo e corpo del tavolo.

Table head ti aiuterà a progettare il colore di sfondo dell’intestazione della tabella. Vedrai anche un’opzione Tipografica lì.

moduli di contatto per lo styling

Il corpo della tabella riguarda la personalizzazione del corpo della tabella, come il colore del carattere, la dimensione del carattere, il tipo, il colore di sfondo, ecc.

styling forms CSS

Stile Radio e casella di controllo

Abilita l’interfaccia utente intelligente per trovare le opzioni di modifica dello stile Radio e casella di controllo. Qui troverai due opzioni per personalizzare il campo radio e checkbox. Specificare il colore del bordo o il colore di sfondo delle caselle di controllo.

modulo di contatto
contatto

Invia stile pulsante

WP Fluent Forms consente anche di stile il pulsante di invio del modulo. Fare clic su Invia Stile pulsante, e un nuovo menu a discesa sarà disponibile con due opzioni. Uno è normale, e un altro è hover.

Nella sezione normale, è possibile impostare lo sfondo e il colore del carattere del pulsante per impostare la posizione del pulsante. C’è anche la tipografia per impostare la dimensione del carattere, il tipo di carattere la spaziatura delle lettere, ecc. Inoltre, è possibile impostare le ombre scatola specificamente per questo pulsante. Se si attiva lo stile Usa bordo personalizzato, è possibile scegliere il tipo di bordo, il colore del bordo, la larghezza del bordo, il raggio del bordo, ecc. per il pulsante Invia.

CSS forms

Ora, scopriamo la sezione Hover. Quando si galleggia sopra il pulsante di invio si noterà alcune modifiche sul pulsante. La sezione hover ti consente di personalizzare l’opzione secondo i tuoi gusti. Viene fornito con gli stessi stili degli altri campi come il colore di sfondo, il colore del carattere, la tipografia, le ombre della scatola.

plugin, tool, form builder

Quindi, queste sono alcune istruzioni su come creare bellissimi moduli CSS con lo Styler globale di WP Fluent Forms. Ci sono più, è possibile personalizzare il modulo di contatto utilizzando questo styler.

Chiusura

1 nuovo NT BG

9 nuovo FF logo
5 nuovo gestire ninja logo

WP Fluent Forms Pro

Prova WP Fluent Forms oggi e vedere di persona!

In questo articolo, ho cercato di dare un’idea dettagliata sullo stile di belle forme CSS con forme fluenti WP. Questo plugin form builder sta arrivando con nuovi aggiornamenti ogni due o tre mesi. Ci sono alcuni video tutorial sull’utilizzo dello Styler globale di WP Fluent Forms. Inoltre, questo modulo di contatto builder plugin è molto user-friendly e conveniente.

Spero che questo articolo è stato utile e godere i componenti aggiuntivi e gli elementi di WP Fluent Forms’ Styler globale.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Back to Top