{"id":2553,"date":"2025-09-19T16:11:44","date_gmt":"2025-09-19T16:11:44","guid":{"rendered":"https:\/\/webontwerpers.be\/offerte\/"},"modified":"2026-01-23T18:42:06","modified_gmt":"2026-01-23T18:42:06","slug":"offerte","status":"publish","type":"page","link":"https:\/\/webontwerpers.be\/fr\/offerte\/","title":{"rendered":"Offerte"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2553\" class=\"elementor elementor-2553 elementor-1195\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-695acb6 e-flex e-con-boxed e-con e-parent\" data-id=\"695acb6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d8b1c6 elementor-widget elementor-widget-shortcode\" data-id=\"7d8b1c6\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><span id=\"wof-meta\" data-nonce=\"a3eca78719\" data-ajax=\"https:\/\/webontwerpers.be\/wp-admin\/admin-ajax.php\" style=\"display:none!important;\"><\/span><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-37ba3f9 e-con-full e-flex e-con e-parent\" data-id=\"37ba3f9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d73e65d elementor-widget elementor-widget-html\" data-id=\"d73e65d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- WEBONTWERPERS \u2014 OFFORTE PAGE (Elementor HTML Widget) | DARK PREMIUM SAFE LAYOUT\n     \u2705 Dark background (same language as service pages)\n     \u2705 No 100vw left\/margin hack (Elementor safe)\n     \u2705 AJAX wp_mail via functions.php endpoint\n-->\n<section class=\"wof-offerte-dark\" id=\"wof-offerte\">\n  <style>\n    \/* Scoped reset *\/\n    .wof-offerte-dark, .wof-offerte-dark *{ box-sizing:border-box; }\n    .wof-offerte-dark img{ max-width:100%; height:auto; display:block; }\n    .wof-offerte-dark button, .wof-offerte-dark input, .wof-offerte-dark select, .wof-offerte-dark textarea{ font:inherit; margin:0; }\n    .wof-offerte-dark h1,.wof-offerte-dark h2,.wof-offerte-dark h3,.wof-offerte-dark h4,.wof-offerte-dark p{ margin:0; }\n\n    :root{\n      --brand-blue:#015af2;\n      --brand-purple:#a154d0;\n\n      --bg-main:#0b0f1a;\n      --bg-soft:#11172a;\n\n      --text-main:#ffffff;\n      --text-muted:rgba(255,255,255,.72);\n      --border-soft:rgba(255,255,255,.14);\n\n      --radius-xl:24px;\n      --radius-lg:18px;\n\n      --shadow-xl:0 30px 80px rgba(0,0,0,.55);\n      --shadow-md:0 18px 50px rgba(0,0,0,.35);\n\n      --max-width:1100px;\n      --font-main:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;\n    }\n\n    \/* Section (dark) *\/\n    .wof-offerte-dark{\n      width:100%;\n      padding: 96px 0;\n      font-family:var(--font-main);\n      color:var(--text-main);\n      position:relative;\n      overflow:hidden;\n      background:\n        radial-gradient(900px 600px at 15% 15%, rgba(1,90,242,.35), transparent 60%),\n        radial-gradient(900px 600px at 85% 20%, rgba(161,84,208,.35), transparent 60%),\n        radial-gradient(900px 520px at 50% 110%, rgba(1,90,242,.22), transparent 65%),\n        var(--bg-main);\n      isolation:isolate;\n    }\n\n    .wof-offerte-dark::before{\n      content:\"\";\n      position:absolute; inset:-30%;\n      background: conic-gradient(from 0deg, rgba(1,90,242,.24), rgba(161,84,208,.24), rgba(1,90,242,.24));\n      opacity:.10;\n      filter: blur(18px);\n      animation: wofSpin 22s linear infinite;\n      pointer-events:none;\n      z-index:0;\n    }\n    @keyframes wofSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }\n\n    .wof-wrap{\n      max-width:var(--max-width);\n      margin:0 auto;\n      padding:0 18px;\n      position:relative;\n      z-index:1;\n    }\n\n    \/* Header *\/\n    .wof-head{\n      display:grid;\n      grid-template-columns: 1.2fr .8fr;\n      gap: 18px;\n      align-items:end;\n      margin-bottom: 22px;\n    }\n\n    .wof-eyebrow{\n      font-size:12px;\n      font-weight:900;\n      letter-spacing:.35px;\n      text-transform:uppercase;\n      color:var(--brand-blue);\n      margin-bottom:12px;\n    }\n\n    .wof-title{\n      font-size:clamp(28px,3.4vw,44px);\n      line-height:1.1;\n      letter-spacing:-0.6px;\n      margin:0 0 10px;\n    }\n    .wof-title span{\n      background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple));\n      -webkit-background-clip:text;\n      background-clip:text;\n      color:transparent;\n    }\n\n    .wof-sub{\n      color:var(--text-muted);\n      font-size:15.6px;\n      line-height:1.75;\n      max-width:70ch;\n      justify-self:end;\n    }\n\n    \/* Card *\/\n    .wof-card{\n      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));\n      border:1px solid var(--border-soft);\n      border-radius: var(--radius-xl);\n      padding: 22px;\n      box-shadow: var(--shadow-xl);\n      position:relative;\n      overflow:hidden;\n    }\n\n    .wof-card::after{\n      content:\"\";\n      position:absolute; inset:-2px;\n      background: linear-gradient(135deg, rgba(1,90,242,.18), rgba(161,84,208,.18), rgba(1,90,242,.10));\n      opacity:.18;\n      filter: blur(16px);\n      pointer-events:none;\n    }\n\n    .wof-inner{ position:relative; z-index:1; }\n\n    \/* Progress *\/\n    .wof-progress{\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      gap: 12px;\n      padding: 14px 14px;\n      border-radius: 18px;\n      background: rgba(0,0,0,.28);\n      border: 1px solid var(--border-soft);\n      margin-bottom: 14px;\n    }\n    .wof-progress strong{ font-weight: 900; }\n    .wof-bar{\n      flex: 1 1 auto;\n      height: 10px;\n      border-radius: 999px;\n      background: rgba(255,255,255,.12);\n      overflow:hidden;\n      position:relative;\n    }\n    .wof-bar > i{\n      position:absolute; inset:0;\n      width: 33%;\n      border-radius: 999px;\n      background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));\n      transition: width .22s ease;\n      display:block;\n    }\n\n    \/* Service cards *\/\n    .wof-services{\n      display:grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 12px;\n      margin-bottom: 14px;\n    }\n    .wof-service{\n      user-select:none;\n      cursor:pointer;\n      border-radius: 18px;\n      padding: 14px;\n      background: rgba(0,0,0,.28);\n      border: 1px solid var(--border-soft);\n      box-shadow: var(--shadow-md);\n      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;\n      min-height: 98px;\n    }\n    .wof-service:hover{\n      transform: translateY(-2px);\n      box-shadow: 0 22px 70px rgba(0,0,0,.45);\n      border-color: rgba(255,255,255,.22);\n    }\n    .wof-service.active{\n      background: linear-gradient(135deg, rgba(1,90,242,.22), rgba(161,84,208,.20));\n      border-color: rgba(1,90,242,.55);\n      box-shadow: 0 26px 85px rgba(1,90,242,.14);\n    }\n    .wof-service h4{\n      font-size:14.4px;\n      font-weight:900;\n      letter-spacing:-0.2px;\n      margin-bottom:6px;\n    }\n    .wof-service p{\n      font-size:13.2px;\n      color:var(--text-muted);\n      line-height:1.55;\n    }\n\n    \/* Blocks *\/\n    .wof-block{\n      margin-top: 14px;\n      padding: 14px;\n      border-radius: 18px;\n      background: rgba(0,0,0,.26);\n      border: 1px solid var(--border-soft);\n      display:none;\n    }\n    .wof-block.active{ display:block; }\n\n    .wof-blockTitle{\n      font-size:12px;\n      font-weight:900;\n      letter-spacing:.35px;\n      text-transform:uppercase;\n      color: rgba(255,255,255,.78);\n      margin-bottom:10px;\n    }\n\n    .wof-fields{\n      display:grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n      margin-top: 10px;\n    }\n    .wof-field{ display:flex; flex-direction:column; gap: 6px; }\n    .wof-field.full{ grid-column: 1 \/ -1; }\n\n    .wof-label{\n      font-weight:800;\n      font-size: 12.8px;\n      color: rgba(255,255,255,.72);\n      letter-spacing:.12px;\n    }\n\n    .wof-input, .wof-select, .wof-textarea{\n      width:100%;\n      border-radius: 14px;\n      border:1px solid var(--border-soft);\n      background: rgba(0,0,0,.35);\n      padding: 13px 13px;\n      font-size: 14px;\n      color:#fff;\n      outline:none;\n      transition:border .22s ease, box-shadow .22s ease, transform .22s ease;\n    }\n    .wof-textarea{ min-height: 130px; resize: vertical; line-height:1.6; }\n    .wof-input::placeholder, .wof-textarea::placeholder{ color: rgba(255,255,255,.40); }\n\n    .wof-input:focus, .wof-select:focus, .wof-textarea:focus{\n      border-color: var(--brand-blue);\n      box-shadow: 0 0 0 2px rgba(1,90,242,.25);\n      transform: translateY(-1px);\n    }\n\n    \/* Pills *\/\n    .wof-pillRow{ display:flex; flex-wrap:wrap; gap: 10px; }\n    .wof-pill{\n      display:inline-flex;\n      align-items:center;\n      padding: 12px 12px;\n      border-radius: 16px;\n      border: 1px solid var(--border-soft);\n      background: rgba(0,0,0,.35);\n      cursor:pointer;\n      user-select:none;\n      font-weight: 800;\n      font-size: 13px;\n      color: rgba(255,255,255,.86);\n      transition: transform .18s ease, border-color .18s ease, background .18s ease;\n    }\n    .wof-pill:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }\n    .wof-pill.active{\n      background: linear-gradient(135deg, rgba(1,90,242,.22), rgba(161,84,208,.20));\n      border-color: rgba(1,90,242,.55);\n    }\n    .wof-pill input{ display:none; }\n\n    \/* Note *\/\n    .wof-note{\n      margin-top: 12px;\n      padding: 12px;\n      border-radius: 18px;\n      background: rgba(1,90,242,.08);\n      border: 1px solid rgba(1,90,242,.22);\n      color: rgba(255,255,255,.72);\n      font-size: 12.9px;\n      line-height:1.55;\n    }\n\n    \/* Actions *\/\n    .wof-actions{\n      margin-top: 14px;\n      display:flex;\n      gap: 10px;\n      align-items:center;\n      flex-wrap:wrap;\n    }\n    .wof-btn{\n      border-radius: 16px;\n      font-weight: 900;\n      letter-spacing:.2px;\n      cursor:pointer;\n      border: 1px solid var(--border-soft);\n      background: rgba(0,0,0,.30);\n      color: rgba(255,255,255,.92);\n      padding: 13px 16px;\n      display:inline-flex;\n      align-items:center;\n      justify-content:center;\n      text-decoration:none !important;\n      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;\n      box-shadow: 0 18px 45px rgba(0,0,0,.35);\n      white-space:nowrap;\n      user-select:none;\n    }\n    .wof-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }\n    .wof-btnPrimary{\n      border:none;\n      background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));\n      color:#fff;\n      box-shadow: 0 18px 45px rgba(1,90,242,.35);\n    }\n    .wof-btnPrimary:hover{ box-shadow: 0 26px 70px rgba(1,90,242,.40); }\n    .wof-btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; }\n\n    .wof-success, .wof-error{\n      display:none;\n      margin-top: 12px;\n      padding: 12px;\n      border-radius: 18px;\n      font-size: 13.2px;\n      line-height:1.55;\n      border: 1px solid var(--border-soft);\n      background: rgba(0,0,0,.28);\n      box-shadow: 0 16px 40px rgba(0,0,0,.35);\n    }\n    .wof-success{ border-color: rgba(34,197,94,.28); }\n    .wof-error{ border-color: rgba(239,68,68,.28); }\n\n    @media(max-width: 980px){\n      .wof-head{ grid-template-columns: 1fr; }\n      .wof-sub{ justify-self:start; }\n      .wof-services{ grid-template-columns: 1fr 1fr; }\n      .wof-fields{ grid-template-columns: 1fr; }\n    }\n    @media(max-width: 520px){\n      .wof-services{ grid-template-columns: 1fr; }\n    }\n    @media (prefers-reduced-motion: reduce){\n      .wof-offerte-dark::before{ animation:none !important; }\n      .wof-service, .wof-btn, .wof-input, .wof-select, .wof-textarea{ transition:none !important; }\n    }\n  <\/style>\n  <div class=\"wof-wrap\">\n    <div class=\"wof-head\">\n      <div>\n        <div class=\"wof-eyebrow\">Devis<\/div>\n        <h1 class=\"wof-title\">Demandez un <span>devis<\/span> en 1 minute<\/h1>\n      <\/div>\n      <p class=\"wof-sub\">\n        Choisissez d\u2019abord le service. Ensuite, nous n\u2019affichons que les questions pertinentes.\n        Ainsi, tout reste rapide et clair \u2014 et nous pouvons vous aider imm\u00e9diatement de mani\u00e8re cibl\u00e9e.\n      <\/p>\n    <\/div>\n\n    <div class=\"wof-card\">\n      <div class=\"wof-inner\">\n\n        <div class=\"wof-progress\">\n          <div><strong>\u00c9tape<\/strong> <span id=\"wofStepTxt\">1<\/span> \/ 3<\/div>\n          <div class=\"wof-bar\" aria-hidden=\"true\"><i id=\"wofBar\"><\/i><\/div>\n        <\/div>\n\n        <form id=\"wofForm\" novalidate>\n          <!-- spam honeypot -->\n          <input type=\"text\" name=\"website\" style=\"display:none\" tabindex=\"-1\" autocomplete=\"off\">\n\n          <!-- Service choose -->\n          <div class=\"wof-services\" id=\"wofServices\">\n            <div class=\"wof-service\" data-service=\"Packs de sites web\">\n              <h4>Packs de sites web<\/h4><p>Nouveau site ou refonte \u2014 premium & rapide.<\/p>\n            <\/div>\n            <div class=\"wof-service\" data-service=\"SEO\">\n              <h4>Optimisation SEO<\/h4><p>Plus de visiteurs organiques et de prospects.<\/p>\n            <\/div>\n            <div class=\"wof-service\" data-service=\"Google Ads\">\n              <h4>Google Ads<\/h4><p>Des demandes imm\u00e9diates gr\u00e2ce \u00e0 des campagnes cibl\u00e9es.<\/p>\n            <\/div>\n            <div class=\"wof-service\" data-service=\"Maintenance\">\n              <h4>Maintenance & Support<\/h4><p>Mises \u00e0 jour, s\u00e9curit\u00e9, sauvegardes, corrections.<\/p>\n            <\/div>\n          <\/div>\n\n          <input type=\"hidden\" id=\"wofService\" name=\"service\" required>\n\n          <!-- Website -->\n          <div class=\"wof-block\" id=\"blkWebsite\">\n            <div class=\"wof-blockTitle\">Site web \u2014 bref questionnaire<\/div>\n\n            <div class=\"wof-field full\">\n              <label class=\"wof-label\">Quel pack vous int\u00e9resse ?<\/label>\n              <div class=\"wof-pillRow\">\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"website_package\" value=\"Pack Starter\">Starter<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"website_package\" value=\"Pour les PME\">PME<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"website_package\" value=\"Professionnels\">Professionnels<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"website_package\" value=\"E-commerce\">E-commerce<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"website_package\" value=\"Projet sp\u00e9cial\">Projet sp\u00e9cial<\/label>\n              <\/div>\n            <\/div>\n\n            <div class=\"wof-fields\">\n              <div class=\"wof-field\">\n                <label class=\"wof-label\">Avez-vous d\u00e9j\u00e0 un domaine ?<\/label>\n                <select class=\"wof-select\" name=\"website_domain\">\n                  <option value=\"\" selected disabled>Choisir<\/option>\n                  <option>Oui<\/option><option>Non<\/option><option>Je ne sais pas<\/option>\n                <\/select>\n              <\/div>\n\n              <div class=\"wof-field\">\n                <label class=\"wof-label\">Avez-vous d\u00e9j\u00e0 un h\u00e9bergement ?<\/label>\n                <select class=\"wof-select\" name=\"website_hosting\">\n                  <option value=\"\" selected disabled>Choisir<\/option>\n                  <option>Oui<\/option><option>Non<\/option><option>Je ne sais pas<\/option>\n                <\/select>\n              <\/div>\n\n              <div class=\"wof-field full\">\n                <label class=\"wof-label\">Br\u00e8ve description<\/label>\n                <textarea class=\"wof-textarea\" name=\"website_notes\" placeholder=\"Type de site, fonctionnalit\u00e9s, nombre de pages, exemples\u2026\"><\/textarea>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- SEO -->\n          <div class=\"wof-block\" id=\"blkSeo\">\n            <div class=\"wof-blockTitle\">SEO \u2014 bref questionnaire<\/div>\n\n            <div class=\"wof-field full\">\n              <label class=\"wof-label\">Quel pack SEO vous int\u00e9resse ?<\/label>\n              <div class=\"wof-pillRow\">\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"seo_package\" value=\"SEO Basique\">SEO Basique<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"seo_package\" value=\"SEO Pro\">SEO Pro<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"seo_package\" value=\"SEO Premium\">SEO Premium<\/label>\n              <\/div>\n            <\/div>\n\n            <div class=\"wof-fields\">\n              <div class=\"wof-field\">\n                <label class=\"wof-label\">URL du site web<\/label>\n                <input class=\"wof-input\" name=\"seo_url\" type=\"url\" placeholder=\"https:\/\/...\">\n              <\/div>\n              <div class=\"wof-field\">\n                <label class=\"wof-label\">Objectif<\/label>\n                <select class=\"wof-select\" name=\"seo_goal\">\n                  <option value=\"\" selected disabled>Choisir<\/option>\n                  <option>Plus de prospects<\/option>\n                  <option>Plus de visiteurs<\/option>\n                  <option>Visibilit\u00e9 locale<\/option>\n                  <option>Ventes en ligne<\/option>\n                <\/select>\n              <\/div>\n              <div class=\"wof-field full\">\n                <label class=\"wof-label\">Vos objectifs \/ contexte<\/label>\n                <textarea class=\"wof-textarea\" name=\"seo_notes\" placeholder=\"Secteur, r\u00e9gion, services principaux\u2026\"><\/textarea>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Ads -->\n          <div class=\"wof-block\" id=\"blkAds\">\n            <div class=\"wof-blockTitle\">Google Ads \u2014 bref questionnaire<\/div>\n\n            <div class=\"wof-field full\">\n              <label class=\"wof-label\">Quel pack Ads vous int\u00e9resse ?<\/label>\n              <div class=\"wof-pillRow\">\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"ads_package\" value=\"D\u00e9but\">D\u00e9but<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"ads_package\" value=\"Croissance\">Croissance<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"ads_package\" value=\"Performance\">Performance<\/label>\n                <label class=\"wof-pill\"><input type=\"radio\" name=\"ads_package\" value=\"Avanc\u00e9\">Avanc\u00e9<\/label>\n              <\/div>\n            <\/div>\n\n            <div class=\"wof-fields\">\n              <div class=\"wof-field\">\n                <label class=\"wof-label\">Budget publicitaire mensuel<\/label>\n                <select class=\"wof-select\" name=\"ads_budget\">\n                  <option value=\"\" selected disabled>Choisir<\/option>\n                  <option>\u20ac100 \u2013 \u20ac250<\/option>\n                  <option>\u20ac300 \u2013 \u20ac500<\/option>\n                  <option>\u20ac500 \u2013 \u20ac800<\/option>\n                  <option>\u20ac800+<\/option>\n                <\/select>\n              <\/div>\n              <div class=\"wof-field\">\n                <label class=\"wof-label\">Avez-vous d\u00e9j\u00e0 un compte Google Ads ?<\/label>\n                <select class=\"wof-select\" name=\"ads_account\">\n                  <option value=\"\" selected disabled>Choisir<\/option>\n                  <option>Oui<\/option><option>Non<\/option><option>Je ne sais pas<\/option>\n                <\/select>\n              <\/div>\n              <div class=\"wof-field full\">\n                <label class=\"wof-label\">Que souhaitez-vous promouvoir ?<\/label>\n                <textarea class=\"wof-textarea\" name=\"ads_notes\" placeholder=\"Service\/produit, r\u00e9gion, objectif\u2026\"><\/textarea>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Onderhoud -->\n          <div class=\"wof-block\" id=\"blkMaint\">\n            <div class=\"wof-blockTitle\">Maintenance & support \u2014 bref questionnaire<\/div>\n\n            <div class=\"wof-fields\">\n              <div class=\"wof-field\">\n                <label class=\"wof-label\">Plateforme du site web<\/label>\n                <select class=\"wof-select\" name=\"maint_platform\">\n                  <option value=\"\" selected disabled>Choisir<\/option>\n                  <option>WordPress<\/option>\n                  <option>Shopify<\/option>\n                  <option>Wix \/ Squarespace<\/option>\n                  <option>Autre<\/option>\n                <\/select>\n              <\/div>\n              <div class=\"wof-field\">\n                <label class=\"wof-label\">Urgence<\/label>\n                <select class=\"wof-select\" name=\"maint_urgency\">\n                  <option value=\"\" selected disabled>Choisir<\/option>\n                  <option>Pas urgent<\/option>\n                  <option>Sous 1 semaine<\/option>\n                  <option>Le plus vite possible<\/option>\n                <\/select>\n              <\/div>\n              <div class=\"wof-field full\">\n                <label class=\"wof-label\">Que devons-nous r\u00e9soudre \/ am\u00e9liorer ?<\/label>\n                <textarea class=\"wof-textarea\" name=\"maint_notes\" placeholder=\"Mises \u00e0 jour, vitesse, bugs, s\u00e9curit\u00e9\u2026\"><\/textarea>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Contact -->\n          <div class=\"wof-block active\" id=\"blkContact\">\n            <div class=\"wof-blockTitle\">Vos coordonn\u00e9es<\/div>\n\n            <div class=\"wof-fields\">\n              <div class=\"wof-field\">\n                <label class=\"wof-label\" for=\"wofName\">Nom*<\/label>\n                <input class=\"wof-input\" id=\"wofName\" name=\"name\" type=\"text\" placeholder=\"Votre nom\" required>\n              <\/div>\n              <div class=\"wof-field\">\n                <label class=\"wof-label\" for=\"wofCompany\">Entreprise<\/label>\n                <input class=\"wof-input\" id=\"wofCompany\" name=\"company\" type=\"text\" placeholder=\"Nom de l\u2019entreprise (optionnel)\">\n              <\/div>\n              <div class=\"wof-field\">\n                <label class=\"wof-label\" for=\"wofEmail\">E-mail*<\/label>\n                <input class=\"wof-input\" id=\"wofEmail\" name=\"email\" type=\"email\" placeholder=\"nom@entreprise.be\" required>\n              <\/div>\n              <div class=\"wof-field\">\n                <label class=\"wof-label\" for=\"wofPhone\">T\u00e9l\u00e9phone<\/label>\n                <input class=\"wof-input\" id=\"wofPhone\" name=\"phone\" type=\"tel\" placeholder=\"+32 ...\">\n              <\/div>\n              <div class=\"wof-field full\">\n                <label class=\"wof-label\" for=\"wofExtra\">Message suppl\u00e9mentaire (optionnel)<\/label>\n                <textarea class=\"wof-textarea\" id=\"wofExtra\" name=\"extra\" placeholder=\"Contexte suppl\u00e9mentaire \u00e9ventuel\u2026\"><\/textarea>\n              <\/div>\n            <\/div>\n\n            <div class=\"wof-note\">\n              <strong>Conseil :<\/strong> Pour une r\u00e9ponse plus rapide : indiquez votre d\u00e9lai et des liens\/exemples.\n            <\/div>\n          <\/div>\n\n          <div class=\"wof-actions\">\n            <button class=\"wof-btn wof-btnPrimary\" id=\"wofSubmit\" type=\"submit\" disabled>Demander un devis<\/button>\n            <a class=\"wof-btn\" href=\"https:\/\/wa.me\/32471848302\" target=\"_blank\" rel=\"noopener\">WhatsApp<\/a>\n            <a class=\"wof-btn\" href=\"mailto:info@webontwerpers.be\">Pr\u00e9f\u00e9rer l\u2019e-mail<\/a>\n          <\/div>\n\n          <div class=\"wof-success\" id=\"wofSuccess\">\u2705 Merci ! Votre demande a \u00e9t\u00e9 envoy\u00e9e.<\/div>\n          <div class=\"wof-error\" id=\"wofError\">\u26a0\ufe0f L\u2019envoi a \u00e9chou\u00e9. R\u00e9essayez.<\/div>\n        <\/form>\n\n      <\/div>\n    <\/div>\n  <\/div>\n\n\n <script>\n(function(){\n  const form = document.getElementById('wofForm');\n  if(!form) return;\n\n  \/\/ \u2705 Fail-safe: wait for #wof-meta to exist (even if shortcode widget loads later)\n  function waitForMeta(maxMs = 2500){\n    return new Promise((resolve) => {\n      const start = Date.now();\n      (function tick(){\n        const el = document.getElementById('wof-meta');\n        if(el) return resolve(el);\n        if(Date.now() - start > maxMs) return resolve(null);\n        requestAnimationFrame(tick);\n      })();\n    });\n  }\n\n  const servicesWrap = document.getElementById('wofServices');\n  const serviceInput = document.getElementById('wofService');\n\n  const blkWebsite = document.getElementById('blkWebsite');\n  const blkSeo     = document.getElementById('blkSeo');\n  const blkAds     = document.getElementById('blkAds');\n  const blkMaint   = document.getElementById('blkMaint');\n\n  const submitBtn  = document.getElementById('wofSubmit');\n  const successBox = document.getElementById('wofSuccess');\n  const errorBox   = document.getElementById('wofError');\n\n  const stepTxt = document.getElementById('wofStepTxt');\n  const bar = document.getElementById('wofBar');\n\n  function showError(msg){\n    if(successBox) successBox.style.display = 'none';\n    if(errorBox){\n      errorBox.style.display = 'block';\n      errorBox.textContent = msg || '\u26a0\ufe0f Verzenden mislukt. Probeer opnieuw.';\n    }\n  }\n  function showSuccess(){\n    if(errorBox) errorBox.style.display = 'none';\n    if(successBox){\n      successBox.style.display = 'block';\n      successBox.textContent = '\u2705 Bedankt! Uw aanvraag is verzonden.';\n    }\n  }\n\n  function setProgress(step){\n    const s = Math.max(1, Math.min(3, step));\n    if(stepTxt) stepTxt.textContent = String(s);\n    if(bar) bar.style.width = (s===1? '33%': s===2? '66%':'100%');\n  }\n  setProgress(1);\n\n  function resetBlocks(){\n    [blkWebsite, blkSeo, blkAds, blkMaint].forEach(b=> b && b.classList.remove('active'));\n  }\n\n  \/\/ pill UI\n  function bindPills(scope){\n    if(!scope) return;\n    scope.querySelectorAll('.wof-pillRow').forEach(group=>{\n      group.addEventListener('click', (e)=>{\n        const pill = e.target.closest('.wof-pill');\n        if(!pill) return;\n        const radio = pill.querySelector('input[type=\"radio\"]');\n        if(!radio) return;\n\n        group.querySelectorAll('.wof-pill').forEach(p => p.classList.remove('active'));\n        pill.classList.add('active');\n        radio.checked = true;\n      });\n    });\n  }\n  [blkWebsite, blkSeo, blkAds].forEach(bindPills);\n\n  function enableSubmitIfReady(){\n    submitBtn.disabled = !serviceInput.value;\n  }\n\n  \/\/ service selection\n  const serviceCards = servicesWrap ? servicesWrap.querySelectorAll('.wof-service') : [];\n  serviceCards.forEach(card=>{\n    card.addEventListener('click', ()=>{\n      serviceCards.forEach(c=>c.classList.remove('active'));\n      card.classList.add('active');\n\n      const srv = card.getAttribute('data-service') || '';\n      serviceInput.value = srv;\n\n      resetBlocks();\n      if(srv === 'Websitepakketten') blkWebsite && blkWebsite.classList.add('active');\n      if(srv === 'SEO') blkSeo && blkSeo.classList.add('active');\n      if(srv === 'Google Ads') blkAds && blkAds.classList.add('active');\n      if(srv === 'Onderhoud') blkMaint && blkMaint.classList.add('active');\n\n      enableSubmitIfReady();\n      setProgress(2);\n\n      if(successBox) successBox.style.display = 'none';\n      if(errorBox) errorBox.style.display = 'none';\n    });\n  });\n\n  function isValidEmail(v){\n    return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(String(v||'').trim());\n  }\n\n  \/\/ \u2705 Main: wait for meta first, then attach submit handler\n  (async function init(){\n    const meta = await waitForMeta(2500);\n    const ajaxUrl = meta ? meta.getAttribute('data-ajax') : '';\n    const nonce   = meta ? meta.getAttribute('data-nonce') : '';\n\n    if(!ajaxUrl || !nonce){\n      \/\/ Don\u2019t block UI; just show message when user tries to submit\n      \/\/ (still allows them to fill the form)\n    }\n\n    form.addEventListener('submit', async function(e){\n      e.preventDefault();\n\n      if(!ajaxUrl || !nonce){\n        showError('\u26a0\ufe0f Shortcode widget <span id=\"wof-meta\" data-nonce=\"a3eca78719\" data-ajax=\"https:\/\/webontwerpers.be\/wp-admin\/admin-ajax.php\" style=\"display:none!important;\"><\/span> ontbreekt op de pagina (of staat onder de HTML widget).');\n        return;\n      }\n\n      if(!serviceInput.value){\n        alert('Kies eerst een dienst.');\n        return;\n      }\n\n      const name  = (form.querySelector('#wofName')?.value || '').trim();\n      const email = (form.querySelector('#wofEmail')?.value || '').trim();\n\n      if(!name || !isValidEmail(email)){\n        showError('\u26a0\ufe0f Controleer uw naam en e-mailadres.');\n        return;\n      }\n\n      submitBtn.disabled = true;\n      submitBtn.textContent = 'Verzenden...';\n\n      try{\n        const fd = new FormData(form);\n        fd.append('action', 'wof_send_offerte');\n        fd.append('nonce', nonce);\n        fd.set('service', serviceInput.value);\n        fd.append('page_url', window.location.href);\n\n        const res = await fetch(ajaxUrl, {\n          method:'POST',\n          body: fd,\n          credentials:'same-origin'\n        });\n\n        const text = await res.text();\n        let data = null;\n        try { data = JSON.parse(text); } catch(err){}\n\n        if(res.ok && data && data.success){\n          showSuccess();\n          form.reset();\n          serviceInput.value = '';\n          serviceCards.forEach(c=>c.classList.remove('active'));\n          resetBlocks();\n          enableSubmitIfReady();\n          setProgress(1);\n\n          \/\/ clear pill visuals\n          document.querySelectorAll('#wof-offerte .wof-pill.active').forEach(p=>p.classList.remove('active'));\n        } else {\n          const msg = (data && data.data && data.data.message) ? data.data.message : null;\n          showError('\u26a0\ufe0f Verzenden mislukt. ' + (msg ? msg : 'Probeer opnieuw.'));\n        }\n      }catch(err){\n        showError('\u26a0\ufe0f Netwerkfout. Probeer opnieuw.');\n      }finally{\n        submitBtn.disabled = !serviceInput.value;\n        submitBtn.textContent = 'Offerte aanvragen';\n      }\n    });\n\n    enableSubmitIfReady();\n  })();\n})();\n<\/script>\n\n\n  \n\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Devis Demandez un devis en 1 minute Choisissez d\u2019abord le service. Ensuite, nous n\u2019affichons que les questions pertinentes. Ainsi, tout reste rapide et clair \u2014 et nous pouvons vous aider imm\u00e9diatement de mani\u00e8re cibl\u00e9e. \u00c9tape 1 \/ 3 Packs de sites web Nouveau site ou refonte \u2014 premium &#038; rapide. Optimisation SEO Plus de visiteurs [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2553","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/pages\/2553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/comments?post=2553"}],"version-history":[{"count":6,"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/pages\/2553\/revisions"}],"predecessor-version":[{"id":2559,"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/pages\/2553\/revisions\/2559"}],"wp:attachment":[{"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/media?parent=2553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}