Skip to content

Instantly share code, notes, and snippets.

@jrosell
Created April 10, 2020 15:24
Show Gist options
  • Save jrosell/5c8873e8d6f4098ddcc05a5488da05c3 to your computer and use it in GitHub Desktop.
Save jrosell/5c8873e8d6f4098ddcc05a5488da05c3 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formulario de contacto</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>
</head>
<body>
<form id="contact-form">
<h2>Formulario de contacto</h2>
<p>
<label>Nombre<br><input type="text" name="nombre"></label><br>
<label>Email<br><input type="email" name="email"></label><br>
<label>Comentarios<br></label><textarea name="comentarios" cols=40 rows=5></textarea></label>
</p>
<input id="submit-contact-form" type="submit" value="Submit">
</form>
<script>
(function() {
var $form = $('form#contact-form'), url = 'https://script.google.com/macros/s/key/exec';
$('#submit-contact-form').on('click', function(e) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function(data) {
console.log(data);
$('form#contact-form').hide();
$('body').append("<p style='color:green'>Gracias por tu interés. Contactaremos contigo en breve.</p>");
}
});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment