{"id":566,"date":"2026-02-27T08:20:48","date_gmt":"2026-02-27T11:20:48","guid":{"rendered":"https:\/\/sogima-rj.com\/?page_id=566"},"modified":"2026-02-27T08:21:36","modified_gmt":"2026-02-27T11:21:36","slug":"teste-form","status":"publish","type":"page","link":"https:\/\/sogima-rj.com\/index.php\/teste-form\/","title":{"rendered":"TESTE FORM"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"566\" class=\"elementor elementor-566\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-128623a e-flex e-con-boxed e-con e-parent\" data-id=\"128623a\" 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-547a52e elementor-widget elementor-widget-html\" data-id=\"547a52e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- =========================================\r\n     FORMUL\u00c1RIO CONDICIONAL (Escopado)\r\n     - N\u00e3o interfere no restante da p\u00e1gina (Elementor\/WordPress)\r\n     - Responsivo (mobile-first)\r\n     - Fonte: Montserrat\r\n     - L\u00f3gica:\r\n       * Ginecologista => abre 2 perguntas + habilita envio\r\n       * M\u00e9dico (ou outros) => bloqueia envio\r\n   ========================================= -->\r\n<section id=\"cfw-cond-form\" aria-label=\"Formul\u00e1rio Condicional\">\r\n  <!-- Fonte Montserrat (ok manter aqui; est\u00e1 escopado e n\u00e3o quebra o site) -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n  <style>\r\n    \/* ============================\r\n       CFW \u2014 Scoped Styles\r\n       ============================ *\/\r\n    #cfw-cond-form{\r\n      --cfw-bg: #ffffff;\r\n      --cfw-text: #0f172a;\r\n      --cfw-muted: #475569;\r\n      --cfw-line: rgba(2, 6, 23, .12);\r\n      --cfw-primary: #2563eb;\r\n      --cfw-primary-2: #1d4ed8;\r\n      --cfw-danger: #dc2626;\r\n      --cfw-success: #16a34a;\r\n      --cfw-radius: 16px;\r\n      --cfw-shadow: 0 18px 50px rgba(2, 6, 23, .10);\r\n      font-family: \"Montserrat\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n      color: var(--cfw-text);\r\n    }\r\n\r\n    #cfw-cond-form *{ box-sizing: border-box; }\r\n\r\n    #cfw-cond-form .cfw-wrap{\r\n      width: min(860px, 92%);\r\n      margin: 0 auto;\r\n      background: var(--cfw-bg);\r\n      border: 1px solid var(--cfw-line);\r\n      border-radius: var(--cfw-radius);\r\n      box-shadow: var(--cfw-shadow);\r\n      padding: 22px;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-head{\r\n      display: grid;\r\n      gap: 6px;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-title{\r\n      font-weight: 700;\r\n      letter-spacing: -0.02em;\r\n      font-size: clamp(18px, 2.3vw, 24px);\r\n      margin: 0;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-sub{\r\n      margin: 0;\r\n      color: var(--cfw-muted);\r\n      font-size: 14px;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    #cfw-cond-form form{\r\n      display: grid;\r\n      gap: 12px;\r\n      margin-top: 14px;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-grid{\r\n      display: grid;\r\n      gap: 12px;\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    @media (min-width: 780px){\r\n      #cfw-cond-form .cfw-grid{\r\n        grid-template-columns: 1fr 1fr;\r\n      }\r\n      #cfw-cond-form .cfw-span-2{\r\n        grid-column: span 2;\r\n      }\r\n    }\r\n\r\n    #cfw-cond-form label{\r\n      display: block;\r\n      font-weight: 600;\r\n      font-size: 13px;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-field{\r\n      width: 100%;\r\n      border: 1px solid var(--cfw-line);\r\n      border-radius: 12px;\r\n      padding: 12px 12px;\r\n      font-size: 14px;\r\n      outline: none;\r\n      background: #fff;\r\n      color: var(--cfw-text);\r\n      transition: border-color .15s ease, box-shadow .15s ease;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-field:focus{\r\n      border-color: rgba(37, 99, 235, .55);\r\n      box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);\r\n    }\r\n\r\n    #cfw-cond-form .cfw-help{\r\n      font-size: 12px;\r\n      color: var(--cfw-muted);\r\n      margin-top: 6px;\r\n      line-height: 1.35;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-box{\r\n      border: 1px dashed rgba(2, 6, 23, .18);\r\n      border-radius: 14px;\r\n      padding: 14px;\r\n      background: rgba(2, 6, 23, .02);\r\n    }\r\n\r\n    #cfw-cond-form .cfw-box-title{\r\n      margin: 0 0 10px 0;\r\n      font-weight: 700;\r\n      font-size: 14px;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-msg{\r\n      border-radius: 12px;\r\n      padding: 12px 12px;\r\n      font-size: 13px;\r\n      line-height: 1.35;\r\n      display: none;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-msg--danger{\r\n      display: block;\r\n      background: rgba(220, 38, 38, .08);\r\n      border: 1px solid rgba(220, 38, 38, .25);\r\n      color: #7f1d1d;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-msg--success{\r\n      display: block;\r\n      background: rgba(22, 163, 74, .08);\r\n      border: 1px solid rgba(22, 163, 74, .22);\r\n      color: #14532d;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-actions{\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 10px;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      margin-top: 4px;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-btn{\r\n      appearance: none;\r\n      border: none;\r\n      border-radius: 999px;\r\n      padding: 12px 16px;\r\n      font-weight: 700;\r\n      font-size: 14px;\r\n      cursor: pointer;\r\n      background: var(--cfw-primary);\r\n      color: #fff;\r\n      transition: transform .06s ease, background .15s ease, opacity .15s ease;\r\n      width: 100%;\r\n    }\r\n\r\n    @media (min-width: 520px){\r\n      #cfw-cond-form .cfw-btn{ width: auto; min-width: 200px; }\r\n    }\r\n\r\n    #cfw-cond-form .cfw-btn:hover{ background: var(--cfw-primary-2); }\r\n    #cfw-cond-form .cfw-btn:active{ transform: translateY(1px); }\r\n    #cfw-cond-form .cfw-btn[disabled]{\r\n      opacity: .55;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-note{\r\n      font-size: 12px;\r\n      color: var(--cfw-muted);\r\n      line-height: 1.35;\r\n      margin: 0;\r\n    }\r\n\r\n    #cfw-cond-form .cfw-hidden{\r\n      display: none !important;\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"cfw-wrap\">\r\n    <div class=\"cfw-head\">\r\n      <h2 class=\"cfw-title\">Formul\u00e1rio de Contato<\/h2>\r\n      <p class=\"cfw-sub\">Preencha seus dados e selecione sua profiss\u00e3o para continuar.<\/p>\r\n    <\/div>\r\n\r\n    <!--\r\n      \u2705 A\u00e7\u00e3o de envio:\r\n      - Por padr\u00e3o, est\u00e1 \"fake\" (n\u00e3o envia pra lugar nenhum).\r\n      - Se voc\u00ea usar um endpoint (ex: webhook, WP, etc.), troque o data-endpoint.\r\n    -->\r\n    <form id=\"cfwForm\" novalidate data-endpoint=\"\">\r\n      <div class=\"cfw-grid\">\r\n        <div>\r\n          <label for=\"cfw_name\">Nome<\/label>\r\n          <input id=\"cfw_name\" name=\"name\" class=\"cfw-field\" type=\"text\" placeholder=\"Seu nome completo\" autocomplete=\"name\" required \/>\r\n        <\/div>\r\n\r\n        <div>\r\n          <label for=\"cfw_phone\">Telefone<\/label>\r\n          <input id=\"cfw_phone\" name=\"phone\" class=\"cfw-field\" type=\"tel\" placeholder=\"(DDD) 9xxxx-xxxx\" autocomplete=\"tel\" required \/>\r\n          <div class=\"cfw-help\">Dica: inclua DDD.<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"cfw-span-2\">\r\n          <label for=\"cfw_email\">E-mail<\/label>\r\n          <input id=\"cfw_email\" name=\"email\" class=\"cfw-field\" type=\"email\" placeholder=\"seuemail@dominio.com\" autocomplete=\"email\" required \/>\r\n        <\/div>\r\n\r\n        <div class=\"cfw-span-2 cfw-box\">\r\n          <p class=\"cfw-box-title\">Pergunta Condicional<\/p>\r\n\r\n          <label for=\"cfw_prof\">Qual sua profiss\u00e3o?<\/label>\r\n          <select id=\"cfw_prof\" name=\"profession\" class=\"cfw-field\" required>\r\n            <option value=\"\" selected disabled>Selecione\u2026<\/option>\r\n            <option value=\"ginecologista\">Ginecologista<\/option>\r\n            <option value=\"medico\">M\u00e9dico<\/option>\r\n          <\/select>\r\n\r\n          <div id=\"cfwBlockMsg\" class=\"cfw-msg\" aria-live=\"polite\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- Bloco que s\u00f3 aparece se for Ginecologista -->\r\n        <div id=\"cfwExtraBlock\" class=\"cfw-span-2 cfw-box cfw-hidden\" aria-hidden=\"true\">\r\n          <p class=\"cfw-box-title\">Perguntas adicionais<\/p>\r\n\r\n          <div class=\"cfw-grid\">\r\n            <div>\r\n              <label for=\"cfw_city\">Cidade<\/label>\r\n              <input id=\"cfw_city\" name=\"city\" class=\"cfw-field\" type=\"text\" placeholder=\"Ex: Rio de Janeiro\" \/>\r\n            <\/div>\r\n\r\n            <div>\r\n              <label for=\"cfw_crm\">CRM (opcional)<\/label>\r\n              <input id=\"cfw_crm\" name=\"crm\" class=\"cfw-field\" type=\"text\" placeholder=\"Ex: CRM\/UF 123456\" \/>\r\n            <\/div>\r\n\r\n            <div class=\"cfw-span-2\">\r\n              <label for=\"cfw_msg\">Mensagem (opcional)<\/label>\r\n              <textarea id=\"cfw_msg\" name=\"message\" class=\"cfw-field\" rows=\"4\" placeholder=\"Conte rapidamente o que voc\u00ea precisa\"><\/textarea>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"cfw-actions\">\r\n        <button id=\"cfwSubmit\" class=\"cfw-btn\" type=\"submit\" disabled>Enviar<\/button>\r\n        <p class=\"cfw-note\" id=\"cfwHint\">\r\n          Selecione sua profiss\u00e3o para liberar o envio.\r\n        <\/p>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function(){\r\n      \"use strict\";\r\n\r\n      const root = document.getElementById(\"cfw-cond-form\");\r\n      if(!root) return;\r\n\r\n      const form = root.querySelector(\"#cfwForm\");\r\n      const prof = root.querySelector(\"#cfw_prof\");\r\n      const extraBlock = root.querySelector(\"#cfwExtraBlock\");\r\n      const msg = root.querySelector(\"#cfwBlockMsg\");\r\n      const submitBtn = root.querySelector(\"#cfwSubmit\");\r\n      const hint = root.querySelector(\"#cfwHint\");\r\n\r\n      const requiredCoreIds = [\"cfw_name\", \"cfw_phone\", \"cfw_email\", \"cfw_prof\"];\r\n      const coreFields = requiredCoreIds.map(id => root.querySelector(\"#\" + id)).filter(Boolean);\r\n\r\n      function setMessage(type, text){\r\n        msg.className = \"cfw-msg\";\r\n        if(!text){\r\n          msg.style.display = \"none\";\r\n          msg.textContent = \"\";\r\n          return;\r\n        }\r\n        msg.style.display = \"block\";\r\n        msg.classList.add(type === \"danger\" ? \"cfw-msg--danger\" : \"cfw-msg--success\");\r\n        msg.textContent = text;\r\n      }\r\n\r\n      function showExtra(show){\r\n        if(show){\r\n          extraBlock.classList.remove(\"cfw-hidden\");\r\n          extraBlock.setAttribute(\"aria-hidden\", \"false\");\r\n        }else{\r\n          extraBlock.classList.add(\"cfw-hidden\");\r\n          extraBlock.setAttribute(\"aria-hidden\", \"true\");\r\n\r\n          \/\/ limpa campos extras (opcional, mas ajuda a n\u00e3o \"vazar\" dados)\r\n          extraBlock.querySelectorAll(\"input, textarea, select\").forEach(el => el.value = \"\");\r\n        }\r\n      }\r\n\r\n      function coreIsValid(){\r\n        \/\/ valida somente campos principais + profiss\u00e3o\r\n        return coreFields.every(f => f && String(f.value || \"\").trim().length > 0) && form.checkValidity();\r\n      }\r\n\r\n      function setSubmitEnabled(enabled){\r\n        submitBtn.disabled = !enabled;\r\n      }\r\n\r\n      function handleProfession(){\r\n        const val = prof.value;\r\n\r\n        \/\/ Sem profiss\u00e3o: bloqueia\r\n        if(!val){\r\n          showExtra(false);\r\n          setSubmitEnabled(false);\r\n          setMessage(\"\", \"\");\r\n          hint.textContent = \"Selecione sua profiss\u00e3o para liberar o envio.\";\r\n          return;\r\n        }\r\n\r\n        \/\/ P\u00fablico qualificado: ginecologista\r\n        if(val === \"ginecologista\"){\r\n          showExtra(true);\r\n          setMessage(\"success\", \"Perfeito! S\u00f3 mais algumas perguntas e voc\u00ea j\u00e1 pode enviar.\");\r\n          hint.textContent = \"Preencha os campos e clique em Enviar.\";\r\n          setSubmitEnabled(coreIsValid());\r\n          return;\r\n        }\r\n\r\n        \/\/ N\u00e3o qualificado: m\u00e9dico (ou outros)\r\n        showExtra(false);\r\n        setSubmitEnabled(false);\r\n        setMessage(\"danger\", \"No momento, este formul\u00e1rio \u00e9 destinado apenas a ginecologistas.\");\r\n        hint.textContent = \"Para continuar, selecione a op\u00e7\u00e3o Ginecologista.\";\r\n      }\r\n\r\n      \/\/ Atualiza habilita\u00e7\u00e3o do bot\u00e3o conforme digita nos campos principais\r\n      function handleCoreTyping(){\r\n        if(prof.value === \"ginecologista\"){\r\n          setSubmitEnabled(coreIsValid());\r\n        }else{\r\n          setSubmitEnabled(false);\r\n        }\r\n      }\r\n\r\n      prof.addEventListener(\"change\", handleProfession);\r\n      coreFields.forEach(f => f.addEventListener(\"input\", handleCoreTyping));\r\n\r\n      form.addEventListener(\"submit\", function(e){\r\n        e.preventDefault();\r\n\r\n        \/\/ Bloqueia se n\u00e3o for qualificado\r\n        if(prof.value !== \"ginecologista\"){\r\n          setSubmitEnabled(false);\r\n          setMessage(\"danger\", \"Envio bloqueado: selecione Ginecologista para prosseguir.\");\r\n          return;\r\n        }\r\n\r\n        \/\/ Valida\u00e7\u00e3o final\r\n        if(!form.checkValidity()){\r\n          setMessage(\"danger\", \"Verifique os campos obrigat\u00f3rios antes de enviar.\");\r\n          return;\r\n        }\r\n\r\n        \/\/ \u2705 Aqui voc\u00ea escolhe como enviar:\r\n        \/\/ 1) Integrar com endpoint\/webhook (recomendado)\r\n        \/\/ 2) Capturar os dados e disparar para CRM\r\n        \/\/\r\n        \/\/ Por padr\u00e3o, apenas simula sucesso.\r\n\r\n        const endpoint = form.getAttribute(\"data-endpoint\") || \"\";\r\n        const data = Object.fromEntries(new FormData(form).entries());\r\n\r\n        if(endpoint){\r\n          fetch(endpoint, {\r\n            method: \"POST\",\r\n            headers: { \"Content-Type\": \"application\/json\" },\r\n            body: JSON.stringify(data)\r\n          })\r\n          .then(async (r) => {\r\n            if(!r.ok) throw new Error(\"Falha no envio\");\r\n            setMessage(\"success\", \"Enviado com sucesso! Em breve entraremos em contato.\");\r\n            form.reset();\r\n            showExtra(false);\r\n            setSubmitEnabled(false);\r\n            hint.textContent = \"Selecione sua profiss\u00e3o para liberar o envio.\";\r\n          })\r\n          .catch(() => {\r\n            setMessage(\"danger\", \"N\u00e3o foi poss\u00edvel enviar agora. Tente novamente em instantes.\");\r\n          });\r\n          return;\r\n        }\r\n\r\n        \/\/ fallback (sem endpoint)\r\n        setMessage(\"success\", \"Enviado com sucesso! (simula\u00e7\u00e3o) Configure um endpoint para receber os dados.\");\r\n        \/\/ console.log(\"Dados do formul\u00e1rio:\", data);\r\n\r\n        form.reset();\r\n        showExtra(false);\r\n        setSubmitEnabled(false);\r\n        hint.textContent = \"Selecione sua profiss\u00e3o para liberar o envio.\";\r\n      });\r\n\r\n      \/\/ init\r\n      handleProfession();\r\n    })();\r\n  <\/script>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>Formul\u00e1rio de Contato Preencha seus dados e selecione sua profiss\u00e3o para continuar. Nome Telefone Dica: inclua DDD. E-mail Pergunta Condicional Qual sua profiss\u00e3o? Selecione\u2026GinecologistaM\u00e9dico Perguntas adicionais Cidade CRM (opcional) Mensagem (opcional) Enviar Selecione sua profiss\u00e3o para liberar o envio.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-566","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sogima-rj.com\/index.php\/wp-json\/wp\/v2\/pages\/566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sogima-rj.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sogima-rj.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sogima-rj.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sogima-rj.com\/index.php\/wp-json\/wp\/v2\/comments?post=566"}],"version-history":[{"count":4,"href":"https:\/\/sogima-rj.com\/index.php\/wp-json\/wp\/v2\/pages\/566\/revisions"}],"predecessor-version":[{"id":570,"href":"https:\/\/sogima-rj.com\/index.php\/wp-json\/wp\/v2\/pages\/566\/revisions\/570"}],"wp:attachment":[{"href":"https:\/\/sogima-rj.com\/index.php\/wp-json\/wp\/v2\/media?parent=566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}