Conectar Google Calendar com Formulários de Contato do WordPress

Wordpress Publicado em 02/08/2025• 10 min de leitura• 1619 visualizações• 1 likes

Integrar o Google Calendar with formulários de contato do WordPress permite criar eventos automaticamente quando alguém preenche um formulário. Isso é especialmente útil para agendamentos, consultas, reuniões e eventos.

Requisitos Importantes

  • WordPress com acesso administrativo
  • Plugin de formulário (Contact Form 7, WPForms, Gravity Forms, etc.)
  • Conta Google com Calendar ativado
  • Plugin de integração ou conhecimento em PHP/JavaScript
  • SSL ativo no site (obrigatório para APIs do Google)

O que Você Vai Conseguir Fazer

✅ Criar eventos no Google Calendar automaticamente

✅ Capturar dados do formulário (nome, email, data, horário)

✅ Personalizar detalhes do evento

✅ Enviar convites automáticos

✅ Sincronizar com múltiplos calendários

✅ Configurar lembretes

Método 1: Usando WPForms + Zapier (Mais Fácil)

Passo 1: Instalar e Configurar WPForms

1. Instale o WPForms:

  • Vá para Plugins > Adicionar Novo
  • Pesquise por “WPForms”
  • Instale e ative o plugin

2. Crie um Formulário de Agendamento:

  • Vá para WPForms > Adicionar Novo
  • Escolha o template “Contact Form”
  • Adicione os campos necessários:
  • Nome (obrigatório)
  • Email (obrigatório)
  • Data do Evento
  • Horário do Evento
  • Descrição/Assunto

3. Configurar Campos Específicos:

- Campo Data: Formato DD/MM/AAAA
- Campo Horário: Formato HH:MM
- Campo Duração: Em minutos (opcional)

Passo 2: Configurar Zapier

1. Criar Conta no Zapier:

  • Acesse zapier.com
  • Crie uma conta gratuita
  • Clique em “Make a Zap”

2. Configurar Trigger (Gatilho):

  • App: WPForms
  • Trigger: New Form Entry
  • Account: Conecte sua conta WordPress
  • Form: Selecione o formulário criado

3. Configurar Action (Ação):

  • App: Google Calendar
  • Action: Create Detailed Event
  • Account: Conecte sua conta Google
  • Calendar: Selecione o calendário desejado

4. Mapear Campos:

Event Title: Campo "Nome" + "Assunto"
Start Date & Time: Campo "Data" + Campo "Horário"
End Date & Time: Calculado automaticamente
Description: Campo "Descrição"
Guest Email: Campo "Email"

Passo 3: Testar a Integração

  1. Publique o formulário em uma página
  2. Faça um teste preenchendo o formulário
  3. Verifique se o evento foi criado no Google Calendar
  4. Ative o Zap se o teste for bem-sucedido

Método 2: Usando Gravity Forms + Google Calendar (Profissional)

Passo 1: Instalar Gravity Forms

1. Compre e Instale o Gravity Forms:

  • Acesse gravityforms.com
  • Compre a licença (a partir de $59/ano)
  • Baixe e instale o plugin

2. Instalar Add-on Google Calendar:

  • No painel do WordPress: Forms > Add-Ons
  • Procure por “Google Calendar”
  • Instale e ative o add-on

Passo 2: Configurar Google API

1. Criar Projeto no Google Cloud Console:

2. Ativar APIs Necessárias:

  • Vá para “APIs & Services > Library”
  • Ative: “Google Calendar API”
  • Ative: “Google+ API” (se necessário)

3. Criar Credenciais OAuth 2.0:

  • Vá para “APIs & Services > Credentials”
  • Clique em “Create Credentials > OAuth 2.0 Client ID”
  • Tipo: Web application
  • Nome: “WordPress Integration”
  • Authorized redirect URIs: https://seusite.com/wp-admin/admin.php?page=gf_settings&subview=gravityformsgooglecalendar

4. Copiar Client ID e Client Secret:

Client ID: 123456789-abcdefghijklmnop.apps.googleusercontent.com
Client Secret: GOCSPX-AbCdEfGhIjKlMnOpQrStUvWxYz

Passo 3: Configurar Gravity Forms

1. Configurar Add-on Google Calendar:

  • Vá para Forms > Settings > Google Calendar
  • Cole o Client ID e Client Secret
  • Clique em “Save Settings”
  • Clique em “Authenticate with Google”
  • Autorize o acesso

2. Criar Formulário de Agendamento:

Campos Essenciais:
- Nome (Single Line Text)
- Email (Email)
- Telefone (Phone)
- Data do Evento (Date Picker)
- Horário de Início (Time)
- Horário de Fim (Time)
- Assunto/Título (Single Line Text)
- Descrição (Paragraph Text)

3. Configurar Feed do Google Calendar:

  • Edite o formulário
  • Vá para Settings > Google Calendar
  • Clique em “Add New”
  • Configure os campos:
Feed Name: Agendamentos do Site
Google Account: [sua conta conectada]
Calendar: [selecione o calendário]
Event Title: {Nome:1} - {Assunto:7}
Event Description: {Descrição:8}
Start Date: {Data do Evento:4}
Start Time: {Horário de Início:5}
End Date: {Data do Evento:4}
End Time: {Horário de Fim:6}
Attendees: {Email:2}

Método 3: Integração Manual com Contact Form 7

Passo 1: Preparar Contact Form 7

1. Instale Contact Form 7:
Plugins > Adicionar Novo > Contact Form 7

2. Criar Formulário Personalizado:

<label> Seu nome (obrigatório)
[text* your-name] </label>

<label> Seu e-mail (obrigatório)
[email* your-email] </label>

<label> Data do evento
[date event-date] </label>

<label> Horário de início
[time start-time] </label>

<label> Horário de fim
[time end-time] </label>

<label> Assunto
[text event-subject] </label>

<label> Sua mensagem
[textarea your-message] </label>

[submit "Agendar"]

Passo 2: Criar Script PHP Personalizado

Adicionar ao functions.php do tema:

<?php
// Função para criar evento no Google Calendar
add_action('wpcf7_mail_sent', 'create_google_calendar_event');

function create_google_calendar_event($contact_form) {
    // Configurações da API
    $client_id = 'SEU_CLIENT_ID_AQUI';
    $client_secret = 'SEU_CLIENT_SECRET_AQUI';
    $refresh_token = 'SEU_REFRESH_TOKEN_AQUI';
    $calendar_id = 'primary'; // ou ID específico do calendário

    // Obter dados do formulário
    $submission = WPCF7_Submission::get_instance();
    $posted_data = $submission->get_posted_data();

    // Extrair informações
    $name = sanitize_text_field($posted_data['your-name']);
    $email = sanitize_email($posted_data['your-email']);
    $event_date = sanitize_text_field($posted_data['event-date']);
    $start_time = sanitize_text_field($posted_data['start-time']);
    $end_time = sanitize_text_field($posted_data['end-time']);
    $subject = sanitize_text_field($posted_data['event-subject']);
    $message = sanitize_textarea_field($posted_data['your-message']);

    // Formatar datas para ISO 8601
    $start_datetime = $event_date . 'T' . $start_time . ':00';
    $end_datetime = $event_date . 'T' . $end_time . ':00';

    // Criar evento
    $event_data = array(
        'summary' => $subject . ' - ' . $name,
        'description' => $message . "\n\nContato: " . $email,
        'start' => array(
            'dateTime' => $start_datetime,
            'timeZone' => 'America/Sao_Paulo',
        ),
        'end' => array(
            'dateTime' => $end_datetime,
            'timeZone' => 'America/Sao_Paulo',
        ),
        'attendees' => array(
            array('email' => $email)
        ),
        'reminders' => array(
            'useDefault' => false,
            'overrides' => array(
                array('method' => 'email', 'minutes' => 1440), // 24h antes
                array('method' => 'popup', 'minutes' => 30),   // 30min antes
            )
        )
    );

    // Enviar para Google Calendar API
    send_to_google_calendar($event_data, $client_id, $client_secret, $refresh_token, $calendar_id);
}

function send_to_google_calendar($event_data, $client_id, $client_secret, $refresh_token, $calendar_id) {
    // Obter access token
    $token_url = 'https://oauth2.googleapis.com/token';
    $token_data = array(
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'refresh_token' => $refresh_token,
        'grant_type' => 'refresh_token'
    );

    $token_response = wp_remote_post($token_url, array(
        'body' => $token_data
    ));

    if (is_wp_error($token_response)) {
        return false;
    }

    $token_body = json_decode(wp_remote_retrieve_body($token_response), true);
    $access_token = $token_body['access_token'];

    // Criar evento no calendário
    $calendar_url = 'https://www.googleapis.com/calendar/v3/calendars/' . $calendar_id . '/events';

    $calendar_response = wp_remote_post($calendar_url, array(
        'headers' => array(
            'Authorization' => 'Bearer ' . $access_token,
            'Content-Type' => 'application/json'
        ),
        'body' => json_encode($event_data)
    ));

    return !is_wp_error($calendar_response);
}
?>

Método 4: Plugin Dedicado – Amelia Booking

Passo 1: Instalar Amelia

1. Comprar e Instalar:

  • Acesse wpamelia.com
  • A partir de $59/ano
  • Inclui integração nativa com Google Calendar

2. Configurar Básico:

  • Amelia > Settings > General
  • Configure fuso horário
  • Defina moeda e formato de data

Passo 2: Conectar Google Calendar

1. Configurar API Google:

  • Amelia > Settings > Integrations > Google Calendar
  • Adicione Client ID e Client Secret
  • Clique em “Sign in with Google”

2. Configurar Sincronização:
Escolha direção da sincronização:

  • Amelia → Google Calendar
  • Google Calendar → Amelia
  • Bidirecional

Defina calendário padrão e configure conflitos de horário.

Passo 3: Criar Serviços e Funcionários

1. Adicionar Serviços:

  • Amelia > Services
  • Crie serviços (consulta, reunião, etc.)
  • Defina duração e preço

2. Configurar Funcionários:

  • Amelia > Employees
  • Adicione funcionários
  • Conecte cada um ao seu Google Calendar

Scripts e Códigos Úteis

JavaScript para Validação de Data/Hora

// Validar se data selecionada não é passada
document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.querySelector('input[name="event-date"]');
    const timeInput = document.querySelector('input[name="start-time"]');

    if (dateInput) {
        // Definir data mínima como hoje
        const today = new Date().toISOString().split('T')[0];
        dateInput.setAttribute('min', today);

        dateInput.addEventListener('change', function() {
            const selectedDate = new Date(this.value);
            const today = new Date();

            if (selectedDate < today) {
                alert('Por favor, selecione uma data futura.');
                this.value = '';
            }
        });
    }

    if (timeInput) {
        timeInput.addEventListener('change', function() {
            const selectedTime = this.value;
            const selectedDate = dateInput.value;

            if (selectedDate === today && selectedTime) {
                const now = new Date();
                const currentTime = now.getHours().toString().padStart(2, '0') + ':' + 
                                  now.getMinutes().toString().padStart(2, '0');

                if (selectedTime <= currentTime) {
                    alert('Por favor, selecione um horário futuro.');
                    this.value = '';
                }
            }
        });
    }
});

CSS para Melhorar Formulário

/* Estilização do formulário de agendamento */
.calendar-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

.calendar-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.calendar-form input,
.calendar-form textarea,
.calendar-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.calendar-form input[type="date"],
.calendar-form input[type="time"] {
    width: 48%;
    display: inline-block;
    margin-right: 2%;
}

.calendar-form input[type="submit"] {
    background: #0073aa;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: auto;
}

.calendar-form input[type="submit"]:hover {
    background: #005a87;
}

.form-row {
    display: flex;
    gap: 10px;
}

.form-row input {
    flex: 1;
}

Configurações Avançadas

Personalizar Evento no Google Calendar

// Adicionar mais detalhes ao evento
$event_data = array(
    'summary' => $subject . ' - ' . $name,
    'description' => $message . "\n\n" .
                    "Contato: " . $email . "\n" .
                    "Telefone: " . $phone . "\n" .
                    "Site: " . get_site_url(),
    'location' => 'Endereço da Empresa, Cidade, Estado',
    'start' => array(
        'dateTime' => $start_datetime,
        'timeZone' => 'America/Sao_Paulo',
    ),
    'end' => array(
        'dateTime' => $end_datetime,
        'timeZone' => 'America/Sao_Paulo',
    ),
    'attendees' => array(
        array('email' => $email, 'displayName' => $name)
    ),
    'reminders' => array(
        'useDefault' => false,
        'overrides' => array(
            array('method' => 'email', 'minutes' => 1440), // 24h
            array('method' => 'email', 'minutes' => 60),   // 1h
            array('method' => 'popup', 'minutes' => 15),   // 15min
        )
    ),
    'colorId' => '2', // Verde para novos agendamentos
    'visibility' => 'private',
    'status' => 'confirmed'
);

Webhook para Notificações

// Adicionar webhook ao functions.php
add_action('wpcf7_mail_sent', 'send_calendar_notification');

function send_calendar_notification($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    $posted_data = $submission->get_posted_data();

    // Enviar notificação para Slack/Discord/Teams
    $webhook_url = 'https://hooks.slack.com/services/SEU/WEBHOOK/AQUI';

    $message = array(
        'text' => 'Novo agendamento recebido!',
        'attachments' => array(
            array(
                'color' => 'good',
                'fields' => array(
                    array(
                        'title' => 'Nome',
                        'value' => $posted_data['your-name'],
                        'short' => true
                    ),
                    array(
                        'title' => 'Email',
                        'value' => $posted_data['your-email'],
                        'short' => true
                    ),
                    array(
                        'title' => 'Data',
                        'value' => $posted_data['event-date'],
                        'short' => true
                    ),
                    array(
                        'title' => 'Horário',
                        'value' => $posted_data['start-time'],
                        'short' => true
                    )
                )
            )
        )
    );

    wp_remote_post($webhook_url, array(
        'body' => json_encode($message),
        'headers' => array('Content-Type' => 'application/json')
    ));
}

Troubleshooting Comum

Problema: Erro de Autenticação

Soluções:

  • Verifique se o SSL está ativo
  • Confirme Client ID e Secret
  • Reautentique a conta Google
  • Verifique URLs de redirecionamento

Problema: Eventos não são criados

Soluções:

// Adicionar logs para debug
function debug_calendar_integration($message) {
    error_log('[Calendar Integration] ' . $message);
}

// Usar na função principal
debug_calendar_integration('Dados recebidos: ' . print_r($posted_data, true));

Problema: Fuso Horário Incorreto

Soluções:

  • Configure WordPress: Settings > General > Timezone
  • Use timezone correto na API: America/Sao_Paulo
  • Teste com eventos manuais
Tags:
#formulário de contato #google calendar #WordPress
Gostou deste conteúdo?

Sua opinião é importante para nós!

Artigos Relacionados