• Instructions to Ask a Question

    Click on the "Ask a Question" button and select the application for which you would like to ask questions.

    We have 5 different products namely - Pabbly Connect, Pabbly Subscription Billing, Pabbly Email Marketing, Pabbly Form Builder, Pabbly Email Verification.

    The turnaround time is 24 hrs (Business Hours - 10.00 AM to 6.00 PM IST, Except Saturday and Sunday). So your kind patience will be highly appreciated!

    🚀🚀Exclusive Discount Offer

    Just in case you're looking for any ongoing offers on Pabbly, you can check the one-time offers listed below. You just need to pay once and use the application forever -

    🔥 Pabbly Connect One Time Plan for $249 (🏆Lifetime Access) -  View offer 

    🔥 Pabbly Subscription Billing One Time Plan for $249 (🏆Lifetime Access) - View offer

Post webhook in html


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">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop-up com Estilo Personalizado</title>
/* 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::placeholder,
#popup select::placeholder {
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;

<!-- 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>
<!-- 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 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 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>

<!-- 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>

<!-- JavaScript para exibir e fechar o pop-up e enviar o formulário -->
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

// 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



Staff member
Hi @Aprimore,

Kindly watch the video shared below to understand how you can set up Elementor as your trigger step and capture form responses:

Please note that we won't be able to assist you with any coding-related issues as it's beyond our scope of expertise.


Hi @Aprimore,

Kindly watch the video shared below to understand how you can set up Elementor as your trigger step and capture form responses:

Please note that we won't be able to assist you with any coding-related issues as it's beyond our scope of expertise.
Hey, there!
Thanks for the reply!

I have another trouble with the elementor forms, so thats why i choose to do it all in html