Un Ejemplo-Paso-a-Paso de usar un Formulario HTML para enviar un mensaje de "Contáctenos" Por Email sin un servidor Backend utilizando un Google Script - Sin PHP, Python, Ruby, Java, Node.js etc.
Era necesaria una manera de enviar un email desde una página HTML "estática" cuando no se (quiere) tiene un servidor.
- Sin "Backend" para Implementar/Mantener/Pagar
- Completamente personalizable - cada aspecto es personalizable!
- Email enviado a través de Google Mail que está Permitido en Todas Partes (Alto rendimiento de entrega)
- Recopilar/Almacenar cualquier dato de un formulario en una Hoja de Cálculo para una sencilla visualización
(perfecto si necesitas compartirlo con personas no técnicas)
En lugar de usar un servidor para enviar un email,
que es fácil pero requiere mantenimiento,
utiliza Google para enviar correos en tu nombre
y usa las Hojas de Cálculo de Google para realizar un seguimiento de los datos!
Podrías utilizar un servicio "gratuito" como http://formspree.io/ para procesar tus envíos de formulario si no te te iteresa a donde estás enviando tus datos y querer manejar la data enviada
en tu bandeja de entrada (sucio ... apesta!)
Ó... puedes invertir unos minutos y mantener tus datos privados/manejables. Tú eliges.
Ejemplo: https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/
En Hojas de Google, Haz Click en "Archivo" > "Crear una copia..."
Esto debería mostrarte algo como esto:
Nota: Sientete libre de cambiar el nombre de la Copia como sea que quieras, esto no afectará el resultado final.
Abre el Editor de secuencia de comandos... haciendo click en "Herramientas" > "Editor de secuencia de comandos..."
Aquí está una instantánea del script que necesitas (en este punto del ejercicio): google-script-just-email.js
En la ventana del editor deberías ver:
Cambia el valor de el TO_ADDRESS a la dirección que deseas recibir
el mensaje del formulario de contacto.
No es inmediatamente obvio pero tienes que hacer click en "Gestionar Versiones..."
Luego crea tu nueva versión:
Selecciona la última versión del proyecto para implementar:
Copia la URL de la aplicación web en tu portapapeles / bloc de notas. Luego haz Click en "Aceptar".
Usando la plantilla en el index.html en este repositorio,
crea tu propio archivo html con el formulario básico. (guarda el archivo)
Recuerda cambiar la URL del
actiondel formulario con la que copiaste en el paso anterior:
Rellena algunos datos de muestra en el formulario HTML:
Envía el formulario. Deberias ver una confirmación de que se envió:
Abre la bandeja de entrada de la direccion email que estableciste en el Paso 3 (arriba)
Listo. Eso es. Acabas de crear un formulario HTML que envia correos!
Vamos a mantener esto Súper Ligero utilizando PURE CSS
para nuesto Estilo (Arreglar el "horrible" Formulario HTML en el paso 8).
Y submit (enviar) el formulario usando JQuery "AJAX" para mantener a la persona en tu página/sitio (evitar la "horrible" página de respuesta)
Para prevenir que la página del formulario cambie a la respuesta/resultado en JSON
se necesita enviar el formulario usando AJAX.
Actualiza el index.html para incluir el siguiente archivo JavaScript al final de tu fila
(antes de cerrar el tag </body>)
<script data-cfasync="false" type="text/javascript"
src="form-submission-handler.js"></script>Esto ahora va a mostrar un message de "Gracias" cuando el formlario es enviado:
Mantiene a la persona en la misma página. No recarga.
Adapta el mensaje editando el div thankyou_message:
Para este ejemplo utilizamos Pure CSS: http://purecss.io/start/
porque tien un peso ligero (4.0KB resumido y gzipped)
y soluciona nuestro actual "problema": Hacerlo ver bien.
Sin perder demasiado tiempo en esto, podemos hacer que el formulario luzca mucho mejor:
Por defecto, los body de los correos enviados contienen los pares key-value del formulario, con el key como un <h4> y el value como un
<div>. Esto es una vista bastante sencilla e infalible para los datos.
Deberías obtener algo que se vea mas o menos como esto:
Ten en cuenta que se trata de un trabajo en progreso y potencialmente te expone a obtener más de lo que esperabas en el correo electrónico. Debido a que el contenido del correo electrónico está realizando un bucle sobre todos los datos enviados en el formulario, si un robot o un usuario malintencionado decide hacer
POSTmás de lo que ha pedido, probablemente lo recibirás en tu bandeja de entrada. Usar con precaución por ahora. Estamos investigando mejoras.
Tu puedes modificar esto, a través del Editor de secuencia de comandos. La linea:
result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";tiene todo lo que necesitas. Puedes ajustar el marcado para que se adapte a ti. Elegimos un <h4> porque era el mejor tamaño para el correo electrónico, y añadimos una pequeña cantidad de CSS a él para fijar la capitalización (las llaves son todas minúsculas en el objeto JS) y un poco de espaciamiento por defecto. Mientras que los estilos en línea como este son generalmente malas prácticas en las páginas web normales, para el correo electrónico HTML son la única manera fiable de hacer CSS!
Fuimos con un <div> para la parte de valor, ya que podría ser cualquier cosa - de una sola línea, multilínea (un <p> por ejemplo no lo cortaría).
Mientras estamos aquí, también hay una opción replyTo para el métodosendEmail ()que está comentado por defecto:
MailApp.sendEmail({
to: TO_ADDRESS,
subject: "Contact form submitted",
// replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
htmlBody: formatMailBody(mailData)
});Puedes descomentarlo si deseas agregar un campo de respuesta a tu correo electrónico. El ejemplo en el script establecerá el reply-to como el correo electrónico enviado en el formulario (por el usuario).
La documentación de Google provee más información sobre MailApp.sendEmail (por ejemplo cc/bcc etc.) si te interesa:
https://developers.google.com/apps-script/reference/mail/mail-app
Enviar los datos del Formulario directamente a tu bandeja de entrada es un buen primer paso, pero podemos hacerlo mejor.
Esto grabará los datos recibidos desde el POST como una fila en la hoja de cálculo.
Observa: google-apps-script.js para obtener el código completo puedes copiar y pegar.
Sigue los Pasos 4, 5 y 6 para guardar una nueva versión y re-publicar el script.
Porque estamos carganto erchivos .js externos, nuestro buscador no nos peromitirá simplemente abrir el index.html desde un directorio local para probar el formlario.
Abre tu terminal y corre este comando para instalar los módulos node e iniciar el live server:
npm install live-server --save-dev && node_modules/.bin/live-server --port=8000Tomará un minuto la instalación,
pero cuando esté listo, tu live-server se iniciará.
Esto inicia un servidor HTTP de node.js en el puerto 8000 y abre el formulario que acabas de crear en tu buscador por defecto. Si deseas actualizar los estilos del formulario en el style.css o el Javascript del lado del cliente en el form-submission-handler.js, por favor asegurate de editar el index.html para caragar esos recursos localmente en lugar de a través de GitHub.
Nota: Esto es una ligera mordida de Node.js para principiantes en absoluto. Tu no necesitas node.js para "implementar" este formulario, puedes correrlo en cualquier servidor web que soporte HTML/CSS/JavaScript. Si núnca has usado antes Node.js, Observa: http://nodeguide.com/beginner.html pero para el propósito de este ejercicio (enviar un formulario sin un servidor) No necesitas node.js ó
live-serveres sólo una buena cosa para tener cuando estás creando tu formulario porque automáticamente recarga la página cuando haces cambios en tu editor de texto!
Si deseas seguir este tutorial, por favor déjanos saberlo!
En respuesta a La solicitud de Henry Beary hemos hecho el handler del formulario genérico lo que significa que ahora puedes agregar cualquier campo que desees al formulario.
recuerda incluir los campos dentro del formulario que tiene la class gform
y asegurate de que el name del elemento de formulario coincida con el nuevo encabezado de la columna en su hoja de cálculo.
Ej.:
<fieldset class="pure-group">
<label for="color">Favourite Color: </label>
<input id="color" name="color" placeholder="green" />
</fieldset>Esto te permitirá capturar el color favorito de la persona:
Ej.:
¡Ház saber si tienes alguna pregunta!
- Conceptos básicos de Google Apps Scripts: https://developers.google.com/apps-script/articles
- Logger (como console.log): https://developers.google.com/apps-script/reference/base/logger
- Simple Union de Correo utilizando Hojas de Cálculo de Google: https://developers.google.com/apps-script/articles/mail_merge
- Tutorial Original: Publicación de AJAX en la Hoja de Cálculo de Google: http://stackoverflow.com/questions/10000020/ajax-post-to-google-spreadsheet que apunta a: