Criar uma página de cadastro de usuários utilizando uma chave de acesso garante que apenas usuários autorizados consigam se registrar. A seguir, explicamos como montar a página e onde inserir suas informações personalizadas.
Importante para realizar esa configuração é nescessario ja ter realizado a criação de uma chave de acesso através do artigo Chaves de Cadastro
1. Estrutura HTML e CSS
No <head>, você pode adicionar CSS para estilizar a página e definir a imagem de fundo. Substitua o link da imagem de fundo pelo URL da sua imagem:
.background {
position: fixed;
width: 100%;
height: 100%;
background: url('https://caioleal.engage.bz/background_desktop.png') no-repeat center center/cover;
filter: brightness(0.7);
z-index: -1;
}
Alteração: troque https://caioleal.engage.bz/background_desktop.png pelo link da sua imagem de fundo.
2. Logo da Plataforma
No formulário, inclua a logo da sua empresa/plataforma. Substitua o src pelo link do seu logo:
<div class="logo"> <img src="https://caioleal.engage.bz/logo_engage.png" alt="Logo"> </div>
Alteração: troque https://caioleal.engage.bz/logo_engage.png pelo link do seu logo.
3. Chave de Acesso e URLs de Redirecionamento
No formulário, os campos hidden controlam a chave de acesso e as URLs de redirecionamento:
<input type="hidden" name="engageform_enrollmentkey" value="de6df8ba-c388-4f38-9320-201232fd00b7"> <input type="hidden" name="engageform_redirecturl" value="https://caioleal.engage.bz/#/home"> <input type="hidden" name="engageform_error_redirecturl" value="https://s3.engage.bz/caioleal/custom/erro.html">
Alterações importantes:
value do engageform_enrollmentkey: coloque a chave gerada na plataforma.
engageform_redirecturl: URL da sua instância para redirecionar o usuário após cadastro.
engageform_error_redirecturl: URL da sua instância para redirecionar em caso de erro, mantendo
/custom/erro.html.
4. Exemplo Completo de Código HTML com as Alterações Evidenciadas
Copie este código, faça as alterações necessárias, crie um arquivo .html e envie para o nosso suporte através do email meajude@engage.bz.
Altere apenas os pontos destacados.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cadastro</title>
<style>
/* Configuração padrão */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body, html {
height: 100%;
}
/* Imagem de fundo */
.background {
position: fixed;
width: 100%;
height: 100%;
background: url('LINK_DA_SUA_IMAGEM DE FUNDO') no-repeat center center/cover;
filter: brightness(0.7);
z-index: -1;
}
/* Container principal */
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
min-height: 100vh;
justify-content: center;
}
/* Botão Voltar */
.back-btn {
position: absolute;
top: 20px;
left: 20px;
background: rgba(255, 255, 255, 0.8);
border: none;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s;
}
.back-btn:hover {
background: #fff;
}
/* Logo */
.logo img {
max-width: 150px;
margin-bottom: 20px;
content: url('URL_DO_SEU_LOGO');
}
/* Formulário */
.form {
background: rgba(255, 255, 255, 0.9);
padding: 25px;
border-radius: 12px;
width: 100%;
max-width: 400px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.form label {
font-weight: bold;
margin-top: 12px;
display: block;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="password"] {
width: 100%;
padding: 10px;
margin-top: 6px;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
transition: border-color 0.3s;
}
.form input:focus {
border-color: #0078d7;
}
.form input[type="submit"] {
width: 100%;
padding: 12px;
background: #0078d7;
color: #fff;
font-weight: bold;
border: none;
border-radius: 6px;
margin-top: 18px;
cursor: pointer;
transition: background 0.3s;
}
.form input[type="submit"]:hover {
background: #005fa3;
}
/* Responsividade */
@media (max-width: 500px) {
.form {
padding: 20px;
}
.logo img {
max-width: 120px;
}
}
</style>
</head>
<body>
<div class="background"></div>
<div class="container">
<button class="back-btn" onclick="window.history.back()">← Voltar</button>
<div class="logo">
<img alt="Logo">
</div>
<form action="https://my.engage.bz//autoRegister/Default.aspx" method="POST" class="form">
<!-- Chave de acesso gerada na plataforma Chaves de acesso conform indicado na imagem do item 3 -->
<input type="hidden" name="engageform_enrollmentkey" value="SUA_CHAVE_AQUI">
<input type="hidden" name="engageform_usertype" value="filled_form_user">
<!-- URL de redirecionamento após cadastro -->
<input type="hidden" name="engageform_redirecturl" value="URL_DA_SUA_INSTANCIA/#/home">
<!-- URL de redirecionamento em caso de erro COLOQUE APENAS O ID DA SUA INSTANCIA -->
<input type="hidden" name="engageform_error_redirecturl" value="https://s3.engage.bz/ID DA SUA INTANCIA/custom/erro.html">
<input type="hidden" name="engageform_cookieduration" value="5">
<h2>Cadastro</h2>
<label for="engageform_fullname">Nome Completo</label>
<input type="text" id="engageform_fullname" name="engageform_fullname" required>
<label for="engageform_email">E-mail</label>
<input type="email" id="engageform_email" name="engageform_email" required>
<label for="engageform_login">Login</label>
<input type="text" id="engageform_login" name="engageform_login" required>
<label for="engageform_password">Senha</label>
<input type="password" id="engageform_password" name="engageform_password" required>
<input type="submit" value="Cadastrar">
</form>
</div>
</body>
</html>
Este artigo foi útil?
Que bom!
Obrigado pelo seu feedback
Desculpe! Não conseguimos ajudar você
Obrigado pelo seu feedback
Feedback enviado
Agradecemos seu esforço e tentaremos corrigir o artigo