Come Creare un Modulo di Iscrizione Personalizzato in Elementor

La maggior parte delle piccole imprese commette un errore cruciale: utilizzano moduli di iscrizione piuttosto standard che assomigliano a qualsiasi altro modulo di iscrizione sul web.

Vediamo ripetutamente questo schema ogni volta che abbiamo la possibilità di controllare i moduli dei nostri clienti mentre rispondiamo alle loro richieste.

Quindi abbiamo voluto mettere insieme una guida rapida per aiutare i nostri lettori a creare moduli di iscrizione di grande impatto per costruire la tua lista di newsletter.

In questa guida, ti illustreremo i passaggi per creare il tuo modulo di iscrizione personalizzato utilizzando lo strumento page builder più popolare per WordPress: Elementor.

Crea moduli di iscrizione personalizzati in Elementor

Creazione di un modulo di iscrizione personalizzato in Elementor

Utilizza i collegamenti rapidi qui sotto per saltare immediatamente a qualsiasi sezione del tutorial:

Iniziamo.

Passaggio 1: Installa Elementor e WPForms

Poiché la maggior parte delle persone utilizza Elementor per pubblicare le proprie pagine, ti mostreremo come creare moduli di iscrizione personalizzati utilizzando Elementor.

Se non lo hai già, procedi e installa Elementor sul tuo sito.

Non avrai bisogno di una licenza Elementor premium per questo tutorial.  Invece, puoi usare Elementor insieme a WPForms per creare moduli di iscrizione gratuitamente! 😎

Se non sai come installare i plugin, consulta questa guida per principianti sull'installazione dei plugin.

Sebbene tu possa creare moduli di iscrizione personalizzati dall'aspetto accattivante utilizzando una combinazione di Elementor e WPForms completamente gratuita, ti consigliamo di provare la licenza WPForms Pro per accedere ad alcuni strumenti avanzati per ottenere risultati migliori.

Dopo aver installato entrambi i plugin, è ora di iniziare a creare il tuo modulo di iscrizione completamente personalizzato!

Passaggio 2: Crea o modifica una pagina con Elementor

Puoi aggiungere un modulo di iscrizione a una pagina esistente o a una pagina completamente nuova. Di solito, un modulo per la newsletter viene incorporato come una delle diverse sezioni in una pagina di destinazione più grande. Ma creeremo una nuova pagina contenente solo un modulo di iscrizione per semplicità.

Per iniziare, apri la tua bacheca WordPress e fai clic su Pagine » Aggiungi Nuova Pagina.

Una volta all'interno dell'editor a blocchi di WordPress, fai clic sul pulsante Modifica con Elementor in alto.

Dopo aver fatto clic sul pulsante, l'editor di Elementor si caricherà in pochi secondi. Puoi creare una pagina di destinazione completa utilizzando l'editor drag and drop.

Nel passaggio successivo, utilizzeremo il widget WPForms per creare un modulo di iscrizione personalizzato.

Passaggio 3: Crea un nuovo modulo di iscrizione

Poiché dobbiamo solo aggiungere un modulo di iscrizione personalizzato qui, cerchiamo il widget WPForms e trasciniamolo nell'area a destra.

Quando hai inserito il widget WPForms nella tua pagina, puoi selezionare qualsiasi modulo salvato che hai creato con WPForms o crearne uno nuovo.

Creeremo un nuovo modulo di iscrizione facendo clic sul pulsante + Nuovo Modulo nel pannello di sinistra.

A questo punto, il costruttore di moduli WPForms inizierà a caricarsi come overlay. Qui puoi creare il modulo di iscrizione che devi incorporare nella tua pagina.

Inizia dando un nome al tuo modulo. Questo è utile per poterlo richiamare e trovare in seguito nella tua bacheca WordPress.

Successivamente, scorri verso il basso e usa la barra di ricerca sotto il riquadro di selezione del modello per trovare un modello adatto. Useremo il modello Modulo di iscrizione alla newsletter per questo tutorial.

Dopo aver selezionato il modello, il costruttore di moduli si caricherà sullo schermo. Noterai che questo modello include già i campi Nome ed Email, che sono fondamentalmente tutto ciò di cui hai bisogno per l'iscrizione alla newsletter.

Ma il divertimento non finisce qui! Possiamo portare questo modulo al livello successivo e dargli una vera e propria trasformazione.

Uno dei modi in cui possiamo farlo è aggiungere un titolo accattivante che inviti più persone a iscriversi.

Puoi farlo usando il campo Contenuto disponibile in WPForms Pro. Inseriremo il campo Contenuto in cima al modulo.

Dopo aver aggiunto il campo, fai clic su di esso per aprire le relative Opzioni campo nel riquadro di sinistra.

L'editor di testo nel riquadro di sinistra ti consente di aggiungere qualsiasi pezzo di testo senza codice. Aggiungeremo del testo e lo formatteremo come Titolo 4. Aggiungiamo anche un'emoji per far risaltare di più il testo! 🕺

Assicurati di premere il pulsante Aggiorna anteprima sotto l'editor per vedere le modifiche apportate al tuo modulo sulla destra.

E già che ci siamo, cambiamo anche il testo del pulsante di invio e rendiamolo più pertinente alla natura del modulo.

Dalla barra laterale nel costruttore di moduli, fai clic su Impostazioni » Generali. Scorri verso il basso finché non trovi il campo Testo del pulsante di invio. Puoi sostituire il testo predefinito semplicemente digitando qui.

Ottimo! Il modulo sta già prendendo una bella forma. Questo è un buon momento per salvare il modulo premendo Salva in alto.

Ma un modulo di iscrizione alla newsletter sarebbe inutile se non fosse integrato con il tuo strumento di email marketing.

Nel passaggio successivo, ti mostreremo come integrare il tuo modulo con la tua app di marketing in modo che i nuovi iscritti vengano copiati automaticamente nella tua lista di iscritti.

Passaggio 4: Collega il modulo di iscrizione a una piattaforma di marketing

WPForms supporta varie integrazioni di marketing a partire dai piani Plus e superiori. Se stai usando WPForms Lite, puoi comunque accedere all'integrazione Constant Contact gratuitamente.

Per questo esempio, ti mostreremo rapidamente come connettere il tuo modulo di iscrizione con Brevo.

Vai semplicemente alla scheda Marketing nella barra laterale.

Quindi, seleziona il servizio con cui desideri connettere il tuo modulo. Con l'eccezione di Constant Contact, tutte le integrazioni di marketing supportate richiedono l'installazione preliminare del componente aggiuntivo appropriato.

Se non hai già il componente aggiuntivo, WPForms lo installerà per te quando ci fai clic.

In questo caso, stiamo usando Brevo. Facendo clic su Brevo nella scheda Marketing, abbiamo ricevuto una richiesta di installazione. Dopo aver premuto Sì, installa e attiva, ci sono voluti solo circa 5 secondi perché il componente aggiuntivo Brevo fosse installato e pronto.

Successivamente, con Brevo selezionato nel riquadro di sinistra, fai clic su Aggiungi nuovo account in alto a destra.

Ora, inserisci semplicemente la tua chiave API Brevo e un soprannome per l'account. Se hai bisogno di ulteriore aiuto per trovare la tua chiave API Brevo, consulta la nostra documentazione sull'addon Brevo per i dettagli.

Dopo aver inserito le informazioni richieste, fai clic su Aggiungi.

Una volta connesso al tuo account Brevo, un nuovo elenco di impostazioni verrà visualizzato nel pannello di destra.

Utilizza i campi a discesa per configurare come il tuo modulo deve funzionare con il tuo account Brevo. Puoi impostare azioni come l'azione da eseguire in Brevo quando il modulo viene inviato, l'elenco in cui i nuovi iscritti devono essere aggiunti o rimossi, la mappatura dei campi e-mail e altro ancora.

Al termine, assicurati di premere Salva in alto.

L'integrazione di marketing è ora completa. È stato facile, vero!?

Passaggio 5: Personalizza il tuo modulo di iscrizione e pubblica

A questo punto, abbiamo finito di impostare le funzionalità richieste per il modulo di iscrizione. Ma come abbiamo sottolineato all'inizio di questo tutorial, un modulo di impatto deve essere più di un semplice funzionale: deve anche essere visivamente impressionante.

Sebbene abbiamo già reso il nostro modulo molto più interessante aggiungendo del testo ed emoji con il campo Contenuto, possiamo andare ancora oltre con la potenza combinata di WPForms ed Elementor.

Una volta pronto il tuo modulo, esci semplicemente da WPForms premendo il pulsante a croce. Dovresti ora avere l'editor di Elementor con il tuo modulo appena creato incorporato come widget.

Fai clic sul modulo e quindi seleziona la scheda Stili situata nel pannello di sinistra.

 

Sotto questa scheda, troverai opzioni per personalizzare gli stili di diversi componenti del modulo. Ad esempio, puoi personalizzare gli stili dei tuoi campi, etichette e pulsanti senza codice.

Nel nostro modulo, i bordi dei campi sono rettangolari con angoli retti per impostazione predefinita. Ma se hai bisogno di bordi dei campi più arrotondati, puoi farlo semplicemente aumentando il valore del raggio del bordo sotto Stili campo.

Allo stesso modo, puoi cambiare il colore dei tuoi campi, etichette e pulsanti con un clic. Utilizzeremo i colori predefiniti perché si abbinano perfettamente al nostro tema. Ma sei libero di sperimentare con colori diversi sul tuo modulo.

In Elementor, puoi anche cambiare gli stili del contenitore del tuo modulo. Per farlo, fai clic sulla scheda Avanzate.

Troverai qui una serie di impostazioni interessanti, tra cui regolazioni del layout, effetti di animazione, personalizzazioni dello sfondo e altro ancora.

Aggiungiamo un colore di sfondo al contenitore del modulo per dargli un aspetto più vivace. Fai clic sull'opzione Sfondo per espandere il menu con impostazioni aggiuntive.

Aggiungeremo un colore solido facendo clic sull'icona di selezione del colore a destra.

Lo strumento di selezione del colore ti consente di selezionare comodamente qualsiasi colore con un clic.

Dopo aver selezionato il colore, il modulo appare immediatamente molto più accattivante!

Tuttavia, gli elementi all'interno del modulo toccano i bordi del contenitore, il che non è molto bello.

Questa è una soluzione facile!

Fai clic sull'opzione Layout nel menu Avanzate nel riquadro di sinistra per accedere alle impostazioni di margini e riempimento. Abbiamo semplicemente aggiunto un po' di riempimento e i risultati sono ottimi!

A questo punto, siamo pronti per pubblicare il tuo modulo. Ma se desideri provare ulteriori personalizzazioni, sentiti libero di dedicare più tempo qui ed esplorare diverse opzioni.

Quando sei pronto, premi il pulsante Pubblica in basso.

Vedrai immediatamente apparire un messaggio che ti chiede se desideri visualizzare subito la tua pagina pubblicata.

Procedi e visualizza la tua pagina dopo la pubblicazione.

E questo è tutto!

Hai appena aggiunto un modulo di iscrizione personalizzato utilizzando Elementor e WPForms.

Con questo, puoi assicurarti che il tuo modulo abbia un aspetto unico per il tuo sito web e sia dotato di integrazioni che fanno risparmiare tempo per aiutarti a far crescere i tuoi iscritti via email senza alcun problema!

Domande frequenti sui moduli di iscrizione Elementor

Hai ancora delle domande sulla creazione di moduli di iscrizione in Elementor? Ecco alcune domande che i nostri clienti ci hanno posto in precedenza.

Ho bisogno di Elementor Pro per creare un modulo di iscrizione?

No, non hai bisogno di Elementor Pro per creare un modulo di iscrizione finché hai WPForms installato. Puoi accedere al widget WPForms in Elementor senza dover passare alla versione Pro. Tuttavia, Elementor ha anche un suo costruttore di moduli separato. Se vuoi creare moduli di iscrizione solo con Elementor, avrai bisogno di una licenza Pro.

Mentre Elementor è un fantastico strumento per la creazione di pagine, il costruttore di moduli di Elementor è più basilare e presenta varie limitazioni rispetto a costruttori di moduli avanzati come WPForms.

Come posso stilizzare il mio modulo di iscrizione per abbinarlo al branding del mio sito web?

Il modo più semplice per abbinare i tuoi moduli di iscrizione al branding del sito web è utilizzare i colori del tema del tuo sito per diversi aspetti del tuo modulo. WPForms sceglie automaticamente i colori primari e secondari del tuo tema, quindi puoi facilmente utilizzare questi colori per diversi componenti del tuo modulo come bordi, etichette e pulsanti.

Puoi accedere a queste impostazioni di personalizzazione dello stile nel widget Elementor WPForms facendo clic sulla scheda Stile. Lì, troverai l'opzione per cambiare il colore di diverse parti del tuo modulo scegliendo tra i colori del tema disponibili per abbinarli al tuo branding. Non è necessaria alcuna codifica!

Posso usare CSS personalizzato per stilizzare il mio modulo di iscrizione?

Sì, puoi aggiungere classi CSS personalizzate al tuo modulo di iscrizione se stai usando WPForms. Per fare ciò, fai clic su Stile dopo aver selezionato il widget WPForms in Elementor, quindi fai clic su Avanzate. Puoi quindi inserire CSS personalizzato per stilizzare il tuo modulo di iscrizione.

Come posso creare un modulo di iscrizione multi-step?

WPForms ti offre diversi modi per creare un modulo di iscrizione multi-step. Puoi aggiungere interruzioni di pagina per dividere il tuo modulo in più pagine, oppure puoi usare il componente aggiuntivo Lead Forms che trasforma automaticamente un modulo normale in un modulo di iscrizione multi-step con interruzioni di pagina nel mezzo.

Successivamente, Crea un modulo ConvertKit personalizzato

WPForms si integra con varie piattaforme di marketing, tra cui ConvertKit. Abbiamo una guida dedicata che ti mostra come creare un modulo ConvertKit personalizzato. Assicurati di consultarla!

Puoi anche confrontare opzioni gratuite per moduli d'ordine se vendi prodotti online.

Crea moduli di iscrizione personalizzati in Elementor

Pronto a creare il tuo modulo di iscrizione personalizzato? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.