Estrutura do Projeto
O sistema funciona assim:
Formulário HTML
↓
JavaScript envia os dados
↓
Google Apps Script recebe
↓
Google Sheets armazena
1. Criar a Planilha
No Google Sheets crie uma nova planilha.
Exemplo de colunas:
Você pode criar qualquer coluna futuramente:
2. Criar o Google Apps Script
Na planilha:
Extensões → Apps Script
Apague tudo e cole:
function doPost(e){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Página1");
sheet.appendRow([
e.parameter.nome,
e.parameter.email,
e.parameter.whatsapp,
new Date()
]);
return ContentService
.createTextOutput("Success")
.setMimeType(ContentService.MimeType.TEXT);
}
3. Publicar o Script
Clique:
Implantar → Nova implantação
Escolha:
Depois clique em:
Implantar
Copie a URL gerada.
Exemplo:
https://script.google.com/macros/s/AKfycbXXXX/exec
4. Estrutura Universal do Formulário
HTML
<form id="formulario">
<input type="text" name="nome" placeholder="Nome" required>
<input type="email" name="email" placeholder="E-mail" required>
<input type="tel" name="whatsapp" placeholder="WhatsApp" required>
<button type="submit">
Enviar
</button>
</form>
<p id="status"></p>
5. JavaScript Universal
Substitua:
SUA_URL_AQUI
pela URL do Apps Script.
<script>
const scriptURL = "SUA_URL_AQUI";
const form = document.getElementById("formulario");
const status = document.getElementById("status");
form.addEventListener("submit", e => {
e.preventDefault();
status.innerHTML = "Enviando...";
fetch(scriptURL, {
method: "POST",
body: new FormData(form)
})
.then(response => {
status.innerHTML = "Enviado com sucesso!";
form.reset();
})
.catch(error => {
status.innerHTML = "Erro ao enviar.";
});
});
</script>
6. Sistema Dinâmico Universal
Como adicionar novos campos
Basta criar novos inputs:
<input type="text" name="empresa">
<input type="text" name="cidade">
<input type="text" name="instagram">
E adicionar no Apps Script:
sheet.appendRow([
e.parameter.nome,
e.parameter.email,
e.parameter.whatsapp,
e.parameter.empresa,
e.parameter.cidade,
e.parameter.instagram,
new Date()
]);
7. Modelo Universal Automático (RECOMENDADO)
Este modelo salva QUALQUER campo automaticamente sem precisar editar o Apps Script.
Apps Script Inteligente
function doPost(e){
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = [];
for(var key in e.parameter){
data.push(e.parameter[key]);
}
data.push(new Date());
sheet.appendRow(data);
return ContentService
.createTextOutput("Success")
.setMimeType(ContentService.MimeType.TEXT);
}
8. Vantagens do Modelo Inteligente
✅ Funciona com qualquer formulário
✅ Não precisa editar o script toda hora
✅ Reutilizável
✅ Ideal para landing pages
✅ Ideal para Blogger
✅ Ideal para Kordoba
✅ Escalável
✅ Fácil manutenção
9. Exemplo de Formulário Avançado
<form id="formulario">
<input type="text" name="nome" placeholder="Nome">
<input type="email" name="email" placeholder="E-mail">
<input type="tel" name="whatsapp" placeholder="WhatsApp">
<input type="text" name="empresa" placeholder="Empresa">
<select name="plano">
<option>Plano Básico</option>
<option>Plano Premium</option>
</select>
<textarea name="mensagem"></textarea>
<button type="submit">
Enviar
</button>
</form>
10. Estrutura Recomendada para Todos os Projetos
/landing-page
/formulario
/google-sheet
/apps-script
11. Ideias de Uso
Você pode usar esse sistema para:
Captura de Leads
Área de Contato
Cadastro de Clientes
Solicitação de Orçamento
Pré-matrícula
Newsletter
Suporte
Briefing de Design
Pedido de Serviço
Cadastro para Cursos
CRM Simples
Banco de Leads
12. Melhorias Futuras
Você poderá adicionar:
Upload de arquivos
Login Google
Painel administrativo
Automação com Gmail
Envio automático para WhatsApp
Integração com Notion
Integração com Airtable
Banco de dados Firebase
Sistema de autenticação
Dashboard Analytics
13. Estrutura Final Recomendada
Frontend:
HTML + CSS + JS
Backend:
Google Apps Script
Banco de Dados:
Google Sheets