Sélectionner une page


Les formulaires Web sont extrêmement importants pour le succès de votre site Web. Cela a du sens car la plupart des entreprises en ligne s’appuient sur des formulaires tels que les inscriptions par e-mail et les formulaires de contact pour gagner de l’argent en créant des listes de diffusion et en communiquant avec des acheteurs potentiels. Et de nos jours, nous devons nous assurer que nous concevons des formulaires réactifs qui ont fière allure sur tous les navigateurs et appareils mobiles.

Dans ce tutoriel, je vais vous montrer comment concevoir un formulaire de contact réactif avec des unités de longueur vw et vh dans Divi. Nous vous expliquerons comment ajuster la taille et l’espacement des champs de saisie et des boutons, qui s’adaptent à la largeur et à la hauteur de votre navigateur. Cela vous permet de maximiser la visibilité du formulaire sur tous les appareils, y compris la vue paysage sur les téléphones mobiles.

Pour ce faire, nous utiliserons les paramètres intégrés de Divi, qui vous permettent de personnaliser facilement le texte, les champs et les boutons du formulaire.

Commençons.

Avant goût

Bureau

tablette

Téléphone (portrait)

Téléphone (paysage)

Téléchargez GRATUITEMENT la mise en page du formulaire de contact réactif (comprend également un formulaire d’inscription par e-mail réactif!)

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les télécharger à l’aide du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON dans le Divi Builder.

Passons au didacticiel.

Ce dont vous avez besoin pour commencer

Pour commencer, vous devez disposer de la configuration suivante:

  1. Le thème Divi installé et actif
  2. Une nouvelle page créée pour reconstruire le frontal à partir de zéro (Visual Builder)
  3. Votre boisson préférée (facultatif sauf si vous n’avez pas encore pris de café)

Après cela, vous aurez une toile vierge pour commencer à créer les formulaires de réponse dans Divi.

Pourquoi utiliser des unités de longueur vw et vh pour un joli design?

Les unités de longueur sont les valeurs nécessaires pour la taille et l’espacement des éléments sur votre site Web. Les unités de longueur les plus couramment utilisées dans la conception Web sont probablement les pixels et les pourcentages. Par exemple, un pixel est une unité de longueur couramment utilisée pour formater du texte, l’unité de longueur em est couramment utilisée pour la hauteur de ligne et un pourcentage de longueur est couramment utilisé pour l’espacement et la taille des éléments pour un design agréable. En fait, les valeurs par défaut des unités de longueur des éléments Divi (modules, lignes, sections) sont créées en utilisant ces unités de longueur communes.

Les unités de longueur sont soit absolues (restent les mêmes quelle que soit la taille des autres éléments) ou relatives (changement / mise à l’échelle en fonction de la taille des autres éléments). Par exemple, un pixel est une unité absolue de longueur. Ainsi, si un corps de texte a une taille de police de 16 pixels, le texte restera 16 pixels quelle que soit la taille de son conteneur. Mais pourcentage et em sont tous deux des unités relatives de longueur. Ainsi, une hauteur de ligne avec une valeur em est ajustée lorsque la taille du texte de l’élément change. Et comme le pourcentage est également une unité relative de longueur, une ligne de 80% de large représentera 80% de son conteneur (ou section).

Les unités de longueur vw et vh sont également des unités relatives de longueur, mais au lieu d’être relatives au conteneur d’élément parent, elles sont relatives à la fenêtre réelle du navigateur. La largeur de la fenêtre (vw) est relative à la largeur du navigateur et la hauteur de la fenêtre (vh) est relative à la hauteur du navigateur. L’utilisation de ces unités de longueur est un moyen de garder votre conception cohérente dans tous les navigateurs, car elle sera mise à l’échelle pour s’adapter à la fenêtre. Cela rend la taille de chaque élément plus prévisible et plus facile à gérer sans avoir à vous soucier d’attribuer une taille différente ou un point d’arrêt réactif à chaque élément sur chaque appareil. L’unité de longueur vh est particulièrement utile pour les écrans de téléphone portable car elle prend en compte la hauteur de la fenêtre de visualisation du téléphone au format portrait et paysage.

Cette technique fonctionne mieux pour les conceptions qui dépendent de grands écrans pleine largeur sur le bureau qui peuvent être facilement mis à l’échelle lorsque l’utilisateur ajuste la largeur du navigateur.

Plus d’informations sur les unités de longueur peuvent être trouvées ici Instructions pour l’utilisation des unités de longueur dans Divi.

Partie 1: Conception d’un formulaire de réponse dans Divi

Créer la section et la ligne

Créez une section régulière avec une seule ligne de colonne. Avant d’ajouter des modules, mettez à jour les paramètres de la section comme suit:

Dégradé d’arrière-plan Couleur gauche: # fd7b5b
Couleur d’arrière-plan droite du dégradé: # a92200

Ensuite, ouvrez les paramètres de ligne et spécifiez le dégradé d’arrière-plan.

Dégradé d’arrière-plan Couleur gauche: # ffdb8b
Couleur d’arrière-plan droite du dégradé: # fdb15b

Ensuite, nous mettons à l’échelle la ligne avec l’unité de longueur vw afin qu’elle s’adapte au navigateur.

Largeur: 66vw (bureau), 66vw (tablette), 100% (téléphone)
Largeur maximale: 66 VW (bureau), 66 VW (tablette), 100% (téléphone)
Altitude min.: 100vh (téléphone)

Rembourrage: 0px au-dessus, 0px en dessous

La valeur 66vw garantit que la ligne reste environ les deux tiers de la largeur de la fenêtre du navigateur. La valeur 100VH sur l’écran du téléphone garantit que la hauteur de la ligne est la même que la hauteur de la fenêtre du téléphone (facultatif mais une touche agréable pour un affichage optimal de la zone de contenu de la ligne sur les téléphones).

Notez que la largeur de la ligne est définie sur 100% (pas 100vw). En effet, 100 VW ne prend pas en compte la largeur de la barre de défilement lors du défilement de la page. Par conséquent, il est toujours préférable d’utiliser le pourcentage pour les annonces pleine largeur.

Créer un formulaire de contact

Avec notre ligne, nous pouvons maintenant ajouter le module formulaire de contact à la ligne.

Une fois le formulaire de contact ajouté, mettez à jour le contenu comme avec un titre et désactivez le captcha.

Titre: Contactez-nous
Afficher le captcha: NON

Faire des champs en pleine largeur

Pour cette conception, j’utiliserai des carrés pleine largeur. De cette façon, je peux ajouter un espacement cohérent entre les champs (car aucun nombre à virgule flottante n’est utilisé) et attribuer une largeur personnalisée à chaque champ pour une conception unique plus tard. Ouvrez d’abord les paramètres des champs Nom et E-mail et réglez l’option « Créer pleine largeur » sur « OUI ».

Optimisation des champs pour un design réactif

Revenez maintenant aux paramètres du formulaire de contact. Nous pouvons maintenant personnaliser les champs du formulaire avec les unités de longueur vw et vh. Mettez à jour les éléments suivants:

Couleur du texte du champ: # 333333
Bord de champ (bureau et tablette): 2vw ci-dessus, 2vw ci-dessous
Marge des champs (téléphone): 2vh vers le haut, 2vh vers le bas

Remplissage sur le terrain (bureau et tablette): 1 VW ci-dessus, 1 VW ci-dessous, 2 VW gauche, 2 VW droite
Rembourrage des champs (téléphone): 2vh vers le haut, 2vh vers le bas, 2vh vers la gauche, 2vh vers la droite

Taille du texte des champs: 2.5vw (bureau), 4vh (téléphone)

Remarque: si vous utilisez 4vh pour le téléphone, la taille de votre texte peut être mise à l’échelle avec la hauteur de l’écran de votre téléphone mobile. Ceci est utile pour afficher le formulaire dans l’orientation paysage du téléphone (en tournant le téléphone sur le côté). Cependant, si vous souhaitez une taille de texte plus cohérente, vous pouvez utiliser une unité de longueur en pixels pour la taille du texte du champ sur l’écran du téléphone.

Rédaction du texte du titre

Ajustez les éléments suivants pour le texte du titre:

Niveau de titre: H2
Police du titre: Karla
Poids de la police du titre: gras
Couleur du texte du titre: # f56845
Taille du texte du titre: 7vw (bureau), 8vh (téléphone)
Espacement des lettres de titre: 1vw
Hauteur de la ligne de titre: 0,6em

Optimisation du bouton pour un design réactif

Pour le bouton Formulaire de contact, nous ajoutons un espacement et des tailles de texte similaires aux champs que nous avons conçus précédemment.

Cliquez ici pour utiliser des styles de boutons personnalisés et mettre à jour les éléments suivants:

Taille du texte du bouton: 2.5vw (bureau), 4vh (téléphone)
Couleur du texte du bouton: #ffffff
Couleur d’arrière-plan du bouton: # 333333
Largeur du cadre du bouton: 0px
Rayon du bord du bouton: 0px
Police du clavier: Montserrat
Bordure du bouton (bureau): 1 VW en haut, 0 pixels à gauche, 0 pixels à droite
Bord du bouton (téléphone): 1vh au dessus
Rembourrage des touches (bureau): 3vw vers le haut, 3vw vers le bas
Rembourrage des touches (téléphone): 3vh vers le haut, 3vh vers le bas

Button Box Shadow: voir capture d’écran
Position horizontale de l’ombre de la boîte: 2em
Position verticale de l’ombre de la boîte: 0,4 em
Couleur de l’ombre: rgba (245,104,69,0,29)

Ajouter de l’espace au formulaire de contact

Ensuite, ajoutez le formulaire de contact avec l’unité de longueur vw et une ombre de boîte comme ceci:

Rembourrage (bureau): 3 VW ci-dessus, 3 VW ci-dessous, 5 VW gauche, 5 VW droite
Rembourrage (téléphone): 5vh vers le haut, 5vh vers le bas, 3vh vers la gauche, 3vh vers la droite

Button Box Shadow: voir capture d’écran
Position horizontale de l’ombre de la boîte: 2em
Position verticale de l’ombre de la boîte: 0,4 em
Couleur de l’ombre: rgba (245,104,69,0,29)

Résultat jusqu’à présent

Bureau

tablette

Téléphone (portrait)

Téléphone (paysage)

La touche finale

Ajuster la largeur des champs de formulaire

Vous pouvez ajuster la largeur de chaque boîte pour une option de conception unique. Ouvrez les paramètres du champ de nom et mettez à jour la largeur comme suit:

Largeur: 50% (bureau), 100% (téléphone)

Ouvrez ensuite les paramètres du champ d’e-mail et mettez à jour la largeur comme suit:

Largeur: 65% (bureau), 100% (téléphone)

Ensuite, ouvrez les paramètres du champ de message et mettez à jour la largeur comme suit:

Largeur: 80% (bureau), 100% (téléphone)

Amenez le bouton sur toute sa largeur

Pour obtenir toute la largeur du bouton du formulaire de contact réactif, vous devez d’abord ajouter le CSS personnalisé suivant dans le champ de saisie du bouton de contact:

width: 97%;

Ensuite, ouvrez les paramètres de la page et ajoutez le CSS personnalisé suivant:

.et_contact_bottom_container {
  float: none;
}

Conception finale

Une fois que nous avons terminé, jetez un œil au résultat final de notre formulaire de réponse. Notez comment le formulaire de contact est mis à l’échelle lorsque vous ajustez la largeur du navigateur sur le bureau et la tablette, et comment la conception s’adapte lorsque vous ajustez la hauteur de la fenêtre sur les téléphones mobiles.

Bureau

tablette

Téléphone (portrait)

Téléphone (paysage)

Utilisez les mêmes paramètres de thème pour les formulaires d’abonnement par e-mail

Vous pouvez également utiliser les mêmes unités de longueur vw et vh pour créer un joli formulaire d’abonnement par courrier électronique. Voici une capture d’écran d’un formulaire d’inscription par e-mail inclus dans le téléchargement gratuit de cet article.

Bureau

tablette

Téléphone (portrait)

Téléphone (paysage)

Dernières pensées

En utilisant des unités de longueur vw et vh, nous pouvons créer un formulaire de contact réactif (ou tout autre formulaire Divi) qui convient à toutes les tailles de navigateur et à tous les appareils mobiles. La conception réactive met à l’échelle les éléments du formulaire en douceur lorsque vous ajustez la largeur du navigateur. Si vous utilisez l’unité de longueur vh sur l’écran du téléphone, vous pouvez également optimiser le formulaire pour l’affichage du téléphone en orientation portrait et paysage.

N’oubliez pas de vérifier cela Téléchargement Gratuit pour obtenir un exemple fonctionnel d’un formulaire de contact réactif et d’une connexion par e-mail.

J’espère que cet article pourra vous donner quelques conseils sur la façon de créer des formulaires attrayants pour votre prochain projet.

J’ai hâte de vous entendre dans les commentaires.

De bas en haut!





Source link

Recent Posts