Proceso de cierre del Proyecto

📖 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

1

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

2

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

3

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

4

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

5

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

6

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

7

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

8

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

9

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

📖 Descripción

Generador de script para el envío del formulario de contacto: email, reCAPTCHA, Google Sheets y redirección. El diseño HTML/CSS lo define cada desarrollador.

🚀 Cómo lo utilizamos

Usa el generador para obtener solo el script de funcionamiento. Integra ese script en tu componente .astro con tu propio diseño. El script envía los datos por email y los guarda en Google Sheets cuando los campos usan los nombres requeridos.

⚙️ Configuración

Configura email destino, reCAPTCHA, URL de Google Apps Script y página de agradecimiento en el generador. Tu markup debe incluir form id="form", botón id="contact-submit" y los name: Nombre, Apellido, Email, Telefono, Mensaje.

📖 Descripción

Configuración del componente de consentimiento de cookies para websites con GTM o solo Analytics, cargando medición únicamente después de aceptar cookies.

📖 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.