{"id":5483,"date":"2024-08-27T20:57:16","date_gmt":"2024-08-27T20:57:16","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-page-contact-html-guide\/"},"modified":"2024-08-27T20:57:19","modified_gmt":"2024-08-27T20:57:19","slug":"ajouter-page-contact-html-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-page-contact-html-guide\/","title":{"rendered":"11.15 Ajouter une Page de Contact en HTML : Guide"},"content":{"rendered":"\n<p><strong>Ajouter une Page de Contact en HTML<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Une page de contact bien con\u00e7ue am\u00e9liore l&rsquo;interaction avec vos visiteurs et renforce la cr\u00e9dibilit\u00e9 de votre site. Dans ce tutoriel, nous allons parcourir les \u00e9tapes pour cr\u00e9er une page de contact en utilisant HTML et CSS uniquement.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation d&rsquo;une Page de Contact en HTML<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586680331?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Une page de contact est essentielle pour tout site web, car elle permet \u00e0 vos visiteurs de vous joindre facilement. En utilisant du HTML et du CSS basiques, vous pourrez cr\u00e9er une page propre et fonctionnelle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation de la Structure de la Page<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er la structure de base de notre page de contact. Nous utiliserons des balises HTML telles que <code>&lt;form&gt;<\/code>, <code>&lt;label&gt;<\/code>, et <code>&lt;input&gt;<\/code>. Voici comment cr\u00e9er un formulaire simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Page de Contact&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            background-color: #f4f4f4;\n            margin: 0;\n            padding: 0;\n        }\n        .contact-form {\n            background: #fff;\n            padding: 25px;\n            margin: 50px auto;\n            width: 70%;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n        .contact-form h2 {\n            margin: 0 0 15px;\n            padding: 0;\n            font-size: 24px;\n        }\n        .contact-form .form-group {\n            margin-bottom: 15px;\n        }\n        .contact-form .form-group label {\n            display: block;\n            margin-bottom: 5px;\n        }\n        .contact-form .form-group input,\n        .contact-form .form-group textarea {\n            width: calc(100% - 22px);\n            padding: 10px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n        }\n        .contact-form .form-group textarea {\n            height: 150px;\n            resize: none;\n        }\n        .contact-form .form-group button {\n            padding: 10px 30px;\n            background-color: #701cf5;\n            border: none;\n            color: #fff;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        .contact-form .form-group button:hover {\n            background-color: #5f1abc;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=\"contact-form\"&gt;\n    &lt;h2&gt;Contactez-Nous&lt;\/h2&gt;\n    &lt;form&gt;\n        &lt;div class=\"form-group\"&gt;\n            &lt;label for=\"name\"&gt;Nom&lt;\/label&gt;\n            &lt;input type=\"text\" id=\"name\" name=\"name\" required&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"form-group\"&gt;\n            &lt;label for=\"email\"&gt;Email&lt;\/label&gt;\n            &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"form-group\"&gt;\n            &lt;label for=\"message\"&gt;Message&lt;\/label&gt;\n            &lt;textarea id=\"message\" name=\"message\" required&gt;&lt;\/textarea&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"form-group\"&gt;\n            &lt;button type=\"submit\"&gt;Envoyer&lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/form&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter du Style \u00e0 la Page de Contact<\/h3>\n\n\n\n<p>Pour rendre notre page plus attrayante, nous allons ajouter quelques styles CSS. Par exemple, nous pouvons centrer le formulaire sur la page, ajouter des marges, des bordures et des ombres port\u00e9es pour un effet plus professionnel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Validation des Champs du Formulaire<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur, nous devons nous assurer que les champs du formulaire sont correctement remplis avant de permettre l&rsquo;envoi. Voici un exemple de validation dans le code HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;form&gt;\n    &lt;div class=\"form-group\"&gt;\n        &lt;label for=\"name\"&gt;Nom&lt;\/label&gt;\n        &lt;input type=\"text\" id=\"name\" name=\"name\" required&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-group\"&gt;\n        &lt;label for=\"email\"&gt;Email&lt;\/label&gt;\n        &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-group\"&gt;\n        &lt;label for=\"message\"&gt;Message&lt;\/label&gt;\n        &lt;textarea id=\"message\" name=\"message\" required&gt;&lt;\/textarea&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"form-group\"&gt;\n        &lt;button type=\"submit\"&gt;Envoyer&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Ic\u00f4nes aux Champs de Formulaire<\/h3>\n\n\n\n<p>Pour am\u00e9liorer encore le design de notre formulaire, nous allons ajouter des ic\u00f4nes aux champs de saisie. Nous utiliserons Font Awesome pour ce faire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Page de Contact&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css\"&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            background-color: #f4f4f4;\n            margin: 0;\n            padding: 0;\n        }\n        .contact-form {\n            background: #fff;\n            padding: 25px;\n            margin: 50px auto;\n            width: 70%;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n        }\n        .contact-form h2 {\n            margin: 0 0 15px;\n            padding: 0;\n            font-size: 24px;\n        }\n        .contact-form .form-group {\n            margin-bottom: 15px;\n            position: relative;\n        }\n        .contact-form .form-group label {\n            display: block;\n            margin-bottom: 5px;\n        }\n        .contact-form .form-group input,\n        .contact-form .form-group textarea {\n            width: calc(100% - 50px);\n            padding: 10px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n            padding-left: 45px; \/* Space for icon *\/\n        }\n        .contact-form .form-group input {\n            font-size: 16px;\n        }\n        .contact-form .form-group textarea {\n            height: 150px;\n            resize: none;\n        }\n        .contact-form .form-group button {\n            padding: 10px 30px;\n            background-color: #701cf5;\n            border: none;\n            color: #fff;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n        .contact-form .form-group button:hover {\n            background-color: #5f1abc;\n        }\n        .contact-form .form-group i {\n            position: absolute;\n            top: 34px;\n            left: 10px;\n            font-size: 20px;\n            color: #aaa;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=\"contact-form\"&gt;\n    &lt;h2&gt;Contactez-Nous&lt;\/h2&gt;\n    &lt;form&gt;\n        &lt;div class=\"form-group\"&gt;\n            &lt;label for=\"name\"&gt;Nom&lt;\/label&gt;\n            &lt;i class=\"fas fa-user\"&gt;&lt;\/i&gt;\n            &lt;input type=\"text\" id=\"name\" name=\"name\" required&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"form-group\"&gt;\n            &lt;label for=\"email\"&gt;Email&lt;\/label&gt;\n            &lt;i class=\"fas fa-envelope\"&gt;&lt;\/i&gt;\n            &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"form-group\"&gt;\n            &lt;label for=\"message\"&gt;Message&lt;\/label&gt;\n            &lt;i class=\"fas fa-comment\"&gt;&lt;\/i&gt;\n            &lt;textarea id=\"message\" name=\"message\" required&gt;&lt;\/textarea&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"form-group\"&gt;\n            &lt;button type=\"submit\"&gt;Envoyer&lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/form&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Concevoir le Message de Confirmation<\/h3>\n\n\n\n<p>Enfin, nous devons ajouter un message de confirmation qui s&rsquo;affiche apr\u00e8s que l&rsquo;utilisateur a soumis le formulaire. Voici un simple script JavaScript pour cela :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;script&gt;\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    alert('Merci de nous avoir contact\u00e9s. Nous vous r\u00e9pondrons bient\u00f4t.');\n    this.reset();\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>En suivant ces \u00e9tapes simples, vous pouvez cr\u00e9er une page de contact fonctionnelle pour votre site web. N&rsquo;h\u00e9sitez pas \u00e0 personnaliser votre formulaire de contact en fonction de vos besoins sp\u00e9cifiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Am\u00e9liorations Suppl\u00e9mentaires pour Votre Page de Contact<\/h3>\n\n\n\n<p>Pour aller plus loin dans l&rsquo;am\u00e9lioration de votre page de contact HTML, vous pouvez incorporer des fonctionnalit\u00e9s suppl\u00e9mentaires. Par exemple, vous pourriez inclure une carte interactive montrant l&#8217;emplacement de votre entreprise. Pour cela, vous pouvez utiliser l&rsquo;API Google Maps. De","protected":false},"excerpt":{"rendered":"<p>Ajouter une Page de Contact en HTML est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Une page de contact bien con\u00e7ue am\u00e9liore l&rsquo;interaction avec vos&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5483"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5483\/revisions"}],"predecessor-version":[{"id":5484,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5483\/revisions\/5484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2698"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}