how to require a terms and conditions agreement on your contact form

Chaque site Web devrait avoir un accord de termes et conditions en place. Bien qu'il ne soit pas requis par la loi (comme une politique de confidentialité), il peut être extrêmement vital pour la santé de votre entreprise en ligne. Les termes et conditions (T & C) peuvent également être appelés conditions d'utilisation ou conditions d'utilisation. C'est un contrat légal entre vous et vos visiteurs qui définit les règles, termes et / ou directives pour votre utilisation du site. Il peut être utile pour protéger le contenu et la conception de votre site Web, mettre fin aux comptes d'utilisateurs qui sont en infraction et même limiter votre propre responsabilité.

Un bon endroit pour demander aux utilisateurs d'accepter votre T & C est sur un formulaire de contact. Vous avez vu cela plusieurs fois, j'en suis sûr. Vous pouvez être invité à cocher une case avec l'étiquette "J'accepte les termes et conditions" lorsque vous vous inscrivez pour une adhésion, que vous achetez un produit ou remplissez un simple formulaire de contact. C'est une excellente façon d'exiger un accord sur ces termes dès le début.

Pour ce didacticiel sur les cas d'utilisation, je vais vous expliquer comment créer un formulaire de contact avec Caldera Forms et le pack de mise en page de Divi Business Consultant qui exige que les utilisateurs acceptent vos termes et conditions avant de soumettre le formulaire. Plus précisément, ce formulaire personnalisé contiendra les éléments suivants:

Un champ de case à cocher requis demandant aux visiteurs d'être d'accord avec les T & C.
Un lien vers la page correspondante de T & C afin que les visiteurs puissent facilement trouver et lire les conditions avant d'accepter.
Logique conditionnelle qui oblige les utilisateurs à accepter les T & C afin de soumettre le formulaire.

Commençons.

Ce dont vous aurez besoin pour ce tutoriel de cas d'utilisation

Aperçu

Voici un aperçu rapide du formulaire de contact et de la page Termes et Conditions que nous allons créer.

how to require a terms and conditions agreement on your contact form

how to require a terms and conditions agreement on your contact form

Création de votre formulaire

Une fois le plugin Caldera Forms installé, naviguez vers Caldera Forms> Forms et cliquez sur le bouton New Form en haut de la page.

1519207223 441 how to require a terms and conditions agreement on your contact form

Sélectionnez le modèle de formulaire de contact pour avoir une longueur d'avance sur la configuration des champs.

1519207223 994 how to require a terms and conditions agreement on your contact form

Attribuez un nom au formulaire, puis cliquez sur le bouton Créer un formulaire.

Dans l'onglet Mise en forme de votre nouveau formulaire, vous pouvez modifier la mise en page à l'aide du Générateur de mise en page.

Supprimer la première ligne avec le contenu HTML.

Ensuite, supprimez les lignes fractionnées dans la ligne à trois colonnes contenant le prénom, le nom et l'adresse e-mail en cliquant sur les symboles moins lorsque vous passez la souris sur la ligne.

1519207224 631 how to require a terms and conditions agreement on your contact form

Maintenant, ajoutez une nouvelle ligne en cliquant sur la case grise avec la bordure en pointillés et le signe plus au milieu. Faites ensuite glisser la nouvelle ligne au-dessus de la ligne contenant le bouton "Envoyer un message".

1519207224 202 how to require a terms and conditions agreement on your contact form

Dans la nouvelle ligne que vous avez créée, ajoutez un nouveau champ à la ligne en cliquant sur le petit symbole plus en bas de la ligne. Dans la zone contextuelle Champs, cliquez sur l'onglet Sélectionner, puis ajoutez un champ Case à cocher en cliquant sur le bouton Définir le champ à côté de "Case à cocher".

1519207224 592 how to require a terms and conditions agreement on your contact form

Ensuite, remplissez les champs suivants dans les paramètres du champ à droite de la page.

Nom: accepte les termes (cela peut être tout ce que vous voulez puisque nous allons cacher l'étiquette quand même)
Masquer l'étiquette: oui (cochez cette case)
Slug: accept_terms (ceci devrait être généré automatiquement pour vous)
Obligatoire: Oui (cochez cette case)

Au bas de la section, sélectionnez Ajouter une option et entrez ce qui suit dans la zone de saisie de l'étiquette:

J'accepte les Termes et conditions

Notez que ce code HTML a un lien personnalisé qui est censé lier à votre page de termes et conditions. Vous devrez remplacer le texte «entrez l'URL à la page ici» par l'URL de votre page actuelle. Y compris "target =" _ blank "" ouvrira l'URL dans un nouvel onglet.

1519207224 647 how to require a terms and conditions agreement on your contact form

Enregistrez votre formulaire

Ajout d'une logique conditionnelle

Dans Caldera Form Layout Builder, sélectionnez l'onglet des conditions en haut de la page et cliquez sur Ajouter un groupe conditionnel. Nommez le groupe, sélectionnez le type "Afficher" et cliquez sur le bouton Ajouter une ligne conditionnelle. Dans la ligne conditionnelle qui apparaît, ajoutez la condition suivante:

si [accept terms] est "J'accepte les Termes et Conditions "

Puis, dans la section Champs appliqués à droite, sélectionnez "Envoyer un message [submit]".

1519207225 482 how to require a terms and conditions agreement on your contact form

Cette condition affiche le bouton Envoyer un message uniquement lorsque l'utilisateur sélectionne qu'il est d'accord avec les termes et conditions en cochant la case.

Voici à quoi cela ressemble …

1519207225 728 how to require a terms and conditions agreement on your contact form

Redirections de formulaire et autorépondeurs

Par défaut, Caldera Forms inclut un répondeur automatique qui envoie un e-mail de notification aux utilisateurs une fois le formulaire rempli. Vous pouvez modifier cet autorépondeur ou en créer de nouveaux. Et, vous pouvez également créer d'autres processeurs de formulaire à votre formulaire, y compris les redirections après la soumission du formulaire. Ces répondeurs automatiques sont sous l'onglet processeurs dans les paramètres de votre formulaire.

1519207225 924 how to require a terms and conditions agreement on your contact form

Ajouter un shortcode à votre page de contact

Vous pouvez trouver le shortcode pour afficher votre formulaire dans votre tableau de bord WordPress sous Caldera Forms> Forms et en cliquant sur Get Shortcode sur votre formulaire dans la liste.

1519207225 549 how to require a terms and conditions agreement on your contact form

Accédez à votre page de contact et assurez-vous que vous utilisez la mise en page de la page de contact du conseiller en affaires. Puis déployez Visual Builder. Supprimez le module de formulaire de contact situé à l'intérieur de la rangée de votre section spécialisée. Ensuite, ajoutez un module de texte où se trouvait le module de formulaire de contact et entrez le code abrégé dans la zone de contenu pour afficher le formulaire.

1519207226 947 how to require a terms and conditions agreement on your contact form

Maintenant, copiez le style du module de texte dans la section Pied de page contenant le texte "lorem ipsum" factice.

1519207226 276 how to require a terms and conditions agreement on your contact form

Et collez le style au module de texte contenant votre shortcode de formulaire.

1519207226 353 how to require a terms and conditions agreement on your contact form

Le texte de votre formulaire correspond maintenant à la disposition.

Styling votre bouton de formulaire de contact

Voici un petit truc pour styliser votre bouton de formulaire sans avoir à ajouter de CSS personnalisé. Puisque Divi utilise déjà les classes CSS pour styliser les boutons par défaut à travers le thème, vous pouvez ajouter les classes que Divi utilise déjà à votre champ de bouton Caldera Form. Ensuite, une fois que ces classes ont été ajoutées, vous pouvez définir vos styles de bouton par défaut dans le personnaliseur de thème pour styler le bouton de formulaire.

Cliquez pour modifier le champ du bouton Envoyer un message dans le générateur de mise en page. Pour la zone de saisie de la classe personnalisée, ajoutez la classe et_contact_bottom_container. Dans la zone de saisie de la classe, supprimez les classes actuellement présentes et ajoutez la classe et_pb_button.

1519207226 790 how to require a terms and conditions agreement on your contact form

Enregistrez votre formulaire, puis passez au Customizer du thème et naviguez jusqu'à Boutons> Boutons Style et style votre bouton pour correspondre à votre mise en page.

1519207226 709 how to require a terms and conditions agreement on your contact form

Voyons maintenant le résultat final …

1519207227 945 how to require a terms and conditions agreement on your contact form

Utilisation des conditions d'utilisation automatiques et des options de politique de confidentialité Plugin pour créer votre contenu T & C

Avec les Conditions d'utilisation automatiques et le Plugin d'options de politique de confidentialité installé, accédez à Paramètres> Auto TOS & PP. Entrez toutes les informations dans les zones de saisie à ajouter automatiquement au contenu T & C. Ensuite, activez le code abrégé en sélectionnant "On / Displaying" dans la liste déroulante à côté de l'option On / Off. Enfin, saisissez le shortcode de termes de service à utiliser dans la section suivante lorsque nous construisons la page des termes et conditions.

1519207227 901 how to require a terms and conditions agreement on your contact form

Créez votre Page Termes et Conditions

La création d'une page Termes et conditions est assez simple avec le pack de mise en page Business Consultant. Commencez par ajouter une nouvelle page et ajoutez la disposition Étude de cas à la page à l'aide de Visual Builder.

Ensuite, mettez à jour la section d'en-tête avec un nouveau titre intitulé Termes et conditions et centrez l'alignement du texte.

Dans la section située en-dessous de la section d'en-tête, mettez à jour la ligne supérieure vers une structure de colonne unique et supprimez tous les modules de la ligne à l'exception du module de texte contenant le texte fantôme "lorem ipsum". Mettez à jour les paramètres de conception du module de texte pour obtenir une largeur personnalisée de 70% et un alignement centré. Et enfin, remplacez le contenu du module de texte par votre code abrégé Termes et Conditions [my_terms_of_service].

1519207227 725 how to require a terms and conditions agreement on your contact form

Puis supprimez toutes les autres sections ci-dessous pour nettoyer la mise en page.

Simple comme ça.

Astuce: N'oubliez pas que vous pouvez encore plus styler le texte du shortcode en ciblant des éléments dans les listes déroulantes de style de texte sous l'onglet design du module de texte contenant votre shortcode.

Aussi, n'oubliez pas de mettre à jour le champ de formulaire de case à cocher avec l'URL de la page que vous venez de créer!

Voici la dernière page Termes et Conditions.

1519207228 119 how to require a terms and conditions agreement on your contact form

Autres options pour créer vos termes et conditions

Si vous êtes intéressé par une solution plus personnalisable (et moins libre) pour générer des Termes et Conditions pour votre entreprise, il existe quelques bonnes solutions, y compris iubenda et TermsFeed ] Pour plus d'informations, vous pouvez lire un de nos billets sur " Comment créer une politique de confidentialité pour votre site Web ".

Pensées finales

Selon votre site Web et / ou votre entreprise, vos termes et conditions peuvent nécessiter un placement plus important. Un formulaire de contact est un endroit parfait pour cela. Vous pouvez facilement ajouter un champ de case à cocher dans votre formulaire. Les deux utilisateurs doivent être d'accord avec vos termes et conditions et les associer à votre page Termes et conditions. C'est un moyen pratique de s'assurer que vos visiteurs voient des informations importantes et sont tenus responsables. Le plugin Caldera Forms fournit une solution gratuite pour ajouter cette fonctionnalité d'une manière qui fonctionne bien avec Divi. Et, la création de vos propres termes et conditions de contenu n'est vraiment pas si difficile si vous utilisez l'une des solutions de génération automatique là-bas.

Donc, si vous devez inviter les utilisateurs à accepter vos termes et conditions, j'espère que ce post vous indiquera la bonne direction.

Au plaisir d'avoir de vos nouvelles dans les commentaires.

Article thumbnail image par Blank-k / shutterstock.com

Load More Related Articles
Load More By Amit Ghosh
Load More In How To

Leave a Reply

Your email address will not be published. Required fields are marked *