Página de cadastro com webinar perpétuo

Visão Geral do Projeto

Este projeto consiste no desenvolvimento de uma landing page de captura de leads para um webinar perpétuo, onde o usuário pode se cadastrar a qualquer momento e visualizar datas que estão sempre no futuro.

A solução combina JavaScript no front-end, envio assíncrono via AJAX, validação de dados, e integração direta com o CRM ActiveCampaign via API RESTful, permitindo automações completas de e-mail e WhatsApp.

Para garantir a qualidade dos leads enviados ao CRM, foi implementada uma validação de formulário utilizando jQuery Validate, impedindo o envio de e-mails inválidos.

Exemplo de código de validação

(function($) {

  "use strict";

  $('#EmailForm').validate({
    rules: {
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      email: {
        required: "<i class='fa fa-exclamation-triangle'></i> Favor inserir seu e-mail.",
        email: "<i class='fa fa-exclamation-triangle'></i> Favor inserir um e-mail válido."
      }
    },
    submitHandler: function(form) {
      $(form).ajaxSubmit({
        type: "POST",
        data: $(form).serialize(),
        url: "php/contact-email.php",
        success: function() {
          $('#EmailForm :input').attr('disabled', 'disabled');
          $('#EmailForm').fadeTo("slow", 0.15);
          $('.success-cf.second').fadeIn();
          $('#EmailForm')[0].reset();
        },
        error: function() {
          $('.error-cf.second').fadeIn();
        }
      });
    }
  });

})(window.jQuery);

Benefícios dessa abordagem

• Previne e-mails inválidos antes do envio
• Melhora a qualidade dos dados no CRM
• Reduz erros em automações
• Proporciona melhor experiência ao usuário

Após a validação, os dados são enviados via AJAX para um endpoint backend (contact-email.php). Esse backend é responsável por consumir a API REST do ActiveCampaign.

Essa arquitetura desacopla:

• Front-end (experiência do usuário)
• Backend (regras de negócio)
• CRM (automação e relacionamento)

A integração com o ActiveCampaign permite criar ou atualizar contatos automaticamente e inseri-los em fluxos de automação.

Exemplo de integração com a API REST

<?php

$apiUrl = "https://SEUACCOUNT.api-us1.com/api/3/contacts";
$apiKey = "SUA_API_KEY";

$email = $_POST['email'];

$data = [
  "contact" => [
    "email" => $email
  ]
];

$ch = curl_init($apiUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
  "Content-Type: application/json",
  "Api-Token: $apiKey"
]);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));

$response = curl_exec($ch);
curl_close($ch);

O que essa integração possibilita

• Criação automática de leads
• Atualização de contatos existentes
• Aplicação de tags do webinar
• Entrada em automações de e-mail e WhatsApp
• Segmentação avançada no CRM

Tudo isso acontece sem intervenção manual, logo após o cadastro.

Um dos diferenciais do projeto é a lógica que garante que o webinar nunca fique com data no passado, criando um modelo evergreen.

Objetivo da lógica

• Exibir datas sempre 3 dias à frente da data atual
• Tratar meses com 28, 30 e 31 dias
• Resolver transições de mês automaticamente
• Ajustar o layout quando necessário

(function() {

  const MONTHS = [
    "Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho",
    "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"
  ];

  function calculateClassDates() {
    const today = new Date();
    const day = today.getDate();
    const month = MONTHS[today.getMonth()];

    document.getElementById("day-date").innerText = day + 2;
    document.getElementById("day-date-2").innerText = day + 3;
    document.getElementById("day-date-3").innerText = day + 4;
    document.getElementById("month-date").innerText = month;
  }

  document.addEventListener("DOMContentLoaded", calculateClassDates);

})();

Tratamento de casos especiais (fim de mês)

• O script completo trata situações como:
• Dia 28, 29, 30 ou 31
• Fevereiro
• Meses sem 31 dias
• Combinação de datas entre dois meses

Exemplo de ajuste dinâmico:

if (currentDay === 30 || currentDay === 31) {
  setDates(["2", "3", "4"], nextMonthName);
}

Quando necessário, o layout é alterado dinamicamente:

showCustomLayout(
  `Dias <span>31</span> de ${currentMonth} e
   <span>1</span>, <span>2</span> de ${nextMonth}`
);

Benefícios do Modelo de Webinar Perpétuo

• Conteúdo sempre disponível
• Escala ilimitada sem mudar datas manualmente
• Sensação de urgência contínua
• Ideal para estratégias evergreen
• Alta taxa de conversão

Este projeto demonstra uma aplicação prática de engenharia front-end aliada ao marketing digital, integrando:

• Validação inteligente de formulários
• Envio assíncrono de dados
• Consumo de API REST
• Automação com ActiveCampaign
• Lógica avançada de datas em JavaScript

O resultado é uma landing page escalável, automatizada e orientada à conversão, ideal para estratégias modernas de geração de leads.