Comment créer des formulaires d'inscription Bloom plein écran, transparents ou pleine largeur

Dans le didacticiel d'aujourd'hui, nous allons vous montrer comment créer des formulaires d'inscription plein écran, transparents et pleine largeur avec Bloom, un plugin qui vous aide à ajouter des formulaires d'inscription à votre site Web. Nous vous guiderons, étape par étape, tout au long du processus de conception et de configuration de deux exemples de formulaires d'inscription. En suivant attentivement cet article, vous pourrez créer vous-même les formulaires d'inscription transparents et les utiliser sur n'importe quel site Web sur lequel le plug-in Bloom est installé, qu'il s'agisse de votre propre site Web ou de celui d'un client.

Avoir un ou plusieurs formulaires d'inscription sur votre site Web est quelque chose qui vous aide non seulement à rester en contact avec vos visiteurs, mais aussi à interagir avec eux. Il est difficile de trouver un site Web qui n'a pas de formulaire d'inscription de nos jours en raison des données axées sur les résultats qu'il apporte. En gagnant l'adresse e-mail de vos visiteurs au bon moment et au bon endroit, vous ferez un pas de plus pour mieux les connaître et en faire des clients et/ou des visiteurs fidèles.

Cependant, si vous préférez vous écarter des formulaires d'inscription standard, vous pouvez opter pour un formulaire d'inscription plein écran, transparent ou pleine largeur. Nous allons vous montrer les deux exemples à l'avance.

Exemple 1

Exemple 2

Créer un formulaire d'inscription plein écran et transparent avec Bloom : conseils

Le plugin Bloom offre diverses possibilités pour styliser vos formulaires d'inscription et attirer votre public de la manière qui fonctionne le mieux pour vous et vos visiteurs. En plus des modèles d'inscription existants proposés par Bloom, il existe également des options intégrées qui facilitent la création de conceptions personnalisées. Vous pouvez également ajouter du code CSS personnalisé pour obtenir des résultats plus avancés.

Cependant, lorsque vous essayez d'apporter quelques ajustements à la conception via le code CSS, vous devez garder à l'esprit certaines choses afin de ne pas perdre de temps à essayer de faire fonctionner les choses.

Activez d'abord le formulaire d'inscription

Lorsque vous concevez votre formulaire d'inscription, vous avez un bouton d'aperçu en haut de votre onglet Conception. Cela vous aide à prévisualiser les résultats que vous obtenez lors de la conception. Bien que les modifications de conception intégrées changent également automatiquement dans l'aperçu, cela ne compte pas pour le code CSS. Si vous apportez certaines modifications via votre champ CSS personnalisé dans votre onglet Conception, il se peut que certaines de ces modifications ne s'appliquent pas au formulaire d'aperçu, mais s'appliquent au formulaire d'inscription sur votre site Web.

C'est pourquoi vous devrez d'abord activer le formulaire d'inscription et l'appliquer à l'une de vos pages. Pour vous assurer que vos visiteurs ne sont pas confrontés au formulaire d'inscription pendant que vous y travaillez, vous pouvez le prévisualiser sur une nouvelle page que vous n'avez pas partagée avec vos visiteurs.

(Ou, bien sûr, sur un site de test/de test.)

Commencez par créer une nouvelle page et lui donner un nom. Vous n'avez rien à mettre dans cette page ; il doit juste exister. Pendant que vous concevez votre formulaire d'inscription, accédez à l'onglet Paramètres d'affichage. Réglez le délai sur 1 seconde afin de ne pas avoir à attendre le formulaire d'inscription à chaque fois que vous souhaitez vérifier le résultat.

Faites défiler cet onglet vers le bas et lorsque vous rencontrez l'option « Afficher sur », sélectionnez « Page ». Une fois que vous avez sélectionné « Page », vous verrez apparaître une liste des pages actives sur votre site Web. Choisissez la page que vous avez récemment créée. Assurez-vous d'afficher le formulaire d'inscription sur cette page uniquement.

Apportez les modifications en fonction de votre formulaire activé

Les modifications que vous apportez avec le code CSS ne s'appliquent pas à tous les formulaires d'opt-in ; ils ne s'appliquent qu'au formulaire d'inscription sur lequel vous travaillez spécifiquement. C'est pourquoi certaines des classes dont nous avons besoin seront uniques.

Plus tard dans cet article, nous vous montrerons comment procéder pour les exemples que nous recréons.

Commencez à créer le premier exemple

Le premier exemple que nous vous montrons comment recréer est celui de l'écran d'impression ci-dessus. Vous pouvez voir que le formulaire d'inscription semble être en plein écran. Bien que cela puisse sembler ainsi, nous n'avons créé qu'un formulaire d'inscription transparent et modifié les couleurs d'arrière-plan.

Ajouter le formulaire d'inscription

Commençons par ajouter un nouveau formulaire d'opt-in à votre site Web en vous rendant sur votre tableau de bord WordPress > Bloom > Cliquez sur « New Optin » dans le coin droit > Sélectionnez « Pop up ».

Tapez un nom pour votre formulaire et sélectionnez votre fournisseur de messagerie dans l'onglet Configuration. Lorsque cela est fait, vous pouvez accéder à l'onglet Conception. C'est l'onglet principal sur lequel nous allons nous concentrer dans cet article. Sélectionnez l'un des modèles fournis et continuez. Pour les exemples que nous créons, nous choisissons le premier de la ligne.

Paramètres de conception

Lorsque vous prévisualisez le formulaire dans l'onglet Conception sans apporter de modifications, vous verrez apparaître le formulaire d'inscription suivant :

Cela semble assez différent de ce à quoi ressemblera le résultat, mais vous pouvez également remarquer que la base du formulaire d'inscription est la même.

Titre et message d'inscription

Maintenant, pour que notre formulaire d'adhésion ressemble à l'exemple que nous vous avons montré ci-dessus, commencez par apporter les modifications suivantes aux paramètres de conception standard du titre Optin et du message Optin dans l'onglet Conception :

• Couleur du texte : #FFFFFF
• Style de texte : gras
• Orientation du texte : Centre

Paramètres d'image et optimisation du style

Faites défiler le même onglet et effectuez les ajustements suivants dans les paramètres d'image, le style optin et le style de bordure :

• Orientation de l'image : aucune image
• Couleur d'arrière-plan : clair
• Police d'en-tête : Lato
• Police de caractère : Lato
• Couleur du texte : texte sombre
• Style d'angle : coins carrés
• Orientation de la bordure : Bordure supérieure + inférieure
• Couleur de la bordure : #FFFFFF
• Style de bordure : bordure en pointillés

Style de bordure, configuration de formulaire et style de formulaire

Continuez à faire défiler vers le bas et apportez également les modifications suivantes à la configuration du formulaire et au style du formulaire :

• Orientation du formulaire : formulaire en bas
• Champ(s) de nom : Aucun champ de nom
• Texte de l'e-mail : e-mail
• Texte du bouton : ABONNEZ-VOUS !
• Orientation des champs de formulaire : champs de formulaire empilés
• Style de coin de champ de formulaire : coins arrondis
• Couleur du texte du formulaire : texte clair
• Couleur d'arrière-plan du formulaire : clair
• Couleur du bouton : #6a18a0
• Couleur du texte du bouton : clair

Style de bord de forme

La dernière modification manuelle que vous devrez apporter au formulaire d'inscription consiste à choisir le style de bord du formulaire qui est, dans ce cas, une ligne droite.

CSS personnalisé

Enfin, nous devons apporter quelques modifications CSS au formulaire pour tout mettre en place. Copiez et collez les lignes de code suivantes dans le champ CSS personnalisé :

.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Modifiez le code en fonction de votre propre formulaire d'inscription Bloom

Dans le code que nous avons partagé avec vous, vous devrez effectuer trois ajustements. Certaines classes CSS ne s'appliquent qu'à un seul formulaire d'opt-in, c'est pourquoi nous aurons besoin de savoir sur quel formulaire d'opt-in nous travaillons. La seule chose que vous aurez à faire est de changer un numéro trois fois :

Le numéro à la fin de la partie en surbrillance dans l'écran d'impression ci-dessus est 6 car c'est le 6ème de la ligne :

Ainsi, en fonction de la position qu'il occupe dans votre liste de formulaires, vous devrez ajuster le nombre.

Résultat final

Si vous prévisualisez votre formulaire d'inscription maintenant, vous remarquerez que toutes les modifications ont été apportées et que votre formulaire d'inscription ressemble à ceci :

Paramètres d'affichage

Vous pouvez maintenant accéder aux paramètres d'affichage et apporter les modifications nécessaires pour configurer votre formulaire d'inscription Bloom. Nous n'allons pas entrer dans les détails car cet article ne traitera que la partie conception de ces formulaires d'inscription.

Commencez à créer le deuxième exemple

L'exemple suivant que nous allons vous montrer n'est pas en plein écran mais en pleine largeur. Pour montrer comment nous pouvons obtenir le résultat, nous allons utiliser le même formulaire d'inscription que dans l'exemple précédent, mais y apporter quelques petites modifications et ajouter un code CSS différent.

Paramètres de conception

Il n'y a que trois choses que nous devrons faire différemment dans les paramètres de conception intégrés. Rappelles toi; nous utilisons le formulaire d'inscription que nous avons créé dans l'exemple précédent. Mis à part les trois choses que nous allons mentionner, les mêmes paramètres intégrés que pour le premier exemple s'appliquent. La première chose que vous devrez faire est de mettre l'orientation de la bordure sur "Pas de bordure".

Faites défiler vers le bas et sélectionnez « Texte sombre » pour la couleur du texte du formulaire et utilisez « #724501 » comme couleur du bouton.

CSS personnalisé

Enfin, nous devrons ajouter quelques lignes de code CSS à la zone CSS personnalisée :

@media only screen and (min-width: 981px){ 
.et_bloom .et_bloom_popup:after{ 
margin-top: 12% !important; 
height: 50% !important; 
background: url(""); 
border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important; 
box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-webkit-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-moz-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
}
.et_bloom .et_bloom_form_container .et_bloom_close_button {
right: -250px !important;
top: -20% !important;
}}

@media only screen and (max-width: 981px){
.et_bloom .et_bloom_popup:after{
background: url("");
} }

.et_bloom .et_bloom_form_container .et_bloom_popup_input {
background: #FFFFFF !important;
}

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important; margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Remplacer les images d'arrière-plan

La dernière chose à faire est de remplacer les images d'arrière-plan utilisées par l'une des URL de votre dossier wp-content ou ailleurs. La première URL qui est marquée dans l'écran d'impression ci-dessous s'applique au bureau et la seconde à la tablette et au téléphone.

Résultat final

Et tu as fini! Votre deuxième formulaire d'inscription devrait maintenant ressembler à ceci :

Dernières pensées

Les possibilités que vous avez avec bloom pour créer de beaux formulaires d'inscription avec lesquels vos utilisateurs s'engageront sont infinies. Ceux que nous vous avons montré comment faire dans cet article ne sont qu'un exemple de la créativité que vous pouvez obtenir. Si vous avez des questions ou des suggestions, n'hésitez pas à 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 !