Crear formularios de contacto sin backend

Muchas veces nos planteamos crear una landing page o una web sencilla, y por comodidad, vaguería o desconocimiento decidimos recurrir a un CMS como Wordpress o Drupal. Realmente utilizar un CMS para ciertas tareas como éstas es lo mismo que matar mosquitos a cañonazos: sobrecargamos el servidor con recursos que no necesitamos, y eso repercute en el tiempo de carga de la web y en el coste del alojamiento.

En otros artículos ya te animé a utilizar generadores de contenido estático como Jekyll. Esta solución es bastante efficiente, productiva, y genera páginas webs muy rápidas. Es ideal, como he comentado, para landing pages o sencillos blogs.

El problema con el que te puedes encontrar es el de necesitar pequeñas funcionalidades que tradicionalmente han requerido un backend. La más importante tal vez sea la del formulario de contacto.

Formulario de contacto sin tener que programar un backend.

Una primera opción que tenemos es la de recurrir a servicios como http://formspree.io/, pero personalmente le encuentro varios inconvenientes:

  • La versión gratuita no permite quitar el logo del servicio.
  • El spam se hace bastante complicado de controlar.
  • El diseño no es demasiado personalizable y no es fácil adaptarlo al diseño de nuestra web.
  • Perdemos totalmente el control de dónde se almacenan los datos de los que nos envían mensajes.

La idea que os propongo es la de implementar un backend en GAS (Google Apps Script). Un sencillo script que guardaría todos los submits en nuestro formulario dentro de una Google Spreadsheet, y que además nos enviaría el mensaje por email.

*NOTA: en otro artículo, os explicaré como enviar este mensaje utilizando nuestra clave pública GPG, con el fin de aumentar la seguridad y preservar el anonimato de quienes nos contactan. *

Las ventajas de implementar un formulario de contacto así son:

  • Nos ahorramos tener que implementar y mantener el backend usando PHP, Python, node.js...

  • El formulario podemos personalizarlo a nuestro gusto e integrarlo perfectamente en nuestra web.

  • Los avisos por email llegan a través de Gmail, lo que proporciona bastante fiabilidad.

  • Podemos ir guardando los contactos en una Hoja de Cálculo en nuestro perfil de Google Drive.

El código para enviar el Email

El código para recibir el POST de nuestro formulario es muy sencillo:

var DESTINO = "tuemail@dominio.es"; Aquí pon tu email

function formatearMailBody(obj) { // function to spit out all the keys/values from the form in HTML
  var resultado = "";
  for (var key in obj) {
    resultado += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";
    // for every key, concatenate an `<h4 />`/`<div />` pairing of the key name and its value,
    // and append it to the `result` string created at the start.
  }
  return resultado;
}

function doPost(e) {

  try {
    Logger.log(e);
    var miEmail = e.parameters;
    MailApp.sendEmail({
      to: DESTINO,
      subject: "Formulario de contacto sergioperea.net",
      htmlBody: formatMailBody(miEmail)
    });

    return ContentService
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // si error, retornar
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}

El código para insertar el envío en una hoja de Google Spreadsheet, consiste en una función a la que símplemente podríamos llamar desde la función doPost anterior:

function guardar_registro(c) {
  Logger.log(JSON.stringify(c));
  try {
    var doc     = SpreadsheetApp.getActiveSpreadsheet();
    var sheet   = doc.getSheetByName('responses');
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1;
    var row     = [ new Date() ];
    for (var i = 1; i < headers.length; i++) {
      if(headers[i].length > 0) {
        row.push(e.parameter[headers[i]]); // add data to row
      }
    }
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
    Logger.log(e);
  }
  finally {
    return;
  }

}

¿Y esto como se monta?

Bien, pues todo este código, lo metemos a través de una nueva hoja de cálculo de Google. Una vez creada seleccionamos la opción Herramientas->Editor de secuencia de comandos.

Al crear la secuencia de comandos, escribimos el código de arriba, y generamos una versión. Después la publicamos con la opción "Publicar->Implementar como aplicación web". La ventana desde la que se publica debe quedar así:

La URL de la aplicación web es la que tenemos que poner en el "action" del formulario

<form class=".form-style-5" id="gform" method="POST" action="https://script.google.com/macros/s/AKfycbzky7...">

¿Qué se puede mejorar en este formulario?

Todavía tendríamos que mejorar algunas cosas:

  • Que el correo se cifre mediante nuestra clave pública GPG para garantizar la confidencialidad de quien nos contacte a través del formulario.
  • Que al realizar el submit del formulario, éste responda con un mensaje de agradecimiento. Ésto es fácil de conseguir mediante javascript, yq ueda fuera del propósito de este artículo.