Energigreen — Plugin Formulario Sticky
Dashboard Activo en energigreen.com
Leads este mes
Conecta Google Sheets
Tasa de conversión
Aperturas / envíos
Estado
● Activo
Plugin instalado
Vista previa en vivo
energigreen.com
Ahorra en tu factura
¿Cómo ahorrar en tus facturas energéticas?
Sube aquí tu factura Nombre * Correo electrónico * Teléfono *
He leído y acepto los Términos y condiciones

Haz clic en la pestaña verde para abrir el formulario

Inicio rápido
1
Configura emails y Google Sheets
Añade destinatarios y conecta tu hoja
2
Crea el Apps Script (backend gratuito)
Copia el código desde la pestaña Instalar
3
Pega el snippet en tu web
Antes del </body> en todas las páginas
Comportamiento sticky
Acompañar el scroll
El formulario sigue al usuario
Botón cerrar (×)
El usuario puede cerrarlo
Abrir automáticamente
Tras 10 segundos en la página
Animación de entrada
Rebote suave al cargar
Textos
Colores
Color principal
Texto botones
Fondo formulario
Icono del formulario

Sube tu propia imagen (PNG, SVG, JPG — máx 2MB)

Haz clic o arrastra aquí

PNG, SVG, JPG, WebP

Por defecto
Sin icono
Campos visibles
Subir factura
Nombre
Obligatorio
Correo electrónico
Obligatorio
Teléfono
Obligatorio
Términos y condiciones
Vista previa móvil
Ahorra

100% responsive — móvil, tablet y PC

Cada lead dispara un email automático con todos los datos del contacto.
Destinatarios

Recibirán un email con los datos de cada lead

info@energigreen.com
ventas@energigreen.com
Confirmación al usuario
Enviar email de confirmación
El usuario recibe un email tras enviar
Servicio de envío
Recomendado — gratuito, sin servicios externos.
Cada lead se añade como nueva fila en tu Google Sheet con fecha y hora.
Conexión Google Sheets
Mapeo de columnas
📅 Fecha y hora
👤 Nombre
✉️ Email
📞 Teléfono
📎 Archivo
🔗 Página origen
Automatizaciones
Notificación Slack
Aviso al canal #leads
Webhook CRM
HubSpot, Salesforce…
Google Analytics GA4
Evento Lead al enviar
Meta Pixel
Evento Lead en Facebook

Formularios embebidos

Formularios horizontales para incrustar en cualquier página

Paso 1 — Google Apps Script
1
Abre tu Google Sheet
Ve a Extensiones → Apps Script y crea un proyecto nuevo
2
Pega el código y guarda
Sustituye los emails en DESTINATARIOS
3
Publica como Web App
Implementar → Nueva implementación → Web App. Acceso: Cualquiera
4
Pega la URL en el snippet
Sustituye TU_SCRIPT_URL en el código del formulario
// ENERGIGREEN — APPS SCRIPT // Extensiones → Apps Script → pega aquí const DESTINATARIOS = [ 'info@energigreen.com', 'ventas@energigreen.com' ]; function doPost(e) { try { const d = JSON.parse(e.postData.contents); const hoja = SpreadsheetApp .getActiveSpreadsheet() .getSheetByName('Leads') || SpreadsheetApp.getActiveSpreadsheet() .getActiveSheet(); hoja.appendRow([ new Date().toLocaleString('es-ES'), d.nombre || '', d.email || '', d.telefono || '', d.archivo || '', d.pagina || '', d.formulario || 'sticky' ]); MailApp.sendEmail({ to: DESTINATARIOS.join(','), subject: '🌱 Nuevo lead — ' + d.nombre, htmlBody: '

Nuevo lead

' + '

Nombre: ' + d.nombre + '

' + '

Email: ' + d.email + '

' + '

Teléfono: ' + d.telefono + '

' + '

Página: ' + d.pagina + '

' }); MailApp.sendEmail({ to: d.email, subject: '¡Recibido! Energigreen analizará tu factura', htmlBody: '

Hola ' + d.nombre + ',

' + '

Hemos recibido tu solicitud. Te contactaremos' + ' en menos de 24 horas.

' + '

Energigreen

' }); return ContentService .createTextOutput(JSON.stringify({ok:true})) .setMimeType(ContentService.MimeType.JSON); } catch(err) { return ContentService .createTextOutput(JSON.stringify({ok:false,err:err.message})) .setMimeType(ContentService.MimeType.JSON); } }
Paso 2 — Snippet HTML para tu web
Pega antes del </body> en todas tus páginas
<!-- ENERGIGREEN STICKY FORM --> <style> #eg{position:fixed;right:0;top:50%;transform:translateY(-50%); display:flex;align-items:stretch;z-index:99999; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} #eg-tab{background:#2db870;color:#fff;writing-mode:vertical-rl; padding:14px 8px;font-size:12px;font-weight:600;cursor:pointer; border-radius:10px 0 0 10px;display:flex;flex-direction:column; align-items:center;gap:8px;user-select:none; box-shadow:-3px 0 14px rgba(0,0,0,.15);transition:background .15s} #eg-tab:hover{background:#1e9457} #eg-panel{width:0;overflow:hidden; transition:width .28s cubic-bezier(.4,0,.2,1); background:#fff;border-radius:12px 0 0 12px; box-shadow:-6px 0 30px rgba(0,0,0,.16)} #eg-panel.open{width:300px} #eg-inner{width:300px;padding:20px 18px;overflow-y:auto; max-height:88vh;box-sizing:border-box;position:relative} #eg-x{position:absolute;top:10px;right:12px;background:none; border:none;cursor:pointer;font-size:20px;color:#999; padding:2px 6px;border-radius:4px;line-height:1} #eg-x:hover{background:#f3f4f6;color:#333} .eg-pig{display:flex;justify-content:center;margin-bottom:12px} .eg-h{text-align:center;color:#1e9457;font-size:14px;font-weight:600; line-height:1.4;margin-bottom:16px} .eg-l{font-size:12px;color:#6b7280;font-weight:500;display:block; margin:10px 0 4px} .eg-i{width:100%;padding:8px 10px;border:1px solid #e4e7ec; border-radius:8px;font-size:13px;color:#1a1d23;background:#fafafa; box-sizing:border-box;font-family:inherit} .eg-i:focus{outline:none;border-color:#2db870;background:#fff} .eg-tc{font-size:11px;color:#9ca3af;margin-top:12px; display:flex;align-items:flex-start;gap:6px} .eg-tc input{margin-top:2px;accent-color:#2db870} .eg-tc a{color:#1e9457} .eg-btn{width:100%;margin-top:14px;padding:11px;background:#2db870; color:#fff;border:none;border-radius:24px;font-size:14px; font-weight:600;cursor:pointer;font-family:inherit; transition:background .15s} .eg-btn:hover{background:#1e9457} @media(max-width:600px){ #eg{right:0;top:auto!important;bottom:0;transform:none!important; flex-direction:column-reverse;align-items:flex-end} #eg-tab{writing-mode:horizontal-tb;border-radius:10px 10px 0 0; flex-direction:row;padding:10px 16px} #eg-panel.open{width:100vw} #eg-inner{width:100vw;max-height:75vh} } </style> <div id="eg"> <div id="eg-tab" onclick="egT()"> <svg width="24" height="22" viewBox="0 0 200 185" fill="none"> <rect x="28" y="28" width="38" height="42" rx="19" fill="rgba(255,255,255,.4)"/> <rect x="134" y="28" width="38" height="42" rx="19" fill="rgba(255,255,255,.4)"/> <rect x="18" y="52" width="164" height="110" rx="52" fill="rgba(255,255,255,.4)"/> <rect x="34" y="34" width="132" height="96" rx="50" fill="rgba(255,255,255,.4)"/> <rect x="82" y="36" width="36" height="8" rx="4" fill="rgba(255,255,255,.65)"/> <circle cx="72" cy="88" r="8" fill="white"/> </svg> Ahorra en tu factura </div> <div id="eg-panel"> <div id="eg-inner"> <button id="eg-x" onclick="egT()">&times;</button> <div class="eg-pig"> <svg width="70" height="64" viewBox="0 0 200 185" fill="none"> <defs><linearGradient id="pg" x1="100" y1="0" x2="100" y2="185" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#5ecb6b"/><stop offset="100%" stop-color="#2a9148"/></linearGradient></defs> <rect x="28" y="28" width="38" height="42" rx="19" fill="url(#pg)"/> <rect x="134" y="28" width="38" height="42" rx="19" fill="url(#pg)"/> <rect x="18" y="52" width="164" height="110" rx="52" fill="url(#pg)"/> <rect x="34" y="34" width="132" height="96" rx="50" fill="url(#pg)"/> <rect x="82" y="36" width="36" height="8" rx="4" fill="#1e6b33"/> <circle cx="72" cy="88" r="8" fill="white" opacity=".95"/> <circle cx="74" cy="89.5" r="4" fill="#1e6b33"/> <rect x="52" y="148" width="34" height="22" rx="12" fill="url(#pg)"/> <rect x="114" y="148" width="34" height="22" rx="12" fill="url(#pg)"/> <rect x="152" y="100" width="26" height="22" rx="11" fill="url(#pg)"/> </svg> </div> <div class="eg-h">¿Cómo ahorrar en tus facturas energéticas?</div> <span class="eg-l">Sube aquí tu factura</span> <input type="file" class="eg-i" id="eg-f" accept=".pdf,image/*"> <span class="eg-l">Nombre *</span> <input type="text" class="eg-i" id="eg-n" placeholder="Tu nombre"> <span class="eg-l">Correo electrónico *</span> <input type="email" class="eg-i" id="eg-e" placeholder="tu@email.com"> <span class="eg-l">Teléfono *</span> <input type="tel" class="eg-i" id="eg-t" placeholder="+34 600 000 000"> <div class="eg-tc"> <input type="checkbox" id="eg-tc"> He leído y acepto los <a href="/terminos-y-condiciones">Términos</a> </div> <button class="eg-btn" onclick="egS()">Enviar</button> </div></div></div> <script> const EG_URL = 'TU_SCRIPT_URL_AQUI'; const egPanel = document.getElementById('eg-panel'); function egT(){ egPanel.classList.toggle('open'); } async function egS(){ const n=document.getElementById('eg-n').value.trim(); const e=document.getElementById('eg-e').value.trim(); const t=document.getElementById('eg-t').value.trim(); const tc=document.getElementById('eg-tc').checked; const f=document.getElementById('eg-f').files[0]; if(!n||!e||!t){alert('Rellena todos los campos.');return;} if(!tc){alert('Acepta los términos y condiciones.');return;} const btn=document.querySelector('.eg-btn'); btn.textContent='Enviando…';btn.disabled=true; try{ await fetch(EG_URL,{method:'POST',mode:'no-cors', headers:{'Content-Type':'application/json'}, body:JSON.stringify({nombre:n,email:e,telefono:t, archivo:f?f.name:'',pagina:location.href})}); document.getElementById('eg-inner').innerHTML= '<div style="text-align:center;padding:24px 12px">' + '<div style="font-size:44px;margin-bottom:12px">✅</div>' + '<p style="color:#1e9457;font-size:15px;font-weight:600;margin-bottom:8px">¡Enviado!</p>' + '<p style="color:#6b7280;font-size:13px">Te contactaremos en menos de 24h.</p></div>'; setTimeout(()=>egT(),4000); }catch(err){btn.textContent='Error — inténtalo de nuevo';btn.disabled=false;} } </script> <!-- FIN ENERGIGREEN -->