Formulário para depois acessar o simulador

Humbs · Fevereiro 18, 2019, 12:17pm

Seguinte, no meu site implementei um simulador online mas para isso queria que a pessoa tivesse acesso a ele somente depois de preencher um formulário para a pessoa inserir seu nome, e-mail e telefone.

Existe um jeito de fazer dessa forma?

Dragoon · Fevereiro 18, 2019, 12:28pm

Sim existe!

A resposta da pergunta é essa, mas, eu acho que por falta de informação você precisa saber como? correto?

Mas, o que você está fazendo, como está fazendo e o que está fazendo, com o que está fazendo?

Humbs · Fevereiro 18, 2019, 12:35pm

Oi, amigo!

Sim, eu queria saber como faço assim.

Estou fazendo via HTML, CSS e JavaScript. Um hotsite com as informações de produtos e no final tem um formulário para o usuário se inscrever e em seguida o simulador de produtos.

O que eu quero é “forçar” o usuário a preencher o formulário para que ele possa acessar o simulador. Assim, o formulário e o simulador “por baixo”, “pode dentro” do formulário e depois de preencher e enviá-lo, aparece o simulador.

Dragoon · Fevereiro 18, 2019, 12:39pm

Você precisa autenticar o usuário de alguma forma e rapidamente falando guardar no localStore do seu navegador uma chave, tendo essa chave passe para o próximo processo. Sem código fica complicado avaliar …

Humbs · Fevereiro 18, 2019, 12:41pm

A parte do código onde tem o formulário e o simulador:

<div id="formulario-rd">
        <div role="main" id="aposentadoria-90c9f9c59d74e11f3b87"></div>
        <script type="text/javascript" src="https://d335luupugsy2.cloudfront.net/js/rdstation-forms/stable/rdstation-forms.min.js"></script>
        <script type="text/javascript">
            new RDStationForms('aposentadoria-90c9f9c59d74e11f3b87-html', 'UA-51084694-1').createForm();
        </script>
 </div>
    
 <div id="simulador">
        SIMULADOR AQUI
 </div>

Mas o simulador não pode aparecer, só depois de o usuário preencher o formulário.

Dragoon · Fevereiro 18, 2019, 12:42pm

Como você vai preencher e o que você vai fazer com as informações?
Elas serviram de base para que?

Humbs · Fevereiro 18, 2019, 12:44pm

O formulário está integrado ao sistema externo (RD Station), após o preenchimento o sistema automaticamente pega as informações e cadastra o usuário.

Não entendi a segunda pergunta.

Abaixo a parte onde quero fazer:

Dragoon · Fevereiro 18, 2019, 12:55pm

Esse formulário é preenchido e enviado e como você recupera essas informações para habilitar a outra parte, tipo não deveria ter o acesso Login? que isso poderia ser gerado um hash ou token (melhor token Bearer) e isso ser armazenado no seu localStore?

Resumindo, depois desse cadastro não precisa de uma autenticação?

Humbs · Fevereiro 18, 2019, 1:00pm

Não amigo, não é necessário nenhuma forma de autenticação no site. O propósito disso é pegar novos leads, por isso o formulário integrado pois está vinculado ao sistema externo. A parte principal e importante do site é o simulador mas para isso o usuário terá que preencher o formulário antes.

Dragoon · Fevereiro 18, 2019, 1:07pm

No Javascript desse envio você pega as informações e manda carregar a outra tela, exatamente o seu código eu não posso dizer, mas, o trafego é esse!

O cara apertou o botão estando tudo certo, você abre a outra parte, habilita de alguma forma com uma flag ou alguma técnica.

Não sei como ajudar não vejo código nada então é mais no âmbito do estudo mesmo da sua regra

Humbs · Fevereiro 18, 2019, 1:21pm

Amigo, não vai ter a outra tela… Tudo é feito na mesma página.

Ou eu posso criar uma modal para aparecer o simulador depois de o usuário preencher, enviar e validar o formulário, não sei se funcionaria assim…

Sobre o código, posso detalhar uma section apenas que contém o formulário e o simulador:

<!-- simulador
================================================== -->
<section id="process" class="s-process target-section">

    <div class="row">
        <div class="col-full text-center" data-aos="fade-up">
            <h2 class="display-2">Como funciona o simulador?</h2>
        </div>
    </div>

    <div class="row process block-1-4 block-m-1-2 block-tab-full">
        <div class="col-block item-process" data-aos="fade-up">
            <div class="item-process__text">
                <h3>Seus dados</h3>
                <p>
                Você precisa inserir seus dados pessoais.
                </p>
            </div>
        </div>
        <div class="col-block item-process" data-aos="fade-up">
            <div class="item-process__text">
                <h3>Plano financeiro</h3>
                <p>
                Com os dados financeiros, você conseguirá saber quanto de dinheiro terá na sua aposentadoria. 
                </p>
            </div>
        </div>
        <div class="col-block item-process" data-aos="fade-up">
            <div class="item-process__text">
                <h3>Cálculo de dados</h3>
                <p>
                Após o preenchimento de dados, o simulador irá calcular de acordo com suas preferências.
                </p>
            </div>
        </div>
        <div class="col-block item-process" data-aos="fade-up">
            <div class="item-process__text">
                <h3>Aposentadoria</h3>
                <p>
                Com os dados calculados, é o seu saldo final na hora de aposentar.
                </p>
            </div>
        </div>
    </div> <!-- end process -->

    <div id="formulario-rd">
        <div role="main" id="aposentadoria-90c9f9c59d74e11f3b87"></div>
        <script type="text/javascript" src="https://d335luupugsy2.cloudfront.net/js/rdstation-forms/stable/rdstation-forms.min.js"></script>
        <script type="text/javascript">
            new RDStationForms('aposentadoria-90c9f9c59d74e11f3b87-html', 'UA-51084694-1').createForm();
        </script>
    </div>
    
    <div id="simulador">
        SIMULADOR AQUI
    </div>
    
</section> <!-- end s-process -->

Já o simulador feito em JavaScript:

//Formatando inputs
function conv_number(expr, decplaces) {
    var str = "" + Math.round(eval(expr) * Math.pow(10, decplaces));
    while (str.length <= decplaces) {
        str = "0" + str;
    }

    var decpoint = str.length - decplaces;
    return (str.substring(0, decpoint) + "." + str.substring(decpoint, str.length));
}

//Valores Fixos:
var parcial = 4.5 / 100; //taxa de juros anual
var rate = Math.pow((1 + parcial), (1 / 12)) - 1; //taxa de juros mensal
var type = 1; //deixar default
var beginningBalance, endingBalance;


//Inputs do Usuário:
var periods = 360; //quantidade de meses juntando dinheiro
var lifeexpectancy = 360; //expectativa de vida
var payment = 7500; //objetivo de aposentadoria
var future = 500000; //valor de herança
var initial = 500000; //valor que tenho disponível agora
var deposit = 1500; //depósitos mensais

// -------------------------------------- //

// Função para cálculo do valor Presente:
function pv(rate, nper, pmt, fv) {
    rate = parseFloat(rate);
    nper = parseFloat(nper);
    pmt = parseFloat(pmt);
    fv = parseFloat(fv);
    if (nper == 0) {
        alert("Why do you want to test me with zeros?");
        return (0);
    }
    if (rate == 0) { // Interest rate is 0
        pv_value = -(fv + (pmt * nper));
    } else {
        x = Math.pow(1 + rate, -nper);
        y = Math.pow(1 + rate, nper);
        pv_value = -(x * (fv * rate - pmt + y * pmt)) / rate;
    }
    pv_value = conv_number(pv_value, 2);
    return (pv_value);
}

// Função para cálculo do valor Futuro:
function PMT(rate, nperiod, pv, fv, type) {
    if (!fv) fv = 0;
    if (!type) type = 0;

    if (rate == 0) return -(pv + fv) / nperiod;

    var pvif = Math.pow(1 + rate, nperiod);
    var pmt = rate / (pvif - 1) * -(pv * pvif + fv);

    if (type == 1) {
        pmt /= (1 + rate);
    };

    return pmt;
}

function FV(rate, nper, pmt, pv, type) {
    var pow = Math.pow(1 + rate, nper),
        fv;
    if (rate) {
        fv = (pmt * (1 + rate * type) * (1 - pow) / rate) - pv * pow;
    } else {
        fv = -1 * (pv + pmt * nper);
    }
    return fv.toFixed(2);
}

var myArray = new Array();
var myArray2 = new Array();
var CenarioA = new Array();

var myArrayB = new Array();
var myArrayB2 = new Array();
var CenarioB = new Array();

var myArrayC = new Array();
var myArrayC2 = new Array();
var CenarioC = new Array();

var vp = pv(rate, periods, payment, future, type);
vp = vp * -1;

vp_temp = vp * -1 //Valor 1

var result = PMT(rate, lifeexpectancy, initial, vp_temp, 0);

beginningBalance = endingBalance = initial;

for (var a = 0; a <= periods; a++) {
    beginningBalance = endingBalance
    endingBalance = parseFloat(beginningBalance * (1 + rate) + result);

    myArray[a] = beginningBalance;

}

var lastItem = myArray.pop();
beginningBalance2 = endingBalance2 = lastItem;

for (var b = 0; b <= lifeexpectancy; b++) {
    beginningBalance2 = endingBalance2;
    endingBalance2 = parseFloat((beginningBalance2 - payment) + (beginningBalance2 * rate));

    if (endingBalance2 > future) {
        myArray2[b] = endingBalance2;
    } else {
        myArray2[b] = future;
    }

}

CenarioA = myArray.concat(myArray2);

console.log("Cenário A:");
console.log(CenarioA);

var CaixaTeorico, ObjetivoMensalTeorico;

CaixaTeorico = FV(rate, lifeexpectancy, deposit, initial, 0);
CaixaTeorico = CaixaTeorico * -1;

ObjetivoMensalTeorico = PMT(rate, lifeexpectancy, CaixaTeorico * -1, future, 0);

beginningBalance = endingBalance = initial;

for (var a = 0; a <= periods; a++) {
    beginningBalance = endingBalance
    endingBalance = parseFloat(beginningBalance * (1 + rate) + deposit);

    myArrayB[a] = beginningBalance;

}

lastItem = myArrayB.pop();
beginningBalance2 = endingBalance2 = lastItem;

for (var b = 0; b <= lifeexpectancy; b++) {
    beginningBalance2 = endingBalance2;
    endingBalance2 = parseFloat((beginningBalance2 - ObjetivoMensalTeorico) + (beginningBalance2 * rate));

    if (endingBalance2 > future) {
        myArrayB2[b] = endingBalance2;
    } else {
        myArrayB2[b] = future;
    }

}

CenarioB = myArrayB.concat(myArrayB2);

console.log("Cenário B:");
console.log(CenarioB);

var CaixaTeorico, HerancaTeorica;

CaixaTeorico = FV(rate, lifeexpectancy, deposit, initial, 0);
CaixaTeorico = CaixaTeorico * -1; //Valor 1
HerancaTeorica = FV(rate, lifeexpectancy, payment * -1, CaixaTeorico, 0);
HerancaTeorica = HerancaTeorica * -1; //Valor 1

beginningBalance = endingBalance = initial;

for (var a = 0; a <= periods; a++) {
    beginningBalance = endingBalance
    endingBalance = parseFloat(beginningBalance * (1 + rate) + deposit);

    myArrayC[a] = beginningBalance;

}

lastItem = myArrayC.pop();
beginningBalance2 = endingBalance2 = lastItem;

for (var b = 0; b <= lifeexpectancy; b++) {
    beginningBalance2 = endingBalance2;
    endingBalance2 = parseFloat((beginningBalance2 - payment) + (beginningBalance2 * rate));

    if (endingBalance2 >= HerancaTeorica) {
        myArrayC2[b] = HerancaTeorica;
    } else {
        myArrayC2[b] = endingBalance2;
    }

}

CenarioC = myArrayC.concat(myArrayC2);

console.log("Cenário C:");
console.log(CenarioC);

Dragoon · Fevereiro 18, 2019, 1:37pm

Se você colocar uma flag que após digitar a primeira tela libera a segunda?

Tipo um verdadeiro e falso, usando css?

Exemplo:

Html:

<div id="div1">
  <input type="text" name="name" id="name" />
  <button onClick="enviar()">Enviar</button>
</div>
<div id="div2" style="display:none">
  <h1>
    Formulario 2
  </h1>
</div>

Javascript:

function enviar()
{
    var name = document.getElementById('name').value;
    if (name !== '')
    {
    	var div2 = document.getElementById('div2');
      div2.style.display = null;
    }
}

Humbs · Fevereiro 18, 2019, 1:43pm

Isso, dessa forma mesmo!

Formulário para depois acessar o simulador

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI