{"id":15,"date":"2026-04-17T23:13:05","date_gmt":"2026-04-17T23:13:05","guid":{"rendered":"https:\/\/hub.creativgraph.com\/?p=15"},"modified":"2026-04-17T23:13:07","modified_gmt":"2026-04-17T23:13:07","slug":"formulario","status":"publish","type":"post","link":"https:\/\/hub.creativgraph.com\/?p=15","title":{"rendered":"Formul\u00e1rio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"15\" class=\"elementor elementor-15\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6811c5f e-con-full e-flex e-con e-parent\" data-id=\"6811c5f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f9950f2 elementor-widget elementor-widget-image\" data-id=\"3f9950f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/hub.creativgraph.com\/wp-content\/plugins\/elementor\/assets\/images\/placeholder.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-468a4487 elementor-widget elementor-widget-html\" data-id=\"468a4487\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\n    const dominioAtual = window.location.origin;\r\n    const urlsModelo = {\r\n        modelo01: `${dominioAtual}\/proposta-foto`,\r\n        modelo02: `${dominioAtual}\/proposta-foto2`\r\n    };\r\n<\/script>\r\n\r\n<style>\r\n    .formProposta {\r\n        width: 25vw;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        padding: 20px;\r\n        border-radius: 10px;\r\n        border: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n    \r\n    @media(max-width:1366px){\r\n        .formProposta{\r\n            width: 35vw;\r\n        }\r\n    }\r\n    \r\n    @media(max-width:1024px){\r\n        .formProposta{\r\n            width: 90vw;\r\n        }\r\n    }\r\n\r\n    input,\r\n    label {\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    label {\r\n        color: rgba(255, 255, 255, 0.6);\r\n    }\r\n\r\n    input {\r\n        width: 100%;\r\n        height: 32px;\r\n        font-size: 16px;\r\n        padding: 5px;\r\n        font-family: Sans-Serif;\r\n        background-color: rgba(255, 255, 255, 0.15);\r\n        border-radius: 5px;\r\n        border: 1px solid rgba(0, 0, 0, 0.3);\r\n        color: rgba(255, 255, 255, 0.6);\r\n    }\r\n\r\n    .btn-gerador {\r\n        cursor: pointer;\r\n        padding: 12px;\r\n        width: 100%;\r\n        background: linear-gradient(to right, #fabf00, #ff268c);\r\n        border-radius: 5px;\r\n        font-weight: 700;\r\n        font-size: 18px;\r\n        color: #000;\r\n        border: 0px solid rgba(0, 0, 0, 0.3);\r\n        text-align: center;\r\n        align-self: center;\r\n    }\r\n\r\n    a {\r\n        color: #fff !important;\r\n    }\r\n\r\n    .modelos {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 5px;\r\n        justify-content: space-between;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .modelo {\r\n        width: 100%;\r\n        height: auto;\r\n        border-radius: 10px !important;\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n        border: 2px solid transparent;\r\n    }\r\n\r\n    .modelo.selecionado {\r\n        border: 2px solid #fabf00;\r\n    }\r\n    \r\n    #linkGerado {\r\n        margin-top: 10px;\r\n        color: #000!important;\r\n    }\r\n<\/style>\r\n\r\n<div class='formProposta'>\r\n    <form id=\"formProposta\">\r\n        <label for=\"cliente\">Nome do Cliente:<\/label><br>\r\n        <input type=\"text\" id=\"cliente\" name=\"cliente\" required><br>\r\n\r\n        <label for=\"envio\">Data de Envio:<\/label><br>\r\n        <input type=\"date\" id=\"envio\" name=\"envio\" required><br>\r\n\r\n        <label for=\"validade\">Validade (dias):<\/label><br>\r\n        <input type=\"number\" id=\"validade\" name=\"validade\" required><br><br>\r\n\r\n        <label for=\"valorPlanoUm\">Valor do Plano 1:<\/label><br>\r\n        <input type=\"number\" id=\"valorPlanoUm\" name=\"valorPlanoUm\" required><br>\r\n\r\n        <label for=\"valorPlanoDois\">Valor do Plano 2:<\/label><br>\r\n        <input type=\"number\" id=\"valorPlanoDois\" name=\"valorPlanoDois\" required><br>\r\n\r\n        <label for=\"valorPlanoTres\">Valor do Plano 3:<\/label><br>\r\n        <input type=\"number\" id=\"valorPlanoTres\" name=\"valorPlanoTres\" required><br><br>\r\n\r\n        <label>Modelo:<\/label><br>\r\n\r\n        <div class='modelos'>\r\n            <img class='modelo' src='\/wp-content\/uploads\/2024\/09\/modelo01.jpg' data-modelo=\"modelo01\" onclick=\"selecionarModelo(this)\">\r\n            <img class='modelo' src='\/wp-content\/uploads\/2024\/09\/modelo02.jpg' data-modelo=\"modelo02\" onclick=\"selecionarModelo(this)\">\r\n        <\/div>\r\n\r\n        <button type=\"button\" class=\"btn-gerador\" onclick=\"gerarLink()\">GERAR PROPOSTA<\/button>\r\n    <\/form>\r\n\r\n    <p id=\"linkGerado\"><\/p>\r\n<\/div>\r\n\r\n<script>\r\n    let modeloSelecionado = '';\r\n\r\n    function selecionarModelo(elemento) {\r\n        document.querySelectorAll('.modelo').forEach(img => img.classList.remove('selecionado'));\r\n        elemento.classList.add('selecionado');\r\n        modeloSelecionado = elemento.getAttribute('data-modelo');\r\n    }\r\n\r\n    function formatarDataParaBrasileiro(data) {\r\n        const [ano, mes, dia] = data.split('-');\r\n        return `${dia}\/${mes}\/${ano}`;\r\n    }\r\n\r\n   function gerarLink() {\r\n    const cliente = document.getElementById('cliente').value;\r\n    const envio = document.getElementById('envio').value;\r\n    const validade = document.getElementById('validade').value;\r\n    const valorPlanoUm = document.getElementById('valorPlanoUm').value;\r\n    const valorPlanoDois = document.getElementById('valorPlanoDois').value;\r\n    const valorPlanoTres = document.getElementById('valorPlanoTres').value;\r\n\r\n    const envioFormatado = formatarDataParaBrasileiro(envio);\r\n\r\n    if (!modeloSelecionado) {\r\n        alert('Por favor, selecione um modelo de proposta.');\r\n        return;\r\n    }\r\n\r\n    const urlBase = urlsModelo[modeloSelecionado];\r\n    const url = `${urlBase}?cliente=${encodeURIComponent(cliente)}&envio=${encodeURIComponent(envioFormatado)}&validade=${encodeURIComponent(validade)}&valorPlanoUm=${encodeURIComponent(valorPlanoUm)}&valorPlanoDois=${encodeURIComponent(valorPlanoDois)}&valorPlanoTres=${encodeURIComponent(valorPlanoTres)}`;\r\n\r\n    const linkGerado = document.getElementById('linkGerado');\r\n    linkGerado.innerHTML = `<a href=\"${url}\" target=\"_blank\" id=\"linkProposta\">ACESSAR PROPOSTA<\/a>`;\r\n\r\n    const link = document.getElementById('linkProposta');\r\n    \r\n    if (modeloSelecionado === 'modelo01') {\r\n        linkGerado.style.backgroundColor = 'red';\r\n    } else if (modeloSelecionado === 'modelo02') {\r\n        linkGerado.style.backgroundColor = 'green';\r\n    }\r\n    \r\n    linkGerado.style.padding = '12px 10px';\r\n    linkGerado.style.borderRadius = '5px';\r\n    linkGerado.style.border = '1px solid rgba(0,0,0,0.3)';\r\n    linkGerado.style.width = '100%';\r\n    linkGerado.style.fontWeight = '700';\r\n    linkGerado.style.fontSize = '18px';\r\n    linkGerado.style.textAlign = 'center';\r\n\r\n    linkGerado.style.color = '#000000';\r\n}\r\n<\/script>\r\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>Nome do Cliente: Data de Envio: Validade (dias): Valor do Plano 1: Valor do Plano 2: Valor do Plano 3: Modelo: GERAR PROPOSTA<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-15","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=\/wp\/v2\/posts\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":4,"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=\/wp\/v2\/posts\/15\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hub.creativgraph.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}