I was looking for methods to send emails without PHP or as little as possible by AJAX, and I found a method on the Formspree page. It's very simple, but browsing I found this on GitHub that works perfectly to a certain extent.
At the time of placing the JavaScript that this "tool" requires, I find that it does not send the mails. Why? Well, I only have this error in the browser console:
POST link
handleFormSubmit @ form-submission-handler.js: 68
/ web / Adhara / # contact: 1 XMLHttpRequest can not load link . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' link ' is therefore not allowed access. The response had HTTP status code 401.
This is an application built with a Google script that basically sends emails through GMail that come out of a common contact form. When the email is sent with the pertinent data, it sends you to another page that contains a JSON file, they offer you a solution in .js format that makes the JSON file work with AJAX and appear a "Sent to success" message sent, so now we can not only stay on the page but we can stylize it a bit more.
The problem is that in my case, when I implement this .js I skipped the previous error in the console and the email is never sent. Above is the documentation so you can understand it, the app is developed in the link above, and this is the problematic .js .
Finally, here I leave my html (I do not attach my CSS or JS, unless necessary):
<!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>