Come rimuovere i campi del nome del modulo Divi Email Optin

Nel tutorial di oggi, ti mostreremo come rimuovere i campi del nome del modulo Divi Email Optin. L'eliminazione dei campi del nome non significa solo assicurarsi che il campo del nome e del cognome, che sono standard nel modulo di attivazione della posta elettronica, non appaiano visivamente. Riguarda anche la funzionalità. Per impostazione predefinita, per un abbonamento sono richiesti il ​​nome e l'indirizzo e-mail. Ecco perché rendere invisibili i campi del nome non aiuterà il processo.

Tuttavia, per aiutarti a farlo, ti mostreremo come eliminare visivamente i campi del nome e farlo funzionare anche in modo funzionale

Risultato

Se segui passo passo questo post, otterrai il seguente risultato:

Perché dovresti rimuovere i campi del nome del modulo di attivazione dell'email?

Ci sono probabilmente alcuni motivi per cui vorresti rimuovere i campi del nome. Se non hai idea del perché; dai un'occhiata a due motivi elencati di seguito.

Per risparmiare tempo ai tuoi visitatori

Il primo motivo tiene a mente l'esperienza dell'utente. Richiedendo solo un campo email, i tuoi visitatori avranno la possibilità di interagire con te velocemente. L'unica cosa che dovranno fare è digitare il loro indirizzo e-mail e fornirai loro il contenuto a cui sono interessati.

Per rendere la barriera più piccola/affidarsi a un comportamento rapido

Se le persone dovessero compilare tutti i moduli optin che incontrano sul web, probabilmente finirebbero il tempo. I moduli di optin fanno parte di tutti i tipi di siti Web al giorno d'oggi. I giorni in cui le persone ne erano affascinate sono finiti. Se vedono che devono impegnarsi troppo (leggi: devono completare troppi campi obbligatori) per essere iscritti, probabilmente lo ignoreranno. Se, tuttavia, chiedi solo l'indirizzo e-mail, è più probabile che a loro vada bene. Ci vogliono al massimo 5 secondi per digitare semplicemente un indirizzo e-mail (che è inferiore alla capacità di attenzione media di 7 secondi che hanno gli umani).

Come rimuovere i campi del nome del modulo Divi Email Optin

Iscriviti al nostro canale Youtube

Senza ulteriori indugi, facciamolo funzionare.

Aggiungi nuova pagina

La prima cosa che devi fare è aggiungere una nuova pagina o aprire la pagina in cui desideri inserire il modulo Email Optin con solo il campo email.

Aggiungi modulo di attivazione e-mail

Una volta che sei su quella pagina, aggiungi il modulo Email Optin dove vuoi che si adatti. Una volta visualizzata l'anteprima della pagina con il modulo di attivazione della posta elettronica, vedrai che sarà simile a questo:

Se vai avanti e fai clic sul pulsante iscriviti, senza completare alcun campo, vedrai che non funzionerà. Per impostazione predefinita, il modulo Email Optin richiede un nome e un valore e-mail per funzionare. Ecco perché semplicemente far scomparire i campi (ma esistono ancora) non funzionerà. Anche rimuoverli non funzionerà.

La cosa che puoi fare, tuttavia, è aggiungere un valore predefinito al campo del nome. Potresti usare qualcosa come '*', che assicurerà solo che il campo abbia un valore. Un'altra cosa che dovremo fare è eliminare le etichette che sono collegate ai campi di input. Per ottenere tutto ciò, utilizzeremo del codice jQuery e del codice CSS.

Aggiungi codice CSS

Inizieremo aggiungendo il codice CSS. Il codice CSS assicurerà esclusivamente che i due campi non vengano visualizzati nella pagina. Per la parte funzionale, dovremo utilizzare alcune righe di codice jQuery.

Puoi fare in modo che il codice CSS si applichi a una pagina in particolare o all'intero sito web. Il metodo che utilizzerai molto probabilmente dipenderà dalla frequenza con cui desideri utilizzare il modulo codice solo con il campo email. Se desideri utilizzare il modulo di attivazione della posta più volte e su pagine diverse, utilizza il secondo metodo. Se vuoi farlo contare solo su una pagina, usa il primo metodo.

Aggiungi codice CSS a una pagina in particolare

Per aggiungere il codice CSS a una pagina in particolare, fai clic sulla seguente icona all'interno della pagina su cui stai lavorando:

All'interno della schermata che appare, copia e incolla le seguenti righe di codice CSS:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Aggiungi codice CSS alle opzioni del tema

Per aggiungere il codice CSS all'intero sito Web, vai alla dashboard di WordPress > Divi > Opzioni del tema > Scorri verso il basso la scheda Generale e aggiungi le seguenti righe di codice CSS al campo CSS personalizzato:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Aggiungi codice jQuery

Andando avanti, aggiungeremo il codice jQuery necessario. Per aggiungere il codice jQuery, hai anche due possibilità: aggiungere il codice per farlo applicare a una pagina in particolare o aggiungere il codice all'intero sito web.

Aggiungi codice jQuery a una pagina in particolare (modulo codice)

Per aggiungere il codice jQuery a una pagina in particolare, aggiungi un modulo di codice proprio sotto il modulo di attivazione della posta elettronica. Apri il Modulo Codice e inserisci le seguenti righe di codice jQuery al suo interno:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Poiché abbiamo rimosso l'etichetta, ci assicuriamo che il valore del campo dell'indirizzo email non contenga nulla. Per compensare l'etichetta e per assicurarci che le persone sappiano cosa scrivere, utilizziamo invece un segnaposto. In questo caso, il segnaposto è "indirizzo email", ma sentiti libero di trasformarlo in qualcos'altro.

Aggiungi codice jQuery alle opzioni del tema

Per applicare il codice jQuery all'intero sito Web, puoi inserirlo nelle Opzioni del tema. Per farlo, vai sul dashboard di WordPress > Divi > Opzioni del tema > Integrazione e inserisci le seguenti righe di codice jQuery nell'intestazione del tuo sito Web:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Risultato

Se segui ogni passaggio di questo post e applichi il codice CSS e jQuery a una pagina in particolare o a tutte le pagine del tuo sito web, dovresti ottenere il seguente risultato:

Pensieri finali

In questo post, ti abbiamo mostrato come ottenere un modulo di attivazione e-mail che abbia solo un campo per l'indirizzo e-mail. Il motivo per cui potresti voler ottenere tale risultato è quello dell'efficacia. Chiedendo solo l'indirizzo e-mail, il tuo pubblico dovrà fare meno sforzo per iscriversi e sarai in grado di creare la tua lista di e-mail più rapidamente. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano di adichrisworo / shutterstock.com