1 – Bem no Rd Station será necessário algumas configurações:
- Acesse o RD Station e crie um formulário e pegar o código de incorporação, em CONVERTER > FORMULARIOS
- Agora para pegar o código é fácil, após criar o formulário, tem um botão VER CÓDIGO.
- Basta copiar e colar ele logo abaixo da abertura da TAG <body>
2 – Configurando o formulário, vou por um código abaixo e em seguida venho explicando:
<div class="form">
<form name="formularioExemplo" action="" method="post" onsubmit="validarSemViablidade(event)">
<div class="input-nome">
<input type="text" name="nome" class="nome" id="nome" placeholder="Nome" required>
</div>
<div class="inputs">
<div class="input">
<input type="text" name="telefone" class="telefone" id="telefone" placeholder="Telefone celular" maxlength="15" required>
<input type="email" name="email" placeholder="E-mail" required>
</div>
<div class="input">
<input type="text" name="cep" class="cep" id="cep" placeholder="CEP">
<input type="text" name="bairro" class="bairro" id="bairro" placeholder="bairro" required>
</div>
</div>
<button type="submit" class="btn-dicas">Cadastrar</button>
</form>
</div>- Bom foque no que está em negrito, são essas informações que o RD vai pegar quando você submeter o formulário, principalmente o nome do formulário para você saber de onde vem a informação:
- Essa parte é um bônus que falarei no final
onsubmit="validarSemViablidade(event)" - Há e se você não colocar uma div pai para a tag nativa form, vai dar problema de prevent.default, faça como está aí acima.
3 – Agora envie alguma resposta através do formulário
- Em seguida vá no RD Station pois você vai precisar fazer um ajuste.
- Clique no seu perfil após logar, sua foto, vai abrir umas opções, clique em INTEGRAÇÕES > INTEGRAÇÃO DE FORMULÁRIO > Encontre o seu formulário pelo nome principalmente (Se você não colocou um nome nele como mostrei acima, vai ser chato de achar pois vai está com um nome qualquer criado pelo RD).
- Após encontrar, clique em OPÇÕES > EDITAR
- Agora você vai linkar os campos do seu formulário com os nomes de campo que existem no Rd Station, caso algum não tenha pré definido você pode criar um (Tenha cuidado com isso e teste caso necessite).
- Se você vincular tudo certinho, clique em SALVAR
- Agora teste novamente, envie outra requisição para o Rd Station e veja se os campos vão chegar devidamente preenchidos.
- Se não chegou, revise os passos, mais é isso aí, não tem o que fazer mais que isso, só abrir suporte, caso algo dê muito errado.
4 – Agora a parte que eu disse que era bônus, existe uma biblioteca chamada Sweet Alert que eu configurei, bem personalizada, não existe exemplo disso, eu montei segundo a documentação de acordo com a minha necessidade, enfim, segue o código javascript abaixo, lembre que é isso no formulário que chama o script na hora do envio onsubmit="validarSemViablidade(event)"
- Você terá que ajustar para a sua necessidade e corridir o nome do form e dos campos tanto no formulário quanto no javascript, mais fica lindo.
// Comentário sobre o formulário
function validarSemViablidade(event) {
event.preventDefault();
var nome = document.forms["formularioExemplo"].nome.value;
var email = document.forms["formularioExemplo"].email.value;
var telefone = document.forms["formularioExemplo"].telefone.value;
var cep = document.forms["formularioExemplo"].cep.value;
var bairro = document.forms["formularioExemplo"].bairro.value;
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-success",
cancelButton: "btn btn-danger",
},
buttonsStyling: false,
});
if (nome == "") {
Swal.fire({
imageUrl: "<URL DA IMAGEM DE SUA EMPRESA>",
title: "Erro!",
text: "Preencha os campos corretamente",
showConfirmButton: false,
timer: 1500,
});
SemViabilidade.nome.focus();
return false;
}
if (email == "") {
Swal.fire({
imageUrl: "<URL DA IMAGEM DE SUA EMPRESA>",
title: "Erro!",
text: "Preencha o campo com seu email",
showConfirmButton: false,
timer: 1500,
});
SemViabilidade.email.focus();
return false;
}
if (telefone == "") {
Swal.fire({
imageUrl: "<URL DA IMAGEM DE SUA EMPRESA>",
title: "Erro!",
text: "Preencha o campo com seu telefone",
showConfirmButton: false,
timer: 1500,
});
SemViabilidade.telefone.focus();
return false;
}
if (cep == "") {
Swal.fire({
imageUrl: "<URL DA IMAGEM DE SUA EMPRESA>",
title: "Erro!",
text: "Preencha o campo com seu CEP",
showConfirmButton: false,
timer: 1500,
});
SemViabilidade.cep.focus();
return false;
}
if (bairro == "") {
Swal.fire({
imageUrl: "<URL DA IMAGEM DE SUA EMPRESA>",
title: "Erro!",
text: "Preencha o campo com seu bairro",
showConfirmButton: false,
timer: 1500,
});
SemViabilidade.bairro.focus();
return false;
} else {
swalWithBootstrapButtons
.fire({
title: "Confirme?",
text: "De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever autorizo a Itelx a enviar notificações por e-mail ou outros meios e concordo com sua PolÃítica de Privacidade.",
imageUrl: "<URL DA IMAGEM DE SUA EMPRESA>",
imageAlt: "Logo",
showCancelButton: true,
confirmButtonText: "Concordo",
cancelButtonText: "Cancelar",
reverseButtons: true,
})
.then((result) => {
if (result.isConfirmed) {
swalWithBootstrapButtons.fire({
imageUrl: "URL DA IMAGEM DE SUA EMPRESA>",
title: "Sucesso!",
text: "Aguarde, você será redirecionado.",
});
setTimeout(() => {
// Envie o formulário para o RD Station aqui
document.forms["SemViabilidade"].submit();
// Redirecionar para a página desejada
window.location.href = "/obrigado";
}, 3000);
} else if (result.dismiss === Swal.DismissReason.cancel) {
swalWithBootstrapButtons.fire({
imageUrl: "<URL DA IMAGEM DE SUA EMPRESA>",
title: "Oops...",
text: "Você não aceitou nossa política de privacidade.",
});
}
});
}
}