Comment utiliser les unités de longueur vw et vh pour concevoir un formulaire de contact réactif dans Divi

Publié: 2019-06-12

Les formulaires Web sont extrêmement cruciaux pour le succès de votre site Web. Cela est logique étant donné que la plupart des entreprises en ligne dépendent de formulaires tels que les formulaires d'inscription 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 auront 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 à l'aide des unités de longueur vw et vh dans Divi. Nous verrons comment dimensionner et espacer les champs de saisie et les boutons qui s'ajusteront en fonction de la largeur et de la hauteur de votre navigateur. Cela vous permettra de maximiser la visibilité du formulaire sur tous les appareils, même pour la vue paysage sur les téléphones mobiles.

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

Commençons.

Aperçu

Bureau

Tablette

Téléphone (portrait)

Téléphone (paysage)

Téléchargez GRATUITEMENT la mise en page du formulaire de contact réactif (inclut également un formulaire d'option d'e-mail réactif !)

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! 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 pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

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 tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous aurez besoin de la configuration suivante :

Le thème Divi installé et actif
Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
Votre boisson préférée (facultatif, sauf si vous n'avez pas encore pris votre café)

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

Pourquoi utiliser les unités de longueur vw et vh pour une conception réactive

Les unités de longueur sont les valeurs nécessaires pour dimensionner et espacer les éléments sur votre page Web. Les unités de longueur les plus couramment utilisées dans la conception de sites Web sont probablement les pixels et les pourcentages. Par exemple, un pixel est une unité de longueur courante utilisée pour dimensionner le texte, l'unité de longueur em est couramment utilisée pour la hauteur de ligne et une unité de longueur en pourcentage est couramment utilisée pour l'espacement et le dimensionnement des éléments pour une conception réactive. En fait, les valeurs d'unité de longueur par défaut des éléments Divi (modules, lignes, sections) sont construites à l'aide de ces unités de longueur communes.

Les unités de longueur seront soit absolues (restent de la même taille quelle que soit la taille des autres éléments) ou relatives (changement/échelle en fonction de la taille des autres éléments). Par exemple, un pixel est une unité de longueur absolue. Ainsi, si un corps de texte a une taille de police de 16px, le texte restera 16px quelle que soit la taille de son conteneur. Mais pourcentage et em sont tous deux des unités de longueur relative. Ainsi, une hauteur de ligne qui a une valeur em s'ajustera au fur et à mesure que la taille du texte de l'élément change. Et puisque le pourcentage est également une unité de longueur relative, une rangée avec une largeur de 80% va représenter 80% de son conteneur (ou section).

Les unités de longueur vw et vh sont également des unités de longueur relatives, mais au lieu d'être relatives au conteneur parent des éléments, elles sont relatives à la fenêtre d'affichage 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 sur tous les navigateurs, car elle sera mise à l'échelle en fonction de la fenêtre d'affichage. Cela rend la taille de chaque élément plus prévisible et facile à gérer sans avoir à trop se soucier de donner à chaque élément une taille différente sur chaque appareil ou un point d'arrêt réactif. L'unité de longueur vh est particulièrement pratique pour les écrans de téléphone portable car elle prendra en compte la hauteur de la fenêtre du téléphone en mode portrait et paysage.

Cette technique fonctionne mieux pour les conceptions qui dépendent de grands écrans pleine largeur sur le bureau.

Pour une explication plus détaillée des unités de longueur, consultez ce guide sur l'utilisation des unités de longueur dans Divi.

Partie 1 : Concevoir un formulaire de contact responsive dans Divi

Création de la section et de la ligne

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

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

Ensuite, ouvrez les paramètres de ligne et donnez-lui un dégradé d'arrière-plan.

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

Ensuite, redimensionnons la ligne à l'aide de l'unité de longueur vw afin qu'elle évolue avec le navigateur.

Largeur : 66vw (ordinateur de bureau), 66vw (tablette), 100 % (téléphone)
Largeur maximale : 66vw (ordinateur de bureau), 66vw (tablette), 100 % (téléphone)
Hauteur minimale : 100 vh (téléphone)

Remplissage : 0px en haut, 0px en bas

La valeur 66vw garantira que la ligne restera environ les deux tiers de la largeur de la fenêtre du navigateur. La valeur 100vh sur l'affichage du téléphone garantira que la hauteur de la ligne est égale à 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, 100vw ne tiendra pas compte de la largeur de la barre de défilement lorsque vous faites défiler la page. Il est donc toujours préférable d'utiliser le pourcentage pour les écrans pleine largeur.

Création du formulaire de contact

Avec notre ligne en place, nous pouvons maintenant ajouter le module de 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

Créer des champs en pleine largeur

Pour cette conception, je vais utiliser des champs pleine largeur. Cela me permettra d'ajouter un espacement cohérent entre les champs (puisqu'aucun flotteur n'est utilisé) et cela me permettra de donner une largeur personnalisée à chacun des champs pour un design unique plus tard. Pour l'instant, ouvrez les paramètres des champs de nom et d'e-mail et définissez l'option « Make Fullwidth » sur « OUI ».

Optimiser les champs pour une conception réactive

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

Couleur du texte du champ : #333333
Marge des champs (ordinateur de bureau et tablette) : 2vw en haut, 2vw en bas
Marge des champs (téléphone) : 2vh en haut, 2vh en bas

Rembourrage des champs (ordinateur de bureau et tablette) : 1vw en haut, 1vw en bas, 2vw à gauche, 2vw à droite
Remplissage des champs (téléphone) : 2vh en haut, 2vh en bas, 2vh à gauche, 2vh à droite

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

Remarque : l'utilisation du 4vh pour téléphone permettra à votre taille de texte d'être ajustée à la hauteur de l'écran de votre téléphone mobile, ce qui sera utile pour afficher le formulaire en mode paysage (en tournant le téléphone sur le côté). Mais si vous souhaitez une taille de texte plus cohérente, vous pouvez utiliser une unité de longueur de pixel pour la taille du texte du champ sur l'écran du téléphone.

Conception du texte du titre

Pour le texte du titre, personnalisez les éléments suivants :

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

Optimiser le bouton pour une conception réactive

Pour le bouton du formulaire de contact, nous allons ajouter un espacement et une taille de texte similaires aux champs que nous avons conçus précédemment.

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

Taille du texte du bouton : 2,5 vw (ordinateur de bureau), 4 vh (téléphone)
Couleur du texte du bouton : #ffffff
Couleur d'arrière-plan du bouton : #333333
Largeur de la bordure du bouton : 0px
Rayon de la bordure du bouton : 0px
Police des boutons : Montserrat
Marge du bouton (bureau): 1vw en haut, 0px à gauche, 0px à droite
Marge du bouton (téléphone): 1vh haut
Rembourrage des boutons (bureau) : 3vw en haut, 3vw en bas
Rembourrage des boutons (téléphone) : 3vh en haut, 3vh en bas

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

Ajouter un espacement au formulaire de contact

Ensuite, ajoutez un peu de remplissage au formulaire de contact en utilisant l'unité de longueur vw et une ombre de boîte aux champs du formulaire comme suit :

Rembourrage (bureau) : 3vw en haut, 3vw en bas, 5vw à gauche, 5vw à droite
Rembourrage (téléphone) : 5vh en haut, 5vh en bas, 3vh à gauche, 3vh à droite

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