Questionnaire Client<\/title>\r\n <style>\r\n \/* Global Styles *\/\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n background-color: #f4f7fc;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n }\r\n \r\n \/* Container for the form *\/\r\n .container {\r\n background-color: white;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n max-width: 500px;\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n\r\n \/* Title *\/\r\n h2 {\r\n font-size: 24px;\r\n margin-bottom: 20px;\r\n color: #333;\r\n }\r\n\r\n \/* Styling the select box *\/\r\n select, input[type=\"text\"] {\r\n width: 100%;\r\n padding: 10px;\r\n margin: 10px 0;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n font-size: 16px;\r\n }\r\n\r\n select:focus, input[type=\"text\"]:focus {\r\n border-color: #007bff;\r\n outline: none;\r\n }\r\n\r\n \/* Message Box Styling *\/\r\n .message-box {\r\n background-color: #e9f5ff;\r\n border-left: 5px solid #007bff;\r\n color: #333;\r\n font-size: 16px;\r\n padding: 15px;\r\n margin-top: 20px;\r\n display: inline-block;\r\n width: 100%;\r\n text-align: center;\r\n border-radius: 5px;\r\n }\r\n\r\n \/* Button Styles *\/\r\n button {\r\n background-color: #007bff;\r\n color: white;\r\n border: none;\r\n padding: 12px 20px;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n margin-top: 15px;\r\n }\r\n\r\n button:hover {\r\n background-color: #0056b3;\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n\r\n \/* Flex Container for buttons *\/\r\n #buttonSection {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 20px;\r\n }\r\n\r\n #buttonSection button {\r\n width: 48%;\r\n }\r\n\r\n \/* Styling for Call and WhatsApp buttons *\/\r\n .call-btn, .whatsapp-btn {\r\n background-color: #25d366; \/* WhatsApp green *\/\r\n color: white;\r\n padding: 12px;\r\n border-radius: 5px;\r\n text-decoration: none;\r\n font-size: 16px;\r\n margin-top: 15px;\r\n display: inline-block;\r\n width: 48%;\r\n text-align: center;\r\n }\r\n\r\n .call-btn {\r\n background-color: #34b7f1; \/* WhatsApp blue for calling *\/\r\n }\r\n\r\n .call-btn:hover {\r\n background-color: #0084cc;\r\n }\r\n\r\n .whatsapp-btn:hover {\r\n background-color: #128c7e;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"container\">\r\n <div id=\"questionSection\">\r\n <h2>Vous \u00eates ?<\/h2>\r\n <select id=\"userType\" onchange=\"handleSelection()\" required>\r\n <option value=\"\">-- S\u00e9lectionnez --<\/option>\r\n <option value=\"grossiste\">Grossiste<\/option>\r\n <option value=\"revendeur\">Revendeur<\/option>\r\n <option value=\"particulier\">Particulier<\/option>\r\n <option value=\"autre\">Autre<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <div id=\"citySelection\" class=\"hidden\">\r\n <h2>Vous \u00eates dans quelle ville ?<\/h2>\r\n <input type=\"text\" id=\"city\" placeholder=\"Entrez votre ville\" required>\r\n <\/div>\r\n \r\n <p id=\"message\" class=\"hidden message-box\">Merci de votre message, nous vous orientons vers un revendeur partenaire !<\/p>\r\n \r\n <div id=\"buttonSection\">\r\n <button id=\"previousButton\" class=\"hidden\" onclick=\"goBack()\">Pr\u00e9c\u00e9dent<\/button>\r\n <button id=\"nextButton\" onclick=\"processSelection()\">Suivant<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"actionButtons\" class=\"hidden\">\r\n <a id=\"whatsappButton\" href=\"#\" class=\"whatsapp-btn\">WhatsApp<\/a>\r\n <a id=\"callButton\" href=\"tel:+212666830190\" class=\"call-btn\">Appeler<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n function handleSelection() {\r\n const userType = document.getElementById(\"userType\").value;\r\n const citySelection = document.getElementById(\"citySelection\");\r\n const message = document.getElementById(\"message\");\r\n const questionSection = document.getElementById(\"questionSection\");\r\n const buttonSection = document.getElementById(\"buttonSection\");\r\n const nextButton = document.getElementById(\"nextButton\");\r\n const previousButton = document.getElementById(\"previousButton\");\r\n \r\n if (userType === \"grossiste\" || userType === \"revendeur\") {\r\n citySelection.classList.remove(\"hidden\");\r\n message.classList.add(\"hidden\");\r\n questionSection.classList.remove(\"hidden\");\r\n buttonSection.classList.remove(\"hidden\");\r\n nextButton.classList.remove(\"hidden\"); \/\/ Afficher \"Suivant\" pour grossiste ou revendeur\r\n previousButton.classList.add(\"hidden\"); \/\/ Cacher \"Pr\u00e9c\u00e9dent\" au d\u00e9but\r\n } else {\r\n citySelection.classList.add(\"hidden\");\r\n message.classList.remove(\"hidden\");\r\n questionSection.classList.add(\"hidden\");\r\n buttonSection.classList.remove(\"hidden\");\r\n nextButton.classList.add(\"hidden\"); \/\/ Cacher \"Suivant\" pour particulier ou autre\r\n previousButton.classList.remove(\"hidden\"); \/\/ Afficher \"Pr\u00e9c\u00e9dent\"\r\n }\r\n }\r\n \r\n function processSelection() {\r\n const userType = document.getElementById(\"userType\").value;\r\n const city = document.getElementById(\"city\").value;\r\n const message = document.getElementById(\"message\");\r\n const actionButtons = document.getElementById(\"actionButtons\");\r\n const whatsappButton = document.getElementById(\"whatsappButton\");\r\n \r\n if (userType === \"grossiste\" || userType === \"revendeur\") {\r\n if (city.trim() === \"\") {\r\n alert(\"Veuillez entrer votre ville.\");\r\n return;\r\n }\r\n \r\n \/\/ Cr\u00e9er le lien WhatsApp\r\n const whatsappMessage = encodeURIComponent(`Bonjour, je suis int\u00e9ress\u00e9 par vos produits et je suis bas\u00e9 \u00e0 ${city}.`);\r\n whatsappButton.href = `https:\/\/api.whatsapp.com\/message\/WOS4ZC6VEWBLC1?autoload=1&app_absent=0&text=${whatsappMessage}`;\r\n } else {\r\n message.classList.remove(\"hidden\");\r\n }\r\n \r\n \/\/ Afficher les boutons apr\u00e8s avoir soumis la ville\r\n actionButtons.classList.remove(\"hidden\");\r\n \r\n \/\/ Remplacer \"Suivant\" par \"Pr\u00e9c\u00e9dent\"\r\n document.getElementById(\"nextButton\").classList.add(\"hidden\");\r\n document.getElementById(\"previousButton\").classList.remove(\"hidden\");\r\n }\r\n \r\n function goBack() {\r\n document.getElementById(\"userType\").value = \"\";\r\n document.getElementById(\"citySelection\").classList.add(\"hidden\");\r\n document.getElementById(\"message\").classList.add(\"hidden\");\r\n document.getElementById(\"questionSection\").classList.remove(\"hidden\");\r\n document.getElementById(\"buttonSection\").classList.remove(\"hidden\");\r\n document.getElementById(\"nextButton\").classList.remove(\"hidden\"); \/\/ R\u00e9afficher le bouton Suivant\r\n document.getElementById(\"previousButton\").classList.add(\"hidden\"); \/\/ Cacher le bouton Pr\u00e9c\u00e9dent\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Questionnaire Client Vous \u00eates ? — S\u00e9lectionnez —GrossisteRevendeurParticulierAutre Vous \u00eates dans quelle ville ? Merci de votre message, nous vous orientons vers un revendeur partenaire ! Pr\u00e9c\u00e9dent Suivant WhatsApp Appeler<\/p>\n","protected":false},"author":113,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-21567","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/pages\/21567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/comments?post=21567"}],"version-history":[{"count":24,"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/pages\/21567\/revisions"}],"predecessor-version":[{"id":28852,"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/pages\/21567\/revisions\/28852"}],"wp:attachment":[{"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/media?parent=21567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Questionnaire Client<\/title>\r\n <style>\r\n \/* Global Styles *\/\r\n body {\r\n font-family: 'Arial', sans-serif;\r\n background-color: #f4f7fc;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n }\r\n \r\n \/* Container for the form *\/\r\n .container {\r\n background-color: white;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n max-width: 500px;\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n\r\n \/* Title *\/\r\n h2 {\r\n font-size: 24px;\r\n margin-bottom: 20px;\r\n color: #333;\r\n }\r\n\r\n \/* Styling the select box *\/\r\n select, input[type=\"text\"] {\r\n width: 100%;\r\n padding: 10px;\r\n margin: 10px 0;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n font-size: 16px;\r\n }\r\n\r\n select:focus, input[type=\"text\"]:focus {\r\n border-color: #007bff;\r\n outline: none;\r\n }\r\n\r\n \/* Message Box Styling *\/\r\n .message-box {\r\n background-color: #e9f5ff;\r\n border-left: 5px solid #007bff;\r\n color: #333;\r\n font-size: 16px;\r\n padding: 15px;\r\n margin-top: 20px;\r\n display: inline-block;\r\n width: 100%;\r\n text-align: center;\r\n border-radius: 5px;\r\n }\r\n\r\n \/* Button Styles *\/\r\n button {\r\n background-color: #007bff;\r\n color: white;\r\n border: none;\r\n padding: 12px 20px;\r\n font-size: 16px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n margin-top: 15px;\r\n }\r\n\r\n button:hover {\r\n background-color: #0056b3;\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n\r\n \/* Flex Container for buttons *\/\r\n #buttonSection {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 20px;\r\n }\r\n\r\n #buttonSection button {\r\n width: 48%;\r\n }\r\n\r\n \/* Styling for Call and WhatsApp buttons *\/\r\n .call-btn, .whatsapp-btn {\r\n background-color: #25d366; \/* WhatsApp green *\/\r\n color: white;\r\n padding: 12px;\r\n border-radius: 5px;\r\n text-decoration: none;\r\n font-size: 16px;\r\n margin-top: 15px;\r\n display: inline-block;\r\n width: 48%;\r\n text-align: center;\r\n }\r\n\r\n .call-btn {\r\n background-color: #34b7f1; \/* WhatsApp blue for calling *\/\r\n }\r\n\r\n .call-btn:hover {\r\n background-color: #0084cc;\r\n }\r\n\r\n .whatsapp-btn:hover {\r\n background-color: #128c7e;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"container\">\r\n <div id=\"questionSection\">\r\n <h2>Vous \u00eates ?<\/h2>\r\n <select id=\"userType\" onchange=\"handleSelection()\" required>\r\n <option value=\"\">-- S\u00e9lectionnez --<\/option>\r\n <option value=\"grossiste\">Grossiste<\/option>\r\n <option value=\"revendeur\">Revendeur<\/option>\r\n <option value=\"particulier\">Particulier<\/option>\r\n <option value=\"autre\">Autre<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <div id=\"citySelection\" class=\"hidden\">\r\n <h2>Vous \u00eates dans quelle ville ?<\/h2>\r\n <input type=\"text\" id=\"city\" placeholder=\"Entrez votre ville\" required>\r\n <\/div>\r\n \r\n <p id=\"message\" class=\"hidden message-box\">Merci de votre message, nous vous orientons vers un revendeur partenaire !<\/p>\r\n \r\n <div id=\"buttonSection\">\r\n <button id=\"previousButton\" class=\"hidden\" onclick=\"goBack()\">Pr\u00e9c\u00e9dent<\/button>\r\n <button id=\"nextButton\" onclick=\"processSelection()\">Suivant<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"actionButtons\" class=\"hidden\">\r\n <a id=\"whatsappButton\" href=\"#\" class=\"whatsapp-btn\">WhatsApp<\/a>\r\n <a id=\"callButton\" href=\"tel:+212666830190\" class=\"call-btn\">Appeler<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n function handleSelection() {\r\n const userType = document.getElementById(\"userType\").value;\r\n const citySelection = document.getElementById(\"citySelection\");\r\n const message = document.getElementById(\"message\");\r\n const questionSection = document.getElementById(\"questionSection\");\r\n const buttonSection = document.getElementById(\"buttonSection\");\r\n const nextButton = document.getElementById(\"nextButton\");\r\n const previousButton = document.getElementById(\"previousButton\");\r\n \r\n if (userType === \"grossiste\" || userType === \"revendeur\") {\r\n citySelection.classList.remove(\"hidden\");\r\n message.classList.add(\"hidden\");\r\n questionSection.classList.remove(\"hidden\");\r\n buttonSection.classList.remove(\"hidden\");\r\n nextButton.classList.remove(\"hidden\"); \/\/ Afficher \"Suivant\" pour grossiste ou revendeur\r\n previousButton.classList.add(\"hidden\"); \/\/ Cacher \"Pr\u00e9c\u00e9dent\" au d\u00e9but\r\n } else {\r\n citySelection.classList.add(\"hidden\");\r\n message.classList.remove(\"hidden\");\r\n questionSection.classList.add(\"hidden\");\r\n buttonSection.classList.remove(\"hidden\");\r\n nextButton.classList.add(\"hidden\"); \/\/ Cacher \"Suivant\" pour particulier ou autre\r\n previousButton.classList.remove(\"hidden\"); \/\/ Afficher \"Pr\u00e9c\u00e9dent\"\r\n }\r\n }\r\n \r\n function processSelection() {\r\n const userType = document.getElementById(\"userType\").value;\r\n const city = document.getElementById(\"city\").value;\r\n const message = document.getElementById(\"message\");\r\n const actionButtons = document.getElementById(\"actionButtons\");\r\n const whatsappButton = document.getElementById(\"whatsappButton\");\r\n \r\n if (userType === \"grossiste\" || userType === \"revendeur\") {\r\n if (city.trim() === \"\") {\r\n alert(\"Veuillez entrer votre ville.\");\r\n return;\r\n }\r\n \r\n \/\/ Cr\u00e9er le lien WhatsApp\r\n const whatsappMessage = encodeURIComponent(`Bonjour, je suis int\u00e9ress\u00e9 par vos produits et je suis bas\u00e9 \u00e0 ${city}.`);\r\n whatsappButton.href = `https:\/\/api.whatsapp.com\/message\/WOS4ZC6VEWBLC1?autoload=1&app_absent=0&text=${whatsappMessage}`;\r\n } else {\r\n message.classList.remove(\"hidden\");\r\n }\r\n \r\n \/\/ Afficher les boutons apr\u00e8s avoir soumis la ville\r\n actionButtons.classList.remove(\"hidden\");\r\n \r\n \/\/ Remplacer \"Suivant\" par \"Pr\u00e9c\u00e9dent\"\r\n document.getElementById(\"nextButton\").classList.add(\"hidden\");\r\n document.getElementById(\"previousButton\").classList.remove(\"hidden\");\r\n }\r\n \r\n function goBack() {\r\n document.getElementById(\"userType\").value = \"\";\r\n document.getElementById(\"citySelection\").classList.add(\"hidden\");\r\n document.getElementById(\"message\").classList.add(\"hidden\");\r\n document.getElementById(\"questionSection\").classList.remove(\"hidden\");\r\n document.getElementById(\"buttonSection\").classList.remove(\"hidden\");\r\n document.getElementById(\"nextButton\").classList.remove(\"hidden\"); \/\/ R\u00e9afficher le bouton Suivant\r\n document.getElementById(\"previousButton\").classList.add(\"hidden\"); \/\/ Cacher le bouton Pr\u00e9c\u00e9dent\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Questionnaire Client Vous \u00eates ? — S\u00e9lectionnez —GrossisteRevendeurParticulierAutre Vous \u00eates dans quelle ville ? Merci de votre message, nous vous orientons vers un revendeur partenaire ! Pr\u00e9c\u00e9dent Suivant WhatsApp Appeler<\/p>\n","protected":false},"author":113,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-21567","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/pages\/21567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/comments?post=21567"}],"version-history":[{"count":24,"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/pages\/21567\/revisions"}],"predecessor-version":[{"id":28852,"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/pages\/21567\/revisions\/28852"}],"wp:attachment":[{"href":"https:\/\/tthcompany.ma\/index.php\/wp-json\/wp\/v2\/media?parent=21567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}