{"id":815940,"date":"2022-06-15T23:04:13","date_gmt":"2022-06-15T23:04:13","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-add-a-sticky-contact-form-to-your-page\/"},"modified":"2022-07-27T08:02:59","modified_gmt":"2022-07-27T08:02:59","slug":"how-to-add-a-sticky-contact-form-to-your-page","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-ajouter-un-formulaire-de-contact-collant-a-votre-page\/","title":{"rendered":"Comment ajouter un formulaire de contact collant \u00e0 votre page"},"content":{"rendered":"<article id=\"post-172074\" class=\"entry et_box clearfix post-172074 post type-post status-publish format-standard has-post-thumbnail category-divi-resources tag-divi-contact-form-module tag-divi-tutorial\">Les options collantes int\u00e9gr\u00e9es de Divi vous permettent de cr\u00e9er des effets visuels \u00e9tonnants sur votre page en quelques clics. Vous pouvez appliquer des effets collants \u00e0 n&rsquo;importe quel \u00e9l\u00e9ment de votre page, mais dans ce tutoriel, nous allons nous concentrer sur la fa\u00e7on d&rsquo;ajouter un formulaire de contact collant \u00e0 n&rsquo;importe quelle page Divi que vous construisez. Dans cet exemple, nous ajouterons des images et des informations de contact qui d\u00e9fileront pendant que le formulaire de contact restera en place.<\/p>\n<h2>Ce dont vous avez besoin pour commencer<\/h2>\n<p>Avant de commencer, installez et activez le th\u00e8me Divi et assurez-vous que vous disposez de la derni\u00e8re version de Divi sur votre site Web.<\/p>\n<p>Vous \u00eates maintenant pr\u00eat \u00e0 commencer !<\/p>\n<h2>Comment ajouter un formulaire de contact collant \u00e0 votre page<\/h2>\n<h3>Cr\u00e9er une nouvelle page avec une mise en page pr\u00e9\u00e9tablie<\/h3>\n<p>Commen\u00e7ons par utiliser une mise en page pr\u00e9\u00e9tablie de la biblioth\u00e8que Divi. Pour cette conception, nous allons utiliser la page de contact du pack de mise en page des produits de beaut\u00e9.<\/p>\n<p>Ajoutez une nouvelle page \u00e0 votre site Web et donnez-lui un titre, puis s\u00e9lectionnez l&rsquo;option Utiliser Divi Builder.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172089 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-create-new-page.png\" alt=\"divi sticky contact form create new page\" width=\"880\" height=\"462\" \/><\/p>\n<p>Nous allons utiliser une mise en page pr\u00e9\u00e9tablie de la biblioth\u00e8que Divi pour cet exemple, s\u00e9lectionnez donc Parcourir les mises en page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172088 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-browse-layouts.png\" alt=\"divi sticky contact form browse layouts\" width=\"880\" height=\"438\" \/><\/p>\n<p>Recherchez et s\u00e9lectionnez la mise en page de la page de contact du produit de beaut\u00e9.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172091 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-find-a-layout.png\" alt=\"divi sticky contact form find a layout\" width=\"880\" height=\"439\" \/><\/p>\n<p>S\u00e9lectionnez Utiliser cette mise en page pour ajouter la mise en page \u00e0 votre page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172099 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-select-layout.png\" alt=\"divi sticky contact form select layout\" width=\"880\" height=\"437\" \/><\/p>\n<p>Nous sommes maintenant pr\u00eats \u00e0 construire notre design.<\/p>\n<h3>Modification de la mise en page pour le formulaire de contact collant<\/h3>\n<p>Pour cette conception, nous voulons que le formulaire de contact dans la colonne de gauche (colonne 1) reste collant pendant que l&rsquo;utilisateur fait d\u00e9filer les autres modules de contenu dans la colonne de droite (colonne 2). Nous obtiendrons ainsi un effet de d\u00e9filement dynamique qui fera ressortir votre formulaire de contact. Commen\u00e7ons par modifier notre mod\u00e8le pr\u00e9\u00e9tabli.<\/p>\n<h4>Cr\u00e9ez une nouvelle section<\/h4>\n<p>Ajoutez une nouvelle section normale \u00e0 votre page. Ensuite, ins\u00e9rez une nouvelle ligne avec deux colonnes. Vous pouvez ajouter cette section n&rsquo;importe o\u00f9 sur la page, les autres sections seront \u00e9ventuellement supprim\u00e9es au fil du tutoriel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172095 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-insert-section-insert-row.png\" alt=\"divi sticky contact form insert section and insert row\" width=\"880\" height=\"500\" \/><\/p>\n<p>Ouvrez les param\u00e8tres de la section et modifiez la couleur d&rsquo;arri\u00e8re-plan pour l&rsquo;adapter \u00e0 la mise en page :<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Arri\u00e8re-plan : #EEE8E2<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172100 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-set-section-background-color.png\" alt=\"divi sticky contact form set section background color\" width=\"879\" height=\"483\" \/><\/p>\n<h4>Ajout de vos modules collants \u00e0 la colonne 1<\/h4>\n<p>Ajoutez un module de formulaire de contact \u00e0 la colonne 1. Si vous suivez le tutoriel ou si vous avez d\u00e9j\u00e0 un formulaire de contact sur votre page, vous pouvez simplement faire glisser le module de formulaire de contact existant vers la colonne 1.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172086 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-add-contact-form-module.png\" alt=\"divi sticky contact form add contact form\" width=\"880\" height=\"508\" \/><\/p>\n<p>D\u00e9placez le module de texte \u00ab\u00a0Contact Us\u00a0\u00bb en haut de cette section. Il sera \u00e9galement collant. Ajoutez une bordure blanche dans les param\u00e8tres du texte pour l&rsquo;harmoniser avec la mise en page :<\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Largeur de la bordure : 20px<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Couleur de la bordure : #FFFFFF<\/li>\n<\/ol>\n<p>La mise en page originale comprenait un rembourrage suppl\u00e9mentaire entre le texte et la bordure, mais nous n&rsquo;allons pas ajouter ce rembourrage car il coupe le bas du formulaire de contact sur les petits \u00e9crans.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-172085\" style=\"font-weight: 400;\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-add-border.png\" alt=\"divi sticky contact form add border\" width=\"880\" height=\"480\" \/><\/p>\n<h4>Ajoutez vos modules de d\u00e9filement \u00e0 la colonne 2<\/h4>\n<p>Dans la colonne 2, ajoutez tous vos modules de d\u00e9filement. Pour cette conception, d\u00e9placez les deux modules d&rsquo;image, les informations de contact et les informations de localisation vers la colonne 2. Une fois que vous avez d\u00e9plac\u00e9 vos modules dans la nouvelle section, vous pouvez supprimer toutes les sections vides restantes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172097 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-move-image-module.png\" alt=\"divi sticky contact form move image module\" width=\"881\" height=\"476\" \/><\/p>\n<p>Astuce : Si vous devez d\u00e9placer plusieurs modules \u00e0 la fois, maintenez la touche Shift enfonc\u00e9e et s\u00e9lectionnez les modules que vous souhaitez d\u00e9placer. Utilisez la fonction d\u00e9placer le module pour d\u00e9placer tous vos modules en m\u00eame temps.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172098 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-move-multiple-modules.png\" alt=\"divi sticky contact form move multiple modules\" width=\"880\" height=\"340\" \/><\/p>\n<p>La grande image d\u00e9cal\u00e9e de la mise en page du produit de beaut\u00e9 peut causer des probl\u00e8mes de d\u00e9filement horizontal dans cette conception, nous allons donc modifier quelques param\u00e8tres pour r\u00e9soudre ce probl\u00e8me.<\/p>\n<p>Ouvrez les param\u00e8tres de la section. Sous Avanc\u00e9, naviguez jusqu&rsquo;\u00e0 Visibilit\u00e9, puis mettez \u00e0 jour les param\u00e8tres de d\u00e9bordement horizontal et vertical :<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">D\u00e9bordement horizontal : Cach\u00e9<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">D\u00e9bordement vertical : Cach\u00e9<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172093 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-hide-horizontal-vertical-overflow.png\" alt=\"divi sticky contact form hide horizontal vertical overflow\" width=\"880\" height=\"476\" \/><\/p>\n<p>&gt;Votre page devrait maintenant ressembler \u00e0 ceci, avec votre contenu permanent dans la colonne 1 et votre contenu d\u00e9filant dans la colonne 2.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172096 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-layout-overview.png\" alt=\"divi sticky contact form layout overview\" width=\"880\" height=\"947\" \/><\/p>\n<p>Nous sommes pr\u00eats \u00e0 passer \u00e0 la derni\u00e8re \u00e9tape : rendre le formulaire de contact collant.<\/p>\n<h3>Rendre le formulaire de contact adh\u00e9sif<\/h3>\n<p>Notre mise en page \u00e9tant en place, nous pouvons activer les param\u00e8tres d&rsquo;adh\u00e9sivit\u00e9 pour notre formulaire de contact. S\u00e9lectionnez Row Settings, puis les param\u00e8tres de la colonne 1.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172090 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-edit-column-settings.png\" alt=\"divi sticky contact form edit column settings\" width=\"880\" height=\"500\" \/><\/p>\n<p>Sous l&rsquo;onglet Avanc\u00e9, naviguez jusqu&rsquo;\u00e0 Effets de d\u00e9filement. C&rsquo;est ici que nous allons ajouter les param\u00e8tres de collage. La conception collante \u00e0 deux colonnes ne fonctionne pas bien sur les appareils mobiles, nous ne modifierons donc que les options suivantes pour la mise en page de bureau.<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Position de l&rsquo;adh\u00e9sif : Coller en haut<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">D\u00e9calage du haut de l&rsquo;autocollant : 15px<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">D\u00e9finissez la limite inf\u00e9rieure de l&rsquo;autocollant sur la section.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border alignnone wp-image-172087 size-full\" src=\"https:\/\/www.lafactory.com\/blog\/wp-content\/uploads\/2022\/05\/divi-sticky-contact-form-add-sticky-settings.png\" alt=\"divi sticky contact form add sticky settings\" width=\"880\" height=\"477\" \/><\/p>\n<p>Et voil\u00e0, c&rsquo;est fait ! Vous avez maintenant ajout\u00e9 les param\u00e8tres d&rsquo;adh\u00e9sivit\u00e9 \u00e0 la colonne 1, ce qui rend votre formulaire de contact et votre titre adh\u00e9sifs lorsque vous faites d\u00e9filer la page. Vous devriez voir le contenu de la colonne 2 d\u00e9filer \u00e0 c\u00f4t\u00e9 du formulaire de contact.<\/p>\n<h2>R\u00e9flexions finales<\/h2>\n<p>Les param\u00e8tres adh\u00e9sifs de Divi sont un moyen facile de rehausser l&rsquo;apparence de votre formulaire de contact &#8211; ou de tout autre \u00e9l\u00e9ment de votre page. Vous pouvez personnaliser les param\u00e8tres d&rsquo;adh\u00e9sivit\u00e9 pour n&rsquo;importe quelle section, ligne ou module, afin de rendre adh\u00e9sif n&rsquo;importe quel \u00e9l\u00e9ment de votre site Web. Si vous souhaitez en savoir plus sur ce que vous pouvez faire avec les fonctionnalit\u00e9s adh\u00e9sives de Divi, consultez nos tutoriels sur la cr\u00e9ation d&rsquo;un curseur vid\u00e9o adh\u00e9sif et sur la cr\u00e9ation de modules adh\u00e9sifs de suivi des m\u00e9dias sociaux.<\/p>\n<p>Comment avez-vous mis en \u0153uvre les fonctionnalit\u00e9s adh\u00e9sives de Divi sur votre site Web ? Faites-nous en part dans les commentaires !<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Les options collantes int\u00e9gr\u00e9es de Divi vous permettent de cr\u00e9er des effets visuels \u00e9tonnants sur votre page en quelques clics. Vous pouvez appliquer des effets collants \u00e0 n&rsquo;importe quel \u00e9l\u00e9ment de votre page, mais dans ce tutoriel, nous allons nous concentrer sur la fa\u00e7on d&rsquo;ajouter un formulaire de contact collant \u00e0 n&rsquo;importe quelle page Divi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":807047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1522],"tags":[],"class_list":["post-815940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-en"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/815940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=815940"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/815940\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/807047"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=815940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=815940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=815940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}