April 10, 2024

Formulario de contacto con App Engine

Guía básica para generar un formulario de contacto con App Engine en un entorno estándar

Esta guía supone que ya conoces un poco sobre Google App Engine (GAE), que tu aplicación de GAE está en un ambiente estandar y su runtime es Python 2.7.

Nuestro formulario contará con tres campos: Nombre, Correo electrónico y Mensaje.
<form id="contact-form">
    <input type="text" id="nameContact" name="nameContact" placeholder="Nombre completo" required="required">
    <input type="email" id="emailContact" name="emailContact" placeholder="Correo electrónico" required="required">
    <textarea id="messageContact" name="messageContact" placeholder="Escribre tu mensaje" rows="4" required="required" ></textarea>
    <button type="submit">Enviar Mensaje</button>
</form>
Una vez insertado nuestro HTML en nuestra página tenemos que trabajar con el código de JavaScriptque hará la petición POST a nuestra aplicación de GAE. Nuestro código en JavaScript quedará de la siguiente manera:
$(document).ready(function() {
    $("#contact-form").on("submit", function(event) {
        event.preventDefault();
        submitForm();
    }
});

function submitForm() {
    const name = $("#nameContact").val(),
    email = $("#emailContact").val(),
    content = $("#messageContact").val(),
    url = "/contact"; // URL donde se recibirá la petición POST
    $.ajax({
        type: "POST",
        url: url,
        data: "name=" + name + "&email=" + email + "&content=" + content,
        success: function(data, textStatus, jqXHR) {
          formSuccess(); // Tu función de éxito
        },
        error: function(jqXHR, textStatus, errorThrown) {
          formError(textStatus); // Tu función de manejo de errores
        }
    }
});
Ahora que tenemos tanto el HTML como el código en JavaScript que hace funcionar nuestro fomulario necesitamos preparar nuestra aplicación de GAE para poder aceptar una petición POST en la url que anteriormente configuramos /contact. Para ello modificaremos nuestro archivo main.py de la siguiente manera.
import webapp2
import jinja2  #Este ejemplo usa jinja para el templating
import os
from google.appengine.ext.webapp import template
from google.appengine.api import mail

JINJA_ENVIRONMENT = jinja2.Environment(
    loader=jinja2.FileSystemLoader(os.path.dirname(__file__) + "/templates"))

class ContactHandler(webapp2.RequestHandler):
    def get(self): # Esta función maneja las peticiones GET a tu URL /contact
        template_values = { 'title': 'Daniel Tello - Contact' }
        template = JINJA_ENVIRONMENT.get_template('contact.html')
        self.response.out.write(template.render(template_values))

    def post(self): # Esta función maneja las peticiones GET a tu URL /contact
        name = self.request.get("name")
        to_addr = self.request.get("email")
        content = self.request.get("content")

        if not mail.is_email_valid(to_addr):
            self.response.set_status(400) # Aquí tienes que manejar el error en caso de que el correo sea inválido
            return

        # Envía un correo la persona que te contacta
        # tu-app-id es una variable correspondiente al ID general de tu aplicación de GAE
        message = mail.EmailMessage(sender="Daniel Tello <webcontact@tu-app-id.appspotmail.com>",
                                    subject="Thanks for contacting")
        message.to = to_addr
        message.body = """
        Hi There:
        Thanks for contacting. I will reply back as soon as I got this mail.
        Daniel Tello
        """

        message.send()

        # Envia cun correo al admin (a ti)
        # tu-app-id es una variable correspondiente al ID general de tu aplicación de GAE
        message = mail.EmailMessage(sender="Daniel Tello <webcontact@tu-app-id.appspotmail.com>",
                                    subject="Someone contacted you!")
        message.to = 'webcontact@tello.io'
        message.body = """
        Hi Human:
        We got a message from %s - %s
        Content: %s
        """ % (name, to_addr, content)

        message.send()

app = webapp2.WSGIApplication([('/contact', ContactHandler)], debug=False)
            
Es muy importante que modifiques tu-app-id con el ID de tu aplicación. El correo tiene que provenir de tu-app-id.appspotmail.com si no el correo nunca llegará, Google pide que sea de esta manera para evitar el envío SPAM. Puedes personalizar el remitente configurando una cuenta de GMail o GSuite. Puede encontrar más información en su documentación aquí.

Ten en cuenta que este formulario es propenso a Bots que llenen el formulario automáticamente y envíen muchos correos desde tu formulario. El siguiente paso es incluir un reCaptcha que te permita filtrar a esos molestos Bots. Teniendo como base lo anterior es muy fácil implementarlo siguiendo su documentación.