Eléments sociaux Chapitre 6

ÉLÉMENTS SOCIAUX

CHAPITRE 6 : FORMULAIRE DE CONTACT

MODULE 7

Le module de formulaire de contact

La communication est la pierre angulaire de toute entreprise. Avec Divi, vous pouvez facile- ment ajouter des formulaires de contact à n'importe quelle partie de votre site Web.

Comment ajouter un module de formulaire de contact à votre page

Avant de pouvoir ajouter un module de formulaire de contact à votre page, vous devez d'abord sauter dans le Divi Builder.

Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page.

Les nouveaux modules ne peuvent être ajoutés qu'à l'intérieur des rangées.

Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page. Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.

Localisez le module du formulaire de contact dans la liste des modules et cliquez dessus pour l'ajouter à votre page.

La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot "formulaire de contact" puis cliquer sur "entrer" pour trouver et ajouter automatiquement le module de formulaire de contact! Une fois le module ajouté, vous serez accueilli avec la liste d'options du module.

Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Exemple d'utilisation: Ajouter un formulaire de contact à une page de contact

Le premier endroit où vous devriez envisager de mettre un formulaire de contact sur votre site Web est, bien sûr, la page de contact.

En utilisant le Visual Builder, insérez une nouvelle section standard avec une rangée pleine largeur (1 colonne).

Ajoutez ensuite le module Formulaire de contact à votre ligne.

Mettez à jour les paramètres du formulaire de contact comme suit:

Options de contenu

Titre:[entrez le titre du formulaire] J'utilise cette section de titre comme un appel à l'action plus qu'un simple titre.

Options de conception

Police de titre: Affichage Playfair

Taille de la police du titre: 48px (bureau), 40px (comprimé), 30px (téléphone)

Hauteur de la ligne de titre: 1,5em

Police de zone de formulaire : Montserrat (en gras)

Taille de police du champ de formulaire: 14px

Couleur du texte du champ de formulaire : #aaaaaaaaaaaaa

Espacement entre les lettres des champs du formulaire: 1px

Formulaire Hauteur de la ligne de champ: 1.7em

Couleur de la bordure: #d4d4d4d4

Utilisez des styles personnalisés pour le bouton: OUI

Taille du bouton Texte: 16

Bouton Texte Couleur: #ffffff

Couleur d'arrière-plan du bouton: #202020

Bouton Bordure Largeur: 12

Couleur de la bordure des boutons: #202020

Rayon de bordure du bouton: 0

Espacement des lettres des boutons: 2

Police de Bouton: Montserrat

Bouton Ajouter Icône: Non

Bouton Hover Couleur d'arrière-plan: #33333333

Bouton Hover Border Couleur: #33333333 Bouton

Hover Border Radius: 0

Espacement entre les lettres des boutons: 2

Sauvegarder les paramètres

Voilà, c'est ça. Le design est à la fois moderne et volontairement simple afin d'assurer la lisibilité et la convivialité.

Maintenant que vous avez vu le module de formulaire de contact en action, plongez dans TOUS ses paramètres dans les sections ci-dessous. Nous avons fourni un récapitulatif détaillé de ce que vous trouverez dans chaque onglet des paramètres du module et une explication de ce que chacun fait.

Formulaire de contact

Intitulé

Message de réussite

Bouton Envoyer Texte

Courriel

Tapez le message que vous voulez afficher après la soumission du formulaire.

Laissez en blanc pour garder le message par défaut:"Merci de nous contacter".

Définissez un titre pour votre formulaire de contact.

Entrez l'adresse e-mail où les messages doivent être envoyés.

Note: La distribution de courriels et la prévention du spam sont des processus complexes.

Nous recommandons l'utilisation d'un service de livraison tel que Mandrill, SendGrid, ou d'autres services similaires pour s'assurer de la livraison des messages qui sont soumis par le biais de ce formulaire.

Vous pouvez définir ici le texte du bouton d'envoi du formulaire.

Modèle de message

Afficher Captcha

Activer Rediriger URL

Rediriger URL

Ici, vous pouvez activer ou désactiver le captcha en utilisant cette option.

Ici, vous pouvez définir le motif personnalisé pour le message e-mail. Les champs doivent être inclus dans le format suivant - %%%field_id%%.

Par exemple, si vous voulez inclure le champ avec id = téléphone et le champ avec id = message, alors vous pouvez utiliser le motif suivant: Mon message est %%%message%%% et le numéro de téléphone est %%phone%%%%.

Laisser en blanc par défaut.

Ici, vous pouvez taper l'URL Rediriger où vous voulez que les utilisateurs aillent après une soumission de formulaire.

Ici, vous pouvez choisir de rediriger les utilisateurs vers une autre URL après la soumission du formulaire.

Couleur de fond du formulaire

Étiquette Admin

Cette option modifie l'arrière-plan de vos champs de formulaire.

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.

Formulaire de contact

Police de titre

Taille de police du titre

Couleur du texte de titre

Espacement des lettres de titre

Ici, vous pouvez ajuster la taille de votre texte de titre.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police de votre texte de titre en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque lettre de votre titre, utilisez le curseur de champ pour ajuster l'espace ou entrez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte de titre, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Hauteur de la ligne de titre

Police du champ de formulaire

Taille du champ du formulaire

Champ du formulaire Couleur du texte

Vous pouvez changer la police du texte de votre champ de formulaire en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur du texte de votre champ de formulaire, choisissez la couleur souhaitée dans le sélecteur de couleurs à l'aide de cette option.

Ici, vous pouvez ajuster la taille du texte de votre champ de formulaire.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Espacement entre les lettres des champs du formulaire

Formulaire Hauteur de la ligne de champ

Rayon de bordure d'entrée

Utiliser la bordure

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque lettre dans le texte de votre champ de formulaire, utilisez le curseur de zone pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie situé à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

L'activation de cette option placera une bordure autour de vos champs de formulaire.

Cette bordure peut être personnalisée à l'aide des paramètres conditionnels suivants.

Vous pouvez sélectionner ici la valeur CSS du rayon de bordure pour tous les champs du formulaire dans votre formulaire de contact.

L'augmentation du rayon de la bordure donnera à vos champs de formulaire des coins arrondis.

Couleur de la bordure

Largeur de bordure

Style de bordure

Utilisez des styles personnalisés pour les boutons

Par défaut, les bordures ont une largeur de 1 pixel.

Vous pouvez augmenter cette valeur en faisant glisser le curseur de plage ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur.

Unités de mesure personnalisées des mesures prises en charge, ce qui signifie que vous pouvez changer l'unité par défaut de "px" à quelque chose d'autre, comme em, vh, vw, etc.

Cette option affecte la couleur de votre bordure.

Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l'appliquer à votre bordure.

L'activation de cette option vous permettra de découvrir les différents paramètres de personnalisation des boutons que vous pouvez utiliser pour modifier l'apparence du bouton de votre module.

Les bordures prennent en charge huit styles différents, y compris: solide, pointillé, pointillé, pointillé, double, rainuré, faîtage, encoches et début. Sélectionnez le style désiré dans le menu déroulant pour l'appliquer à votre bordure.

Taille du texte des boutons

Couleur du texte des boutons

Couleur d'arrière-plan du bouton

Bouton Bordure Largeur de bordure

Par défaut, les boutons assument la couleur d'accent de votre thème telle que définie dans le Thème Customizer.

Cette option vous permet d'attribuer une couleur de texte personnalisée au bouton dans ce module.

Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur du bouton.

Ce réglage peut être utilisé pour augmenter ou diminuer la taille du texte dans le bouton.

Le bouton s'ajuste au fur et à mesure que la taille du texte augmente ou diminue.

Tous les boutons Divi ont un bord de 2px par défaut.

Ce paramètre permet d'augmenter ou de diminuer la taille de cette bordure. Les bordures peuvent être supprimées en entrant une valeur de 0.

Par défaut, les boutons ont une couleur de fond transparente.

Ceci peut être modifié en sélectionnant la couleur de fond désirée dans le sélecteur de couleurs.

Couleur de la bordure du bouton

Bouton Border Radius Rayon de la bordure

Espacement des lettres des boutons

Police de bouton

Le rayon de la bordure affecte l'arrondi des coins de vos boutons.

Par défaut, les boutons dans Divi ont un petit rayon de bordure qui arrondit les coins de 3 pixels.

Vous pouvez le diminuer à 0 pour créer un bouton carré ou l'augmenter significativement pour créer des boutons à bords circulaires.

Par défaut, les bordures de boutons assument la couleur d'accent du thème définie dans le Customizer Thème.

Cette option vous permet d'assigner une couleur de bordure personnalisée au bouton dans ce module.

Sélectionnez votre couleur personnalisée à l'aide du sélecteur de couleurs pour changer la couleur de bordure du bouton.

Vous pouvez changer la police du texte de votre bouton en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque lettre du texte de votre bouton, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Ajouter Bouton Bouton Icône

Bouton Icône

Bouton Icône Couleur

Bouton Positionnement des icônes

Si les icônes sont activées, vous pouvez utiliser ce paramètre pour sélectionner l'icône à utiliser dans votre bouton.

Divi a plusieurs icônes à choisir.

Désactivé, ce paramètre supprimera les icônes de votre bouton.

Par défaut, tous les boutons Divi affichent une flèche en survolant.

Vous pouvez choisir d'afficher votre icône de bouton à gauche ou à droite de votre bouton.

Ajuster ce paramètre changera la couleur de l'icône qui apparaît dans votre bouton.

Par défaut, la couleur de l'icône est la même que celle du texte de vos boutons, mais ce paramètre vous permet d'ajuster la couleur indépendamment.

Afficher uniquement l'icône sur le bouton de survol pour le bouton

Bouton Hover Couleur du texte

Bouton Hover Couleur d'arrière-plan

Bouton Hover Border Couleur de la bordure

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.

La couleur passera de la couleur de base définie dans les paramètres précédents.

Par défaut, les icônes de bouton ne sont affichées qu'en survolant. Si vous souhaitez que l'icône apparaisse toujours, désactivez ce paramètre.

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.

La couleur passera de la couleur de base définie dans les paramètres précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette couleur sera utilisée.

La couleur passera de la couleur de base définie dans les paramètres précédents.

Bouton Hover Border Radius rayon

Espacement des lettres de survol des boutons

Lorsque le bouton est survolé par la souris d'un visiteur, cette valeur sera utilisée. La valeur passe de la valeur de base définie dans les réglages précédents.

Lorsque le bouton est survolé par la souris d'un visiteur, cette valeur sera utilisée.

La valeur passe de la valeur de base définie dans les réglages précédents.

Formulaire de contact

Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style. css de votre thème enfant.

CSS ID

Classe CSS

CSS personnalisé

Visibilité

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé.

Vous pouvez ajouter plusieurs classes, séparées par un espace.

Ces classes peuvent être utilisées dans votre Thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou votre site Web en utilisant les Options du Thème Divi ou les Paramètres de page du Générateur de Divi.

Entrez un ID CSS optionnel à utiliser pour ce module. Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

Cette option vous permet de contrôler sur quels périphériques votre module apparaît.

Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.

C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.

Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.

Formulaire de contact individuel Options de contenu

Numéro de champ

Intitulé

Type

Longueur minimum

Vous pouvez définir ici le contenu qui sera placé dans l'onglet courant.

Vous pouvez définir ici l'ID unique de ce champ. Vous ne devez utiliser que des caractères anglais sans caractères et espaces spéciaux.

Définit la longueur minimale des caractères pour le champ de saisie. Laisser à 0 pour supprimer la restriction.

Ici vous pouvez choisir votre type de champ. Les options comprennent le champ de saisie, le champ d' e-mail ou la zone de texte.

Longueur maximale

Symboles autorisés

Champ obligatoire

Activer (logique conditionnelle)

Désigne les symboles autorisés pour le champ de saisie.

Les choix comprennent "lettres seulement","chiffres seulement" et "alphanumérique seulement".

Définit la longueur maximale des caractères pour le champ de saisie. Laisser à 0 pour supprimer la restriction.

Ici, vous pouvez choisir d'activer la caractéristique logique conditionnelle.

L'activation de la logique conditionnelle ne rend ce champ visible que lorsque toutes les règles ci-des- sous sont remplies.

Vous pouvez définir ici si la zone doit être obligatoire ou facultative.

Relation

Règles

Couleur de fond

Cette section vous permet d'afficher ou de masquer le champ en fonction des règles ou conditions que vous avez définies pour les sélections précédentes.

Ici, vous pouvez choisir si certaines ou toutes les règles doivent être respectées.

Ici, vous pouvez choisir une couleur de fond pour ce champ spécifique.

Formulaire de contact individuel Options de conception

Marque Pleine Largeur

Police de champ

Taille de police du champ

Couleur du champ Texte

Vous pouvez modifier la police du texte de votre champ en sélectionnant la police souhaitée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page.

Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Si cette option est activée, le champ prendra 100% de la largeur de la zone de contenu. Sinon, il faudra 50%.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte de titre, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Ici, vous pouvez ajuster la taille du texte de votre champ.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Espacement des lettres sur le terrain

Hauteur de la ligne de champ

Utiliser la bordure

Couleur de la bordure

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque lettre du texte de votre champ, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie situé à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Cette option affecte la couleur de votre bordure. Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l'appliquer à votre bordure.

L'activation de cette option placera une bordure autour de vos champs de formulaire. Cette bordure peut être personnalisée à l'aide des paramètres conditionnels suivants.

Largeur de bordure

Style de bordure

Par défaut, les bordures ont une largeur de 1 pixel. Vous pouvez augmenter cette valeur en faisant glisser le curseur de plage ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur.

Unités de mesure personnalisées des mesures prises en charge, ce qui signifie que vous pouvez changer l'unité par défaut de "px" à quelque chose d'autre, comme em, vh, vw, etc.

Les bordures prennent en charge huit styles différents, y compris: solide, pointillé, pointillé, pointillé, double, rainuré, faîtage, encoches et début. Sélectionnez le style désiré dans le menu déroulant pour l'appliquer à votre bordure.

Formulaire de contact individuel Options avancées

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.

Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.

MERCI