Proceso de cierre del Proyecto
Documentación técnica y pasos obligatorios para la entrega hacia entornos de prueba y producción.
📖 Descripción
Formulario de contacto completo con validación, integración con email y almacenamiento en Google Sheets
🚀 Cómo lo utilizamos
Este formulario captura información de contacto (nombre, apellido, email, teléfono y mensaje) y la envía tanto a un servicio de email como a una hoja de cálculo de Google. Incluye validación de campos requeridos, indicador de carga y redirección a página de agradecimiento.
⚙️ Configuración
El formulario está configurado para enviar datos a través de dos canales: un servicio de email personalizado y una hoja de Google Sheets. Debes actualizar los valores de configuración según tu proyecto.
🎨 Generador de Formulario Personalizado
Completa los campos a continuación para generar tu formulario de contacto personalizado. Podrás ver el código generado y descargarlo como un componente .astro listo para usar.
📖 Descripción
Configuración de Google Sheets con Google Apps Script para almacenar automáticamente los leads del formulario de contacto
🚀 Cómo lo utilizamos
Este paso configura una hoja de cálculo de Google que recibe automáticamente los datos del formulario de contacto. Los leads se guardan en tiempo real en la tabla 'form_leads' con información de ID, nombre, apellido, email, teléfono, mensaje y fecha.
⚙️ Configuración
Necesitas crear un Google Sheet, configurar la estructura de datos, agregar un script de Google Apps Script y desplegarlo como WebApp. El URL del WebApp se utilizará en tu formulario de contacto.
📥 Instalación paso a paso
Crear un nuevo Google Sheet
Abre Google Sheets y crea un nuevo documento. Este será tu base de datos para almacenar los leads del formulario.
https://sheets.google.com/create Crear la estructura de la tabla
En la primera fila del Sheet, crea las siguientes columnas: ID, Nombre, Apellido, Email, Telefono, Mensaje, Fecha. Estos nombres deben coincidir exactamente con los nombres de los campos del formulario.
Columnas: ID, Nombre, Apellido, Email, Telefono, Mensaje, Fecha Renombrar la hoja a 'form_leads'
En la parte inferior del Sheet, haz clic derecho en la pestaña de la hoja y selecciona 'Renombrar hoja'. Cámbiala a 'form_leads'. Este nombre es importante para que el script funcione correctamente.
Click derecho en la pestaña → Renombrar hoja → form_leads Abrir Google Apps Script
Ve a Extensiones en el menú superior y selecciona 'Apps Script'. Se abrirá una nueva ventana con el editor de código.
Extensiones → Apps Script Pegar el código del script
En el editor de Apps Script, elimina todo el código existente y pega el código completo que se proporciona en la sección de 'Código de Google Apps Script' abajo. Este código maneja la recepción y almacenamiento de datos del formulario.
Reemplazar todo el código con el script de Google Apps Script Ejecutar la función initialSetup
En el editor de Apps Script, selecciona 'intialSetup' en el dropdown de funciones (arriba a la izquierda) y presiona el botón 'Run'. Esto configurará el ID de tu spreadsheet. Deberías ver 'Execution completed' en los logs.
Seleccionar 'intialSetup' en el dropdown y presionar Run Desplegar como WebApp
Haz clic en el botón azul 'Deploy' en la esquina superior derecha. Selecciona 'New deployment' y en el tipo de deployment elige 'Web app'.
Click en Deploy → New deployment → Type: Web app Configurar opciones de deployment
En las opciones de deployment: mantén 'Execute as' con tu email de Google, y en 'Who has access' selecciona 'Anyone'. Agrega una descripción si lo deseas (ej: 'Form Leads Handler').
Execute as: tu email | Who has access: Anyone Copiar la URL del WebApp
Después del deployment, se mostrará una URL que comienza con 'https://script.google.com/macros/s/'. Esta es la URL que necesitas copiar y usar en tu formulario de contacto.
Copiar la URL que aparece después de 'Web app:' 📝 Código HTML
const sheetName = 'form_leads'
const scriptProp = PropertiesService.getScriptProperties()
function intialSetup () {
const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', activeSpreadsheet.getId())
}
function doPost (e) {
const lock = LockService.getScriptLock()
lock.tryLock(10000)
try {
const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
const sheet = doc.getSheetByName(sheetName)
const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
const nextRow = sheet.getLastRow() + 1
const newRow = headers.map(function(header) {
return header === 'Fecha' ? new Date() : e.parameter[header]
})
sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
.setMimeType(ContentService.MimeType.JSON)
}
catch (e) {
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
.setMimeType(ContentService.MimeType.JSON)
}
finally {
lock.releaseLock()
}
}
🔑 Qué debes cambiar
Nombres de columnas exactos
Los nombres de las columnas deben coincidir exactamente con los nombres de los campos del formulario (ID, Nombre, Apellido, Email, Telefono, Mensaje, Fecha)
Nombre de la hoja
La hoja debe llamarse exactamente 'form_leads' (sin espacios, todo en minúsculas). El script busca esta hoja específicamente.
Función initialSetup
Debes ejecutar la función 'intialSetup' una sola vez después de pegar el código. Esto guarda el ID de tu spreadsheet en las propiedades del script.
Duplicado de proyectos
Si duplicas un Google Sheet ya configurado, no necesitas pegar el código nuevamente. El script y el deployment se copiarán automáticamente.
URL del WebApp
La URL del WebApp es lo que pegarás en tu formulario de contacto en la variable SHEET_URL. Esta URL es única para cada deployment.
Permisos de acceso
Asegúrate de seleccionar 'Anyone' en 'Who has access' para que el formulario pueda enviar datos sin autenticación.
📖 Descripción
Configuración de GitHub Actions para automatizar el build y deploy de tu sitio web
🚀 Cómo lo utilizamos
Este workflow se ejecuta automáticamente cada vez que haces push a la rama main. Detecta automáticamente si usas pnpm o npm, instala dependencias, construye el proyecto y despliega el resultado a la rama deploy.
📦 Descargar Configuración de Deploy
Descarga el archivo de configuración de GitHub Actions para automatizar el deploy de tu proyecto. El archivo se descargará con la estructura de carpetas correcta (.github/workflows/deploy.yml).
📋 Instrucciones de instalación
- Descarga el archivo usando el botón de arriba
- Descomprime el archivo ZIP (si tu navegador no lo hace automáticamente)
-
Copia la carpeta
.githubcompleta a la raíz de tu proyecto -
La estructura final debe ser:
tu-proyecto/.github/workflows/deploy.yml - Haz commit y push de los cambios a tu repositorio de GitHub
- El workflow se ejecutará automáticamente en cada push a la rama main
📖 Descripción
Guía paso a paso para subir tu proyecto a GitHub por primera vez
🚀 Cómo lo utilizamos
Sigue estos comandos en orden en tu terminal. Cada paso prepara tu proyecto y lo sube al repositorio remoto en GitHub.
⚙️ Configuración
Asegúrate de tener Git instalado y haber creado un repositorio vacío en GitHub. Luego ejecuta los comandos en orden desde la carpeta raíz de tu proyecto.
📥 Instalación paso a paso
Inicializar Git en tu proyecto
git init Si tu proyecto aún no tiene Git inicializado, ejecuta este comando. Si ya lo tiene, puedes saltarte este paso.
Agregar todos los archivos al staging area
git add . Este comando prepara todos los archivos de tu proyecto para ser incluidos en el commit.
Crear el primer commit
git commit -m "Initial commit: Project setup" Crea un commit con todos los archivos. Puedes cambiar el mensaje si lo deseas.
Renombrar la rama a 'main'
git branch -M main Asegura que tu rama principal se llame 'main'. Si ya se llama así, este comando no hará nada.
Agregar el repositorio remoto
git remote add origin https://github.com/TU_USUARIO/TU_REPO.git Reemplaza TU_USUARIO con tu nombre de usuario de GitHub y TU_REPO con el nombre de tu repositorio. Este comando vincula tu proyecto local con GitHub.
Subir los cambios a GitHub
git push -u origin main ¡Listo! Este comando sube tu proyecto a GitHub. La bandera -u establece 'main' como rama por defecto para futuros pushes.
🔑 Qué debes cambiar
Reemplazar valores
Cambia TU_USUARIO por tu nombre de usuario de GitHub y TU_REPO por el nombre de tu repositorio
Crear repositorio en GitHub
Antes de ejecutar estos comandos, crea un repositorio vacío en GitHub (sin README, .gitignore ni licencia)
Verificar Git
Asegúrate de tener Git instalado ejecutando: git --version
Configurar identidad Git
Si es tu primera vez, configura tu nombre y email: git config --global user.name 'Tu Nombre' y git config --global user.email 'tu@email.com'
Próximos pushes
Para futuros cambios, solo necesitas: git add . → git commit -m 'mensaje' → git push