Aprimore
Member
I have a button whick opens a pop-up with a forms in a elementor page, all set in html. But, the code doesnt send the answers to the pabbly webhook. The code is down below.
(Im not a programmer and it was all coded by chat GPT. So my apologies if theres any noob mistake)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop-up com Estilo Personalizado</title>
<style>
/* Estilos adicionados */
#popup {
background-color: #ffffff; /* Cor de fundo */
padding: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
z-index: 9999;
text-align: center;
width: 90%; /* Largura do pop-up */
max-width: 400px; /* Largura máxima do pop-up */
}
#popup input[type="text"],
#popup input[type="email"],
#popup input[type="tel"],
#popup button,
#popup select {
width: calc(100% - 16px); /* Largura total com espaço para o padding */
border-radius: 5px; /* Bordas levemente arredondadas */
margin: 10px auto; /* Centraliza os campos e adiciona espaçamento padrão */
padding: 8px; /* Espaçamento interno */
font-family: 'Montserrat', sans-serif; /* Fonte Montserrat */
border: 1px solid #3E0078; /* Cor da borda */
margin-bottom: 10px; /* Margem inferior padrão */
}
#popup input:
laceholder,
#popup select:laceholder {
color: #8c8c8c; /* Cor do placeholder */
}
#popup label {
display: none; /* Ocultar os títulos dos campos */
}
/* Estilo de texto */
#popup p {
color: #3E0078; /* Cor do texto */
font-family: 'Montserrat', sans-serif; /* Fonte Montserrat */
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- Botão para abrir o pop-up -->
<button id="botaoAbrirPopup">Abrir Pop-up</button>
<!-- Pop-up -->
<div id="popup" style="display: none;">
<input type="text" id="primeiroNome" name="primeiroNome" placeholder="Seu Primeiro Nome" required><br>
<input type="email" id="email" name="email" placeholder="E-mail" required><br>
<input type="tel" id="telefone" name="telefone" placeholder="Telefone com DDD" required><br>
<select id="trabalhaEnfermeira" name="trabalhaEnfermeira" required>
<option value="">Você trabalha atualmente como enfermeira?*</option>
<option value="Sim">Sim</option>
<option value="Não">Não</option>
</select><br>
<!-- Novos campos de seleção -->
<select id="faculdade" name="faculdade" required>
<option value="">Em qual faculdade foi a sua graduação?*</option>
<option value="Faculdade pública">Faculdade pública</option>
<option value="Faculdade privada">Faculdade privada</option>
</select><br>
<select id="posGraduacao" name="posGraduacao" required>
<option value="">Você já tem Pós-Graduação?*</option>
<option value="Sim">Sim</option>
<option value="Não">Não</option>
</select><br>
<select id="aluna" name="aluna" required>
<option value="">Você já é nossa aluna?*</option>
<option value="Sim, sou aluna da Pós ou da Formação">Sim, sou aluna da Pós ou da Formação</option>
<option value="Não, mas penso em me tornar aluna">Não, mas penso em me tornar aluna</option>
<option value="Não, conheço pouco sobre vocês">Não, conheço pouco sobre vocês</option>
</select><br>
<!-- Campos ocultos para requisitar parâmetros do site -->
<input type="hidden" id="utm_campaign" name="utm_campaign" value="">
<input type="hidden" id="utm_source" name="utm_source" value="">
<input type="hidden" id="utm_medium" name="utm_medium" value="">
<input type="hidden" id="utm_content" name="utm_content" value="">
<input type="hidden" id="utm_term" name="utm_term" value="">
<!-- Campo personalizado para capturar a data do envio do pop-up -->
<input type="hidden" id="dataEnvio" name="dataEnvio" value="">
<button id="enviarForm">Enviar</button>
</div>
<!-- JavaScript para exibir e fechar o pop-up e enviar o formulário -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var popup = document.getElementById('popup');
var botaoAbrirPopup = document.getElementById('botaoAbrirPopup');
var enviarForm = document.getElementById('enviarForm');
// Exibir o pop-up ao clicar no botão
botaoAbrirPopup.addEventListener('click', function() {
popup.style.display = 'block';
});
// Enviar o formulário
enviarForm.addEventListener('click', function() {
// Preencher os campos ocultos com os valores desejados
var utmParams = getUTMParamsFromURL();
document.getElementById('utm_campaign').value = utmParams.utm_campaign;
document.getElementById('utm_source').value = utmParams.utm_source;
document.getElementById('utm_medium').value = utmParams.utm_medium;
document.getElementById('utm_content').value = utmParams.utm_content;
document.getElementById('utm_term').value = utmParams.utm_term;
// Capturar a data do envio do pop-up
var dataEnvio = new Date().toISOString();
document.getElementById('dataEnvio').value = dataEnvio;
// Construir o objeto com os dados do formulário
var formData = {
primeiroNome: document.getElementById('primeiroNome').value,
email: document.getElementById('email').value,
telefone: document.getElementById('telefone').value,
trabalhaEnfermeira: document.getElementById('trabalhaEnfermeira').value,
faculdade: document.getElementById('faculdade').value,
posGraduacao: document.getElementById('posGraduacao').value,
aluna: document.getElementById('aluna').value,
utm_campaign: document.getElementById('utm_campaign').value,
utm_source: document.getElementById('utm_source').value,
utm_medium: document.getElementById('utm_medium').value,
utm_content: document.getElementById('utm_content').value,
utm_term: document.getElementById('utm_term').value,
dataEnvio: document.getElementById('dataEnvio').value
};
// Enviar dados do formulário para o webhook
sendDataToWebhook(formData);
});
// Função para obter os parâmetros UTM da URL
function getUTMParamsFromURL() {
var searchParams = new URLSearchParams(window.location.search);
return {
utm_campaign: searchParams.get('utm_campaign') || '',
utm_source: searchParams.get('utm_source') || '',
utm_medium: searchParams.get('utm_medium') || '',
utm_content: searchParams.get('utm_content') || '',
utm_term: searchParams.get('utm_term') || ''
};
}
// Função para enviar dados do formulário para o webhook
function sendDataToWebhook(formData) {
var xhr = new XMLHttpRequest();
var url = "https://connect.pabbly.com/workflow/sendwebhookdata/IjU3NjUwNTZiMDYzMDA0Mzc1MjZhNTUzMTUxMzUi_pc";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
// Enviar os dados como JSON
xhr.send(JSON.stringify(formData));
}
});
</script>
</body>
</html>
(Im not a programmer and it was all coded by chat GPT. So my apologies if theres any noob mistake)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop-up com Estilo Personalizado</title>
<style>
/* Estilos adicionados */
#popup {
background-color: #ffffff; /* Cor de fundo */
padding: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
z-index: 9999;
text-align: center;
width: 90%; /* Largura do pop-up */
max-width: 400px; /* Largura máxima do pop-up */
}
#popup input[type="text"],
#popup input[type="email"],
#popup input[type="tel"],
#popup button,
#popup select {
width: calc(100% - 16px); /* Largura total com espaço para o padding */
border-radius: 5px; /* Bordas levemente arredondadas */
margin: 10px auto; /* Centraliza os campos e adiciona espaçamento padrão */
padding: 8px; /* Espaçamento interno */
font-family: 'Montserrat', sans-serif; /* Fonte Montserrat */
border: 1px solid #3E0078; /* Cor da borda */
margin-bottom: 10px; /* Margem inferior padrão */
}
#popup input:
laceholder,#popup select:
laceholder {color: #8c8c8c; /* Cor do placeholder */
}
#popup label {
display: none; /* Ocultar os títulos dos campos */
}
/* Estilo de texto */
#popup p {
color: #3E0078; /* Cor do texto */
font-family: 'Montserrat', sans-serif; /* Fonte Montserrat */
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- Botão para abrir o pop-up -->
<button id="botaoAbrirPopup">Abrir Pop-up</button>
<!-- Pop-up -->
<div id="popup" style="display: none;">
<input type="text" id="primeiroNome" name="primeiroNome" placeholder="Seu Primeiro Nome" required><br>
<input type="email" id="email" name="email" placeholder="E-mail" required><br>
<input type="tel" id="telefone" name="telefone" placeholder="Telefone com DDD" required><br>
<select id="trabalhaEnfermeira" name="trabalhaEnfermeira" required>
<option value="">Você trabalha atualmente como enfermeira?*</option>
<option value="Sim">Sim</option>
<option value="Não">Não</option>
</select><br>
<!-- Novos campos de seleção -->
<select id="faculdade" name="faculdade" required>
<option value="">Em qual faculdade foi a sua graduação?*</option>
<option value="Faculdade pública">Faculdade pública</option>
<option value="Faculdade privada">Faculdade privada</option>
</select><br>
<select id="posGraduacao" name="posGraduacao" required>
<option value="">Você já tem Pós-Graduação?*</option>
<option value="Sim">Sim</option>
<option value="Não">Não</option>
</select><br>
<select id="aluna" name="aluna" required>
<option value="">Você já é nossa aluna?*</option>
<option value="Sim, sou aluna da Pós ou da Formação">Sim, sou aluna da Pós ou da Formação</option>
<option value="Não, mas penso em me tornar aluna">Não, mas penso em me tornar aluna</option>
<option value="Não, conheço pouco sobre vocês">Não, conheço pouco sobre vocês</option>
</select><br>
<!-- Campos ocultos para requisitar parâmetros do site -->
<input type="hidden" id="utm_campaign" name="utm_campaign" value="">
<input type="hidden" id="utm_source" name="utm_source" value="">
<input type="hidden" id="utm_medium" name="utm_medium" value="">
<input type="hidden" id="utm_content" name="utm_content" value="">
<input type="hidden" id="utm_term" name="utm_term" value="">
<!-- Campo personalizado para capturar a data do envio do pop-up -->
<input type="hidden" id="dataEnvio" name="dataEnvio" value="">
<button id="enviarForm">Enviar</button>
</div>
<!-- JavaScript para exibir e fechar o pop-up e enviar o formulário -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var popup = document.getElementById('popup');
var botaoAbrirPopup = document.getElementById('botaoAbrirPopup');
var enviarForm = document.getElementById('enviarForm');
// Exibir o pop-up ao clicar no botão
botaoAbrirPopup.addEventListener('click', function() {
popup.style.display = 'block';
});
// Enviar o formulário
enviarForm.addEventListener('click', function() {
// Preencher os campos ocultos com os valores desejados
var utmParams = getUTMParamsFromURL();
document.getElementById('utm_campaign').value = utmParams.utm_campaign;
document.getElementById('utm_source').value = utmParams.utm_source;
document.getElementById('utm_medium').value = utmParams.utm_medium;
document.getElementById('utm_content').value = utmParams.utm_content;
document.getElementById('utm_term').value = utmParams.utm_term;
// Capturar a data do envio do pop-up
var dataEnvio = new Date().toISOString();
document.getElementById('dataEnvio').value = dataEnvio;
// Construir o objeto com os dados do formulário
var formData = {
primeiroNome: document.getElementById('primeiroNome').value,
email: document.getElementById('email').value,
telefone: document.getElementById('telefone').value,
trabalhaEnfermeira: document.getElementById('trabalhaEnfermeira').value,
faculdade: document.getElementById('faculdade').value,
posGraduacao: document.getElementById('posGraduacao').value,
aluna: document.getElementById('aluna').value,
utm_campaign: document.getElementById('utm_campaign').value,
utm_source: document.getElementById('utm_source').value,
utm_medium: document.getElementById('utm_medium').value,
utm_content: document.getElementById('utm_content').value,
utm_term: document.getElementById('utm_term').value,
dataEnvio: document.getElementById('dataEnvio').value
};
// Enviar dados do formulário para o webhook
sendDataToWebhook(formData);
});
// Função para obter os parâmetros UTM da URL
function getUTMParamsFromURL() {
var searchParams = new URLSearchParams(window.location.search);
return {
utm_campaign: searchParams.get('utm_campaign') || '',
utm_source: searchParams.get('utm_source') || '',
utm_medium: searchParams.get('utm_medium') || '',
utm_content: searchParams.get('utm_content') || '',
utm_term: searchParams.get('utm_term') || ''
};
}
// Função para enviar dados do formulário para o webhook
function sendDataToWebhook(formData) {
var xhr = new XMLHttpRequest();
var url = "https://connect.pabbly.com/workflow/sendwebhookdata/IjU3NjUwNTZiMDYzMDA0Mzc1MjZhNTUzMTUxMzUi_pc";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
// Enviar os dados como JSON
xhr.send(JSON.stringify(formData));
}
});
</script>
</body>
</html>
