Contact \u2014 Webizia<\/title>\n <meta name=\"description\" content=\"Contactez Webizia pour cr\u00e9er un site clair, moderne et efficace.\">\n <link rel=\"stylesheet\" href=\"style.css\">\n <style>\n body {\n background: #f8faff;\n overflow-x: hidden;\n }\n\n \/* --- SECTION D'INTRO --- *\/\n .contact-hero {\n text-align: center;\n max-width: 700px;\n margin: 100px auto 60px;\n padding: 0 20px;\n }\n\n .contact-hero h1 {\n font-size: 42px;\n color: var(--text);\n position: relative;\n display: inline-block;\n margin-bottom: 16px;\n }\n\n .contact-hero h1::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: -10px;\n width: 80px;\n height: 4px;\n background: var(--primary);\n border-radius: 4px;\n }\n\n .contact-hero p {\n font-size: 18px;\n color: var(--text-muted);\n margin-top: 20px;\n line-height: 1.6;\n }\n\n \/* --- FORMULAIRE --- *\/\n form {\n max-width: 640px;\n margin: 60px auto;\n background: #fff;\n padding: 50px;\n border-radius: var(--radius);\n box-shadow: 0 10px 30px rgba(0,0,0,0.06);\n transform: translateY(30px);\n opacity: 0;\n transition: all 0.8s ease;\n }\n\n form.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n label {\n display: block;\n font-weight: 600;\n margin-bottom: 6px;\n color: var(--text);\n }\n\n input, textarea {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid #ccc;\n border-radius: var(--radius);\n font-size: 15px;\n margin-bottom: 28px; \/* \u21d0 plus d'espace entre les champs *\/\n font-family: inherit;\n transition: border-color .25s ease, box-shadow .25s ease;\n }\n\n input:focus, textarea:focus {\n border-color: var(--primary);\n outline: none;\n box-shadow: 0 0 0 3px rgba(0,123,255,0.15);\n }\n\n textarea {\n min-height: 150px;\n resize: vertical;\n margin-bottom: 32px; \/* \u21d0 un peu plus d\u2019air avant le bouton *\/\n }\n\n .form-group-inline {\n display: flex;\n gap: 24px; \/* \u21d0 plus d'espace horizontal *\/\n flex-wrap: wrap;\n margin-bottom: 28px; \/* \u21d0 plus d'espace entre les groupes *\/\n }\n\n .form-group-inline > div {\n flex: 1 1 200px;\n }\n\n .cta {\n text-align: center;\n margin-top: 30px;\n }\n\n .btn-primary {\n padding: 16px 34px;\n font-size: 17px;\n border-radius: 50px;\n }\n\n .success-message, .error-message {\n text-align: center;\n margin-top: 16px;\n font-weight: 600;\n }\n\n .success-message { color: green; }\n .error-message { color: #c00; }\n\n \/* --- SECTION CONTACT DIRECT --- *\/\n .contact-footer {\n text-align: center;\n background: linear-gradient(135deg, #f0f6ff 0%, #ffffff 100%);\n padding: 80px 24px;\n border-radius: 24px;\n box-shadow: 0 10px 30px rgba(0,123,255,0.1);\n max-width: 850px;\n margin: 140px auto 60px;\n opacity: 0;\n transform: translateY(40px);\n transition: all 0.8s ease;\n }\n\n .contact-footer.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .contact-footer h2 {\n font-size: 30px;\n margin-bottom: 18px;\n position: relative;\n display: inline-block;\n color: var(--text);\n }\n\n .contact-footer h2::after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 3px;\n background: var(--primary);\n border-radius: 3px;\n }\n\n .contact-footer p {\n font-size: 18px;\n color: var(--text-muted);\n margin: 10px 0;\n }\n\n .contact-footer a {\n color: var(--primary);\n font-weight: 600;\n text-decoration: none;\n transition: opacity .3s ease;\n }\n\n .contact-footer a:hover {\n opacity: 0.8;\n }\n\n @media (max-width: 680px) {\n .contact-hero h1 { font-size: 32px; }\n form { padding: 32px; }\n .contact-footer { margin: 100px 16px 60px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <section class=\"contact-hero\">\n <h1>Contactez Webizia<\/h1>\n <p>Un projet, une id\u00e9e ou simplement une question ?<br>\n Discutons ensemble de votre futur site clair, moderne et performant.<\/p>\n <\/section>\n\n <form id=\"contact-form\" action=\"https:\/\/formspree.io\/f\/xanpgegg\" method=\"POST\">\n <div class=\"form-group-inline\">\n <div>\n <label for=\"prenom\">Pr\u00e9nom *<\/label>\n <input type=\"text\" id=\"prenom\" name=\"Pr\u00e9nom\" required>\n <\/div>\n <div>\n <label for=\"nom\">Nom *<\/label>\n <input type=\"text\" id=\"nom\" name=\"Nom\" required>\n <\/div>\n <\/div>\n\n <div class=\"form-group-inline\">\n <div>\n <label for=\"entreprise\">Entreprise (optionnel)<\/label>\n <input type=\"text\" id=\"entreprise\" name=\"Entreprise\">\n <\/div>\n <div>\n <label for=\"telephone\">T\u00e9l\u00e9phone *<\/label>\n <input type=\"tel\" id=\"telephone\" name=\"T\u00e9l\u00e9phone\" required>\n <\/div>\n <\/div>\n\n <label for=\"email\">Adresse e-mail *<\/label>\n <input type=\"email\" id=\"email\" name=\"Email\" required>\n\n <label for=\"sujet\">Sujet *<\/label>\n <input type=\"text\" id=\"sujet\" name=\"Sujet\" required>\n\n <label for=\"message\">Message *<\/label>\n <textarea id=\"message\" name=\"Message\" required><\/textarea>\n\n <div class=\"cta\">\n <button type=\"submit\" class=\"btn btn-primary\">Envoyer le message<\/button>\n <\/div>\n\n <p class=\"success-message\" id=\"success-msg\" hidden>\u2705 Merci, votre message a bien \u00e9t\u00e9 envoy\u00e9.<\/p>\n <p class=\"error-message\" id=\"error-msg\" hidden>\u274c Une erreur est survenue. R\u00e9essayez plus tard.<\/p>\n <\/form>\n\n <section class=\"contact-footer\" id=\"contact-footer\" aria-labelledby=\"infos-title\">\n <h2 id=\"infos-title\">Ou contactez-nous directement<\/h2>\n <p>\ud83d\udcde <a href=\"tel:+33614498270\">06 14 49 82 70<\/a><\/p>\n <p>\u2709\ufe0f <a href=\"mailto:erichard@webizia.fr\">erichard@webizia.fr<\/a><\/p>\n <\/section>\n <\/div>\n\n <script>\n \/\/ Apparition fluide au scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.2 });\n\n document.querySelectorAll('form, .contact-footer').forEach(el => observer.observe(el));\n\n \/\/ Formspree\n const form = document.getElementById('contact-form');\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n const data = new FormData(form);\n const successMsg = document.getElementById('success-msg');\n const errorMsg = document.getElementById('error-msg');\n successMsg.hidden = true;\n errorMsg.hidden = true;\n\n try {\n const response = await fetch(form.action, {\n method: form.method,\n body: data,\n headers: { 'Accept': 'application\/json' }\n });\n if (response.ok) {\n successMsg.hidden = false;\n form.reset();\n } else {\n errorMsg.hidden = false;\n }\n } catch {\n errorMsg.hidden = false;\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Contact \u2014 Webizia Contactez Webizia Un projet, une id\u00e9e ou simplement une question ? Discutons ensemble de votre futur site clair, moderne et performant. Pr\u00e9nom * Nom * Entreprise (optionnel) T\u00e9l\u00e9phone * Adresse e-mail * Sujet * Message * Envoyer le message \u2705 Merci, votre message a bien \u00e9t\u00e9 envoy\u00e9. \u274c Une erreur est survenue. R\u00e9essayez […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":11,"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":319,"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/319"}],"wp:attachment":[{"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13,"date":"2025-09-02T16:44:30","date_gmt":"2025-09-02T16:44:30","guid":{"rendered":"https:\/\/webizia.fr\/?page_id=13"},"modified":"2025-11-03T11:21:51","modified_gmt":"2025-11-03T11:21:51","slug":"contact","status":"publish","type":"page","link":"https:\/\/webizia.fr\/index.php\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\n\n\n\n \n \n Contact \u2014 Webizia<\/title>\n <meta name=\"description\" content=\"Contactez Webizia pour cr\u00e9er un site clair, moderne et efficace.\">\n <link rel=\"stylesheet\" href=\"style.css\">\n <style>\n body {\n background: #f8faff;\n overflow-x: hidden;\n }\n\n \/* --- SECTION D'INTRO --- *\/\n .contact-hero {\n text-align: center;\n max-width: 700px;\n margin: 100px auto 60px;\n padding: 0 20px;\n }\n\n .contact-hero h1 {\n font-size: 42px;\n color: var(--text);\n position: relative;\n display: inline-block;\n margin-bottom: 16px;\n }\n\n .contact-hero h1::after {\n content: '';\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: -10px;\n width: 80px;\n height: 4px;\n background: var(--primary);\n border-radius: 4px;\n }\n\n .contact-hero p {\n font-size: 18px;\n color: var(--text-muted);\n margin-top: 20px;\n line-height: 1.6;\n }\n\n \/* --- FORMULAIRE --- *\/\n form {\n max-width: 640px;\n margin: 60px auto;\n background: #fff;\n padding: 50px;\n border-radius: var(--radius);\n box-shadow: 0 10px 30px rgba(0,0,0,0.06);\n transform: translateY(30px);\n opacity: 0;\n transition: all 0.8s ease;\n }\n\n form.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n label {\n display: block;\n font-weight: 600;\n margin-bottom: 6px;\n color: var(--text);\n }\n\n input, textarea {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid #ccc;\n border-radius: var(--radius);\n font-size: 15px;\n margin-bottom: 28px; \/* \u21d0 plus d'espace entre les champs *\/\n font-family: inherit;\n transition: border-color .25s ease, box-shadow .25s ease;\n }\n\n input:focus, textarea:focus {\n border-color: var(--primary);\n outline: none;\n box-shadow: 0 0 0 3px rgba(0,123,255,0.15);\n }\n\n textarea {\n min-height: 150px;\n resize: vertical;\n margin-bottom: 32px; \/* \u21d0 un peu plus d\u2019air avant le bouton *\/\n }\n\n .form-group-inline {\n display: flex;\n gap: 24px; \/* \u21d0 plus d'espace horizontal *\/\n flex-wrap: wrap;\n margin-bottom: 28px; \/* \u21d0 plus d'espace entre les groupes *\/\n }\n\n .form-group-inline > div {\n flex: 1 1 200px;\n }\n\n .cta {\n text-align: center;\n margin-top: 30px;\n }\n\n .btn-primary {\n padding: 16px 34px;\n font-size: 17px;\n border-radius: 50px;\n }\n\n .success-message, .error-message {\n text-align: center;\n margin-top: 16px;\n font-weight: 600;\n }\n\n .success-message { color: green; }\n .error-message { color: #c00; }\n\n \/* --- SECTION CONTACT DIRECT --- *\/\n .contact-footer {\n text-align: center;\n background: linear-gradient(135deg, #f0f6ff 0%, #ffffff 100%);\n padding: 80px 24px;\n border-radius: 24px;\n box-shadow: 0 10px 30px rgba(0,123,255,0.1);\n max-width: 850px;\n margin: 140px auto 60px;\n opacity: 0;\n transform: translateY(40px);\n transition: all 0.8s ease;\n }\n\n .contact-footer.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .contact-footer h2 {\n font-size: 30px;\n margin-bottom: 18px;\n position: relative;\n display: inline-block;\n color: var(--text);\n }\n\n .contact-footer h2::after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 3px;\n background: var(--primary);\n border-radius: 3px;\n }\n\n .contact-footer p {\n font-size: 18px;\n color: var(--text-muted);\n margin: 10px 0;\n }\n\n .contact-footer a {\n color: var(--primary);\n font-weight: 600;\n text-decoration: none;\n transition: opacity .3s ease;\n }\n\n .contact-footer a:hover {\n opacity: 0.8;\n }\n\n @media (max-width: 680px) {\n .contact-hero h1 { font-size: 32px; }\n form { padding: 32px; }\n .contact-footer { margin: 100px 16px 60px; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <section class=\"contact-hero\">\n <h1>Contactez Webizia<\/h1>\n <p>Un projet, une id\u00e9e ou simplement une question ?<br>\n Discutons ensemble de votre futur site clair, moderne et performant.<\/p>\n <\/section>\n\n <form id=\"contact-form\" action=\"https:\/\/formspree.io\/f\/xanpgegg\" method=\"POST\">\n <div class=\"form-group-inline\">\n <div>\n <label for=\"prenom\">Pr\u00e9nom *<\/label>\n <input type=\"text\" id=\"prenom\" name=\"Pr\u00e9nom\" required>\n <\/div>\n <div>\n <label for=\"nom\">Nom *<\/label>\n <input type=\"text\" id=\"nom\" name=\"Nom\" required>\n <\/div>\n <\/div>\n\n <div class=\"form-group-inline\">\n <div>\n <label for=\"entreprise\">Entreprise (optionnel)<\/label>\n <input type=\"text\" id=\"entreprise\" name=\"Entreprise\">\n <\/div>\n <div>\n <label for=\"telephone\">T\u00e9l\u00e9phone *<\/label>\n <input type=\"tel\" id=\"telephone\" name=\"T\u00e9l\u00e9phone\" required>\n <\/div>\n <\/div>\n\n <label for=\"email\">Adresse e-mail *<\/label>\n <input type=\"email\" id=\"email\" name=\"Email\" required>\n\n <label for=\"sujet\">Sujet *<\/label>\n <input type=\"text\" id=\"sujet\" name=\"Sujet\" required>\n\n <label for=\"message\">Message *<\/label>\n <textarea id=\"message\" name=\"Message\" required><\/textarea>\n\n <div class=\"cta\">\n <button type=\"submit\" class=\"btn btn-primary\">Envoyer le message<\/button>\n <\/div>\n\n <p class=\"success-message\" id=\"success-msg\" hidden>\u2705 Merci, votre message a bien \u00e9t\u00e9 envoy\u00e9.<\/p>\n <p class=\"error-message\" id=\"error-msg\" hidden>\u274c Une erreur est survenue. R\u00e9essayez plus tard.<\/p>\n <\/form>\n\n <section class=\"contact-footer\" id=\"contact-footer\" aria-labelledby=\"infos-title\">\n <h2 id=\"infos-title\">Ou contactez-nous directement<\/h2>\n <p>\ud83d\udcde <a href=\"tel:+33614498270\">06 14 49 82 70<\/a><\/p>\n <p>\u2709\ufe0f <a href=\"mailto:erichard@webizia.fr\">erichard@webizia.fr<\/a><\/p>\n <\/section>\n <\/div>\n\n <script>\n \/\/ Apparition fluide au scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.2 });\n\n document.querySelectorAll('form, .contact-footer').forEach(el => observer.observe(el));\n\n \/\/ Formspree\n const form = document.getElementById('contact-form');\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n const data = new FormData(form);\n const successMsg = document.getElementById('success-msg');\n const errorMsg = document.getElementById('error-msg');\n successMsg.hidden = true;\n errorMsg.hidden = true;\n\n try {\n const response = await fetch(form.action, {\n method: form.method,\n body: data,\n headers: { 'Accept': 'application\/json' }\n });\n if (response.ok) {\n successMsg.hidden = false;\n form.reset();\n } else {\n errorMsg.hidden = false;\n }\n } catch {\n errorMsg.hidden = false;\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Contact \u2014 Webizia Contactez Webizia Un projet, une id\u00e9e ou simplement une question ? Discutons ensemble de votre futur site clair, moderne et performant. Pr\u00e9nom * Nom * Entreprise (optionnel) T\u00e9l\u00e9phone * Adresse e-mail * Sujet * Message * Envoyer le message \u2705 Merci, votre message a bien \u00e9t\u00e9 envoy\u00e9. \u274c Une erreur est survenue. R\u00e9essayez […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":11,"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":319,"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/319"}],"wp:attachment":[{"href":"https:\/\/webizia.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}