Comment supprimer les champs de nom du module Divi Email Optin

Dans le tutoriel d'aujourd'hui, nous allons vous montrer comment supprimer les champs de nom du module Divi Email Optin. La suppression des champs de nom ne consiste pas seulement à s'assurer que les champs de nom et de famille, qui sont standard dans le module d'option d'abonnement aux e-mails, n'apparaissent pas visuellement. C'est aussi une question de fonctionnalité. Par défaut, le prénom et l'adresse e-mail sont requis pour un abonnement. C'est pourquoi le simple fait de rendre les champs de nom invisibles n'aidera pas le processus.

Pour vous aider à le faire, nous allons cependant vous montrer comment vous débarrasser visuellement des champs de nom et le faire fonctionner également de manière fonctionnelle.

Résultat

Si vous suivez ce post pas à pas, vous obtiendrez le résultat suivant :

Pourquoi vous voudriez supprimer les champs de nom du module Email Optin

Il y a probablement plusieurs raisons pour lesquelles vous voudriez supprimer les champs de nom. Si vous ne savez pas pourquoi ; jetez un oeil à deux raisons énumérées ci-dessous.

Pour économiser le temps de vos visiteurs

La première raison tient compte de l'expérience utilisateur. En ne demandant qu'un champ email, vos visiteurs auront la possibilité d'interagir rapidement avec vous. La seule chose qu'ils auront à faire est de saisir leur adresse e-mail et vous leur fournirez le contenu qui les intéresse.

Pour réduire la barrière/compter sur un comportement rapide

Si les gens devaient remplir tous les modules optin qu'ils rencontrent sur le Web, ils manqueraient probablement de temps. Les formulaires Optin font partie de toutes sortes de sites Web de nos jours. L'époque où les gens étaient fascinés par eux est révolue. S'ils voient qu'ils doivent faire trop d'efforts (lire : ils doivent remplir trop de champs obligatoires) pour s'abonner, ils l'ignoreront probablement. Cependant, si vous ne demandez que l'adresse e-mail, il est plus probable qu'ils seront d'accord. Il faut au maximum 5 secondes pour saisir une adresse e-mail (ce qui est inférieur à la durée d'attention moyenne de 7 secondes dont disposent les humains).

Comment supprimer les champs de nom du module Divi Email Optin

Abonnez-vous à notre chaîne Youtube

Sans plus tarder, faisons en sorte que cela fonctionne.

Ajouter une nouvelle page

La première chose que vous devez faire est d'ajouter une nouvelle page ou d'ouvrir la page sur laquelle vous souhaitez placer le module Email Optin avec le champ e-mail uniquement.

Ajouter un module d'option de messagerie

Une fois que vous êtes sur cette page, ajoutez le module Email Optin là où vous le souhaitez. Une fois que vous aurez prévisualisé la page avec le module Email Optin, vous verrez qu'elle ressemblera à ceci :

Si vous continuez et cliquez sur le bouton d'abonnement, sans remplir aucun champ, vous verrez que cela ne fonctionnera pas. Par défaut, le module Email Optin nécessite un prénom et une valeur d'e-mail pour fonctionner. C'est pourquoi le simple fait de faire disparaître les champs (mais toujours exister) ne fonctionnera pas. Les supprimer ne fonctionnera pas non plus.

La chose que vous pouvez faire, cependant, est d'ajouter une valeur par défaut au champ du prénom. Vous pouvez utiliser quelque chose comme « * », qui garantira simplement que le champ a une valeur. Une autre chose que nous devrons faire est de supprimer les étiquettes liées aux champs de saisie. Pour réaliser tout cela, nous utiliserons du code jQuery et du code CSS.

Ajouter un code CSS

Nous allons commencer par ajouter le code CSS. Le code CSS garantira uniquement que les deux champs ne seront pas affichés sur la page. Pour la partie fonctionnelle, nous devrons utiliser quelques lignes de code jQuery.

Vous pouvez faire en sorte que le code CSS s'applique à une page en particulier ou à l'ensemble du site Web. La méthode que vous utiliserez dépendra probablement de la fréquence à laquelle vous souhaitez utiliser le module de code avec le champ e-mail uniquement. Si vous souhaitez utiliser le module Email Optin plusieurs fois et sur différentes pages, utilisez la deuxième méthode. Si vous voulez que cela ne compte que pour une seule page, utilisez la première méthode.

Ajouter du code CSS à une page en particulier

Pour ajouter le code CSS à une page en particulier, cliquez sur l'icône suivante dans la page sur laquelle vous travaillez :

Dans l'écran qui apparaît, copiez et collez les lignes de code CSS suivantes :

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

Ajouter du code CSS aux options du thème

Pour ajouter le code CSS à l'ensemble du site Web, accédez à votre tableau de bord WordPress > Divi > Options du thème > Faites défiler l'onglet Général et ajoutez les lignes de code CSS suivantes au champ CSS personnalisé :

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

Ajouter du code jQuery

Ensuite, nous allons ajouter le code jQuery nécessaire. Pour ajouter le code jQuery, vous avez également deux possibilités : ajouter le code pour qu'il s'applique à une page en particulier ou ajouter le code à l'ensemble du site Web.

Ajouter du code jQuery à une page en particulier (module de code)

Pour ajouter le code jQuery à une page en particulier, ajoutez un module de code juste en dessous du module Email Optin. Ouvrez le module de code et placez-y les lignes de code jQuery suivantes :

<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>

Depuis que nous avons supprimé le libellé, nous nous assurons que la valeur du champ d'adresse e-mail ne contient rien. Pour compenser l'étiquette et pour s'assurer que les gens sachent quoi taper, nous utilisons à la place un espace réservé. Dans ce cas, l'espace réservé est « adresse e-mail », mais n'hésitez pas à le transformer en autre chose.

Ajouter du code jQuery aux options du thème

Pour que le code jQuery s'applique à l'ensemble du site Web, vous pouvez le placer dans les options du thème. Pour cela, rendez-vous dans votre Tableau de bord WordPress > Divi > Options du thème > Intégration et placez les lignes de code jQuery suivantes dans l'en-tête de votre site 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>

Résultat

Si vous suivez toutes les étapes de cet article et appliquez le code CSS et jQuery à une page en particulier ou à toutes les pages de votre site Web, vous devriez obtenir le résultat suivant :

Dernières pensées

Dans cet article, nous vous avons montré comment réaliser un module Email Optin qui n'a qu'un champ d'adresse e-mail. La raison pour laquelle vous pourriez vouloir obtenir un tel résultat est celle de l'efficacité. En ne demandant que l'adresse e-mail, votre public devra faire moins d'efforts pour s'abonner et vous pourrez créer votre liste de diffusion plus rapidement. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par adichrisworo / shutterstock.com