Estuve buscado métodos para enviar emails sin PHP o lo menos posible por AJAX, y encontré un método en la página de Formspree. Es muy sencillo, pero navegando encontré esto por GitHub que funciona perfectamente hasta cierto punto.
A la hora de colocar el JavaScript que requiere esta "herramienta", encuentro que no envía los mails. ¿Por qué? Pues solo tengo este error en la consola del navegador:
POST https://script.google.com/macros/s/AKfycbyhl9S5fO406P61lezf_mmSh5Oq5s_SeZw1a6tMnHIlP3xkgw0/exec
handleFormSubmit @ form-submission-handler.js:68
/web/Adhara/#contacto:1 XMLHttpRequest cannot load https://script.google.com/macros/s/AKfycbyhl9S5fO406P61lezf_mmSh5Oq5s_SeZw1a6tMnHIlP3xkgw0/exec. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.
Ésta es una aplicación construida con un script de Google que básicamente envía emails a través de GMail que salen de un formulario de contacto común. Cuando se envía el correo con los datos pertinentes, te manda a otra página que contiene un archivo JSON, ellos te ofrecen una solución en formato .js que hace que el archivo JSON trabaje con AJAX y aparezca un mensaje de "Enviado con éxito" al enviarse, por lo que ahora podemos no solo mantenernos en la página sino que podemos estilizarla un poco más.
El problema es que en mi caso, al implementar este .js me salta el anterior error en la consola y nunca se envía el email. Arriba está la documentación para que puedan comprenderla, la app se desarrolla en el vínculo de arriba, y éste es el .js problemático.
Por último, aquí dejo mi html (no adjunto mis CSS ni JS, a menos de ser necesario):
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Adhara Arts - Inicio</title><link rel="shortcut icon" type="image/png" href="./img/adharaico.png"><link rel="stylesheet" href="./css/main.css"><link href="https://fonts.googleapis.com/css?family=Hind|Inconsolata|Pacifico|Roboto|Amatic+SC|Poiret+One" rel="stylesheet"><script type="text/javascript" src="./js/jquery.min.js"></script><!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--><script type="text/javascript" src="./js/typed.js"></script><script src="./js/particles.js"></script><script type="text/javascript" src="./js/main.js"></script><script src="./js/modernizr.custom.js"></script><script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script><script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script><script type="text/javascript" src="./js/AnimOnScroll.js"></script><script type="text/javascript" src="./js/app.js"></script></head><body><nav id="menu-principal"><ul><li class="menu-button-1" style="font-weight: 400;"><a href="#inicio">Inicio</a></li><li class="menu-button-2" style="font-weight: 400;"><a href="#nosotros">Nosotros</a></li><li class="menu-button-3" style="font-weight: 400;"><a href="#portfolio">Portfolio</a></li><li class="menu-button-4" style="font-weight: 600;"><a href="#contacto">Contacto</a></li></ul></nav><div class="logo-fixed"><a href="#"><img src="./img/adhara-menu-logo.png" alt=""></a></div><section class="section parallax" id="head"><div class="front"><a href="#"><img src="./img/adhara.png" alt="Adhara" oncontextmenu="return false" ondragstart="return false"></a></div></section><section class="section" id="inicio"><span class="typed"></span><div id="parrafo-uno"><p>Hola, estás en Adhara, mira todos los productos de nuestra tienda y sientete libre de contactarnos si quieres saber más de esta movida. <br> Observa nuestro portafolio y avisanos si te gusta nuestro trabajo, también puedes seguirnos en nuestas redes sociales para más contenido. <br> Y no olvides que compartir el arte es lo más importante aquí! Disfruta.</p></div><div class="social-network"><div class="social-contain"><div id="Instagram"></div></div><div class="social-contain"><div id="Facebook"></div></div><div class="social-contain"><div id="Google"></div></div></div><div id="particles-js"></div></section><section class="section" id="nosotros"><div id="bg-A"><div id="foto-nos"><div id="cover1"><h1>A</h1></div></div><div id="segundo-parrafo"><h1>¿Quienes somos?</h1><p>Somos un portafolio y tienda de arte y diseño independente. Nos gusta el arte ¡tanto como a cualquiera! y queremos compartir lo que hacemos. Si quieres contactarnos para encargos o ¡porque si! haz un poco de scroll ;). Mira a todo nuestro equipo >>AQUÍ<<. Y no te pierdas de nada ¡Mira todo lo que hay disponible! ¡y quedate con algo!. <strong>Es una orden.</strong> </p><p id="cratividad"><br>"La creatividad es permitirte a ti mismo cometer errores. El arte es saber cuáles mantener".<br></p><p>-Scott Adams.</p></div></div></section><section class="grid-section" id="portfolio"><div id="grid-title"><h1>Mira nuestro trabajo</h1></div><div class="grid-contain"><ul class="grid effect-2" id="grid"><li class="grid-sizer"></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-1.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-2.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-3.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-4.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-5.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-6.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-7.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-8.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-9.png" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-10.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-11.jpg" alt=""></a></li><li class="grid-item"><a class="img-wrap" href="#"><img src="./img/grid-i-12.jpg" alt=""></a></li></ul></div></section><section class="section" id="contacto"><div class="bg-con"><div class="h1-con"><h1>Envianos un saludo</h1></div><div class="contenedor-formulario"><form id="gform" action="https://script.google.com/macros/s/AKfycbyhl9S5fO406P61lezf_mmSh5Oq5s_SeZw1a6tMnHIlP3xkgw0/exec" class="formulario" name="Formulario-contacto" method="post"><div class="inputs"><input class="text" type="text" name="name" id="name" required="Requerido"><label class="label label-text" for="name">Nombre</label></div><div class="inputs"><input class="text" type="email" name="email" id="email" required="Requerido"><label class="label label-text" for="nombre">Correo</label><span id="email-invalid" style="visibility:hidden">Must be a valid email address</span></div><div class="inputs mensaje"><textarea id="message" name="message" required="Requerido"></textarea><label class="label label-text" for="message">Mensaje</label></div><div class="inputs"><input class="enviar" type="submit" id="btn-submit" value="Enviar"></div></form></div><div style="display:none;" id="thankyou_message"><h2><em>Gracias</em> por contactarnos! Estaremos de vuelta contigo pronto!</h2></div></div></section><div class="ante-footer"><div id="sn-container"><p><a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Google</a></p></div></div><footer><p>Copyright © Adhara Arts 2017 - Created by <a href="#">DC Arts.</a></p></footer><script data-cfasync="false" type="text/javascript" src="./js/form-submission-handler.js"></script></body></html>
