Come modificare lo stile di un modulo di contatto WordPress

Vuoi cambiare lo stile del modulo di contatto di WordPress? Allora questa guida è per te! Imparerai come lo stile dei moduli di WordPress può essere semplicissimo! Scopri di più.

Tempo di lettura approssimativo : 6 minuti

Hai solo una possibilità per fare una prima impressione.

E attirare l'attenzione dei tuoi visitatori con una bella forma è un modo per fare un'ottima impressione.

È anche il modo perfetto per convincerli a compilare il modulo. Dopotutto, come possono compilarlo se non lo vedono?

Quindi, se sei pronto per passare dal semplice al bello con le tue forme, questa guida è per te.

Ti mostreremo due modi per cambiare facilmente lo stile del tuo modulo di contatto WordPress!

Entriamo in esso.

Come modificare lo stile del modulo di contatto di WordPress

Come accennato, ci sono due modi per personalizzare lo stile del tuo modulo

Quale sceglierai dipenderà dal tuo livello di comfort con la codifica. Ma ti mostreremo entrambi i metodi, così conosci tutte le opzioni disponibili.

Metodo 1: modifica il codice del modulo in WordPress

Quindi, vuoi tuffarti a capofitto nelle acque del codice, eh?

Supponiamo che tu abbia già creato un modulo e desideri personalizzarlo. Se non hai un modulo, vai alla nostra guida sulla creazione di un modulo per iniziare.

Passaggio 1: ottieni l'ID o la classe del tuo modulo

Per iniziare, devi ottenere l' ID o la classe del tuo modulo.

Un modo semplice per farlo è accedere al tuo sito Web, fare clic con il pulsante destro del mouse sul modulo e fare clic su Ispeziona . Qui vedremo il modello HTML del modulo all'interno del tema figlio.

La barra laterale degli strumenti per sviluppatori di Google scorrerà fuori e potrai visualizzare le diverse sezioni di codice per il tuo modulo.

La cosa più importante è trovare l'area che desideri personalizzare e tenere traccia dell'ID o del nome della classe . Lo utilizzerai per apportare modifiche.

Ad esempio, se volessimo cambiare il colore di sfondo del nostro modello di modulo Contattaci, troveremmo la parte di codice più esterna. In questo caso, è un div con la classe api-form-box .

Possiamo persino testare come sarebbe da questa console.

Se facciamo clic con il pulsante destro del mouse sul div e facciamo clic su Add Attribute , possiamo aggiungere uno stile di colore di sfondo.

Premi Invio e le modifiche vengono immediatamente visualizzate nella finestra.

Ma non preoccuparti. Ogni volta che aggiorni la pagina, il modulo tornerà alla normalità.

Successivamente, vai nel tuo amministratore di WordPress per apportare le modifiche necessarie al codice CSS.

Passaggio 2: modifica il CSS nel pannello di amministrazione di WordPress

Ora che hai preso nota di alcune cose che desideri modificare nel nostro modulo, vai al tuo amministratore di WordPress per iniziare.

Successivamente, nella barra laterale di WordPress, scegli Aspetto → Personalizza → CSS aggiuntivo per definire lo stile del modulo.

Qui è dove puoi inserire le classi CSS per il tuo modulo.

Ad esempio, abbiamo deciso di modificare alcune cose sul nostro modulo, quindi ecco il codice che abbiamo inserito:

Per contrassegnare una classe , devi includere un file . prima del nome della classe. Per un ID , metti un # .

Tuttavia, se utilizzi questo metodo, ti consigliamo di saperne di più sulle regole CSS per comprendere meglio le tue modifiche.

Per il nostro esempio, sarebbe suddiviso in questo modo:

• .api-form-box sta cambiando il colore di sfondo in azzurro
• .frm-button-submit cambia lo sfondo del pulsante di invio in giallo e il testo in nero
• .frm-submit sta centrando il pulsante nel modulo

Con queste modifiche, il nostro modulo sarebbe simile a questo:

Da qui, il tuo potere è illimitato. Puoi personalizzare il tuo modulo come preferisci se impari a usare i CSS.

Ci sono alcuni svantaggi di questo metodo, però.

Un aggiornamento potrebbe interrompere il design del modulo e costringerti a farlo di nuovo. Per non parlare del fatto che richiede tempo. Se disponi di più moduli di contatto, dovrai modificare il codice HTML e aggiungere CSS personalizzati a ciascuno di essi.

Ma se vuoi qualcosa di più semplice e indistruttibile, ti consigliamo di provare il seguente metodo .

Metodo 2: utilizza un generatore di moduli con uno styler visivo

La programmazione è un'abilità che richiede tempo per essere appresa.

E molte persone non hanno il tempo di imparare. Se sei tu, un generatore di moduli è la tua migliore opzione.

E uno che consigliamo è Formidable Forms .

È il plug-in WordPress per la creazione di moduli più avanzato di WordPress, il che significa che la creazione di moduli è semplice e fa risparmiare tempo, che è più tempo da dedicare ad altre aree del tuo sito web.

Indipendentemente dal tipo di modulo sul tuo sito Web, Formidable può gestirlo rapidamente.

Nessuna codifica, nessuna seccatura: solo una semplice creazione di moduli.

Ci sono altri costruttori di moduli tra cui scegliere (WPForms, Gravity Forms e altri), ma non offrono le capacità di styling fornite con Formidable. E questo significa che ottieni più potere su come appare la tua forma.

Ti consigliamo di controllare anche i piani premium di Formidable.

Sebbene non siano necessari per modellare il tuo modulo, ottieni molte fantastiche funzionalità:

• Accesso ai modelli di progettazione dei moduli
• Possibilità di personalizzare l'immagine di sfondo
• Più modelli di modulo per avviare il modulo più rapidamente
• E altro ancora

Quindi, una volta installato e attivato Formidable, sarai pronto per iniziare.

Ottieni forme formidabili ora!

Sono solo tre semplici passaggi per definire lo stile del modulo e pubblicarlo sul tuo sito:

1. Crea un modulo
2. Modella la forma
3. Visualizza il modulo

Passaggio 1: crea un modulo

Per modellare un modulo, hai bisogno di un modulo da modellare, giusto?

Quindi, vai al tuo amministratore di WordPress e vai su Formidable → Moduli → Aggiungi nuovo .

Puoi scegliere uno dei nostri numerosi modelli predefiniti (funzionalità premium) o un modulo vuoto per iniziare.

Successivamente, assegna un nome al modulo e fai clic su Crea .

Il plug-in ti porterà al suo builder drag-and-drop, dove puoi modificare facilmente il tuo modulo.

Aggiungi tutti i campi del modulo che desideri, personalizza le etichette dei campi, modifica il tipo di input e altro dal menu della barra laterale.

Se stai creando un modulo di contatto, è meglio aggiungere quanto segue:

• Campo di testo per il nome del visitatore
• E-mail per un modo per contattarli
• Paragrafo per un messaggio che vogliono aggiungere

Una volta impostato il modulo di contatto, fai clic su Aggiorna per salvare le modifiche.

Quindi, andremo alla scheda Stile .

Passaggio 2: modellare il modulo

Nella scheda Stile , vedrai alcune opzioni.

Puoi scegliere uno dei nostri modelli di design predefiniti per risparmiare tempo (premium) o iniziare a progettare il tuo.

Per crearne uno personalizzato, fai clic sui tre puntini accanto a Formidable Style e fai clic su Modifica . Lo Stile Formidabile è lo stile predefinito in Formidabile.

Questo ti porterà al nostro Formidable Style designer, dove potrai personalizzare il tuo modulo.

Puoi modificare la dimensione e il colore delle etichette, i campi di input, la dimensione del carattere e il colore di sfondo e persino caricare un'immagine di sfondo!

Ad esempio, per un sito web di prova chiamato Cheap n' Cheesy , abbiamo progettato un modulo che riflette l'attività:

Le possibilità sono infinite per te e per il tuo modulo di contatto!

Quindi, fai clic su Aggiorna per salvare le modifiche dopo aver personalizzato il modulo.

Ora non ci resta che mostrarlo!

Passaggio 3: visualizzare il modulo

Visualizzare il tuo modulo è ancora più facile che crearlo.

Per prima cosa, vai al post o alla pagina in cui vuoi mostrare il tuo modulo e aggiungi un nuovo blocco WordPress.

Quindi, cerca il blocco Formidable Forms , aggiungilo e scegli il tuo modulo dal menu a discesa.

Infine, aggiorna il tuo post o la tua pagina e il tuo modulo sarà attivo sulla tua pagina!

Ti abbiamo detto che è stato facile, come per tutto ciò che riguarda Formidable.

Ottieni forme formidabili ora!

Pronto a modellare i moduli di contatto WordPress sul tuo sito?

Avere la possibilità di modellare i moduli di contatto è qualcosa di cui hai bisogno , non vuoi.

Potresti vedere ricerche per il plug-in Contact Form 7 che comportano la loro personalizzazione. Cose come Contact Form 7 CSS, input type text in WPCF7 o input type email con WPCF7.

Niente di tutto ciò è necessario con questi due metodi. E questo post ti ha insegnato come personalizzare un modulo di contatto in WordPress, in modo che il tuo modulo abbia l'aspetto che desideri. Sia che tu inserisca HTML personalizzato, CSS e altro, sia che utilizzi Formidable Forms. Non rimarrai deluso.

Quindi, non aspettare oltre. Prendi Formidable Forms e inizia a progettare i tuoi moduli!

E seguici su Facebook, Twitter e YouTube per altri fantastici suggerimenti e trucchi!

Leggi di più dal blog Formidabile

• Formidabili Forme 6.0! Modelli di stile, azione del modulo di conferma e altro
  Per saperne di più

  Jotform vs Typeform vs Formidable Forms [Confronto]
  Per saperne di più

  Come utilizzare un modulo di contatto WordPress per reindirizzare dopo l'invio
  Per saperne di più

Sapevi che Formidable Forms è uno dei plugin per la creazione di moduli WordPress più veloci oggi disponibili? Se non lo stai già utilizzando, inizia con il nostro plug-in gratuito o la versione pro completa!