Skip to content

Instantly share code, notes, and snippets.

@DiegoPinho

DiegoPinho/index.html

Last active December 21, 2019 20:19
Show Gist options
  • Save DiegoPinho/067d02e15a9f1f9bc8e5dcfe763d3afe to your computer and use it in GitHub Desktop.
Save DiegoPinho/067d02e15a9f1f9bc8e5dcfe763d3afe to your computer and use it in GitHub Desktop.
Download ZIP
Artigo-FormulariosMagicosComNetlify
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Formulários - Netlify</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
body {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<form method="POST">
<div class="form-group">
<label for="exampleInputEmail1">Endereço de email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Seu email">
<small id="emailHelp" class="form-text text-muted">Nunca vamos compartilhar seu email, com ninguém.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Senha</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Senha">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Clique em mim</label>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Raw
index2.html
<!DOCTYPE html>
<html>
<head>
<title>Formulários - Netlify</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
body {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<form name="formulario-login" method="POST" action="#" data-netlify="true">
<div class="form-group">
<label for="exampleInputEmail1">Endereço de email</label>
<input name= "email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Seu email">
<small id="emailHelp" class="form-text text-muted">Nunca vamos compartilhar seu email, com ninguém.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Senha</label>
<input name= "senha" type="password" class="form-control" id="exampleInputPassword1" placeholder="Senha">
</div>
<div class="form-group form-check">
<input name= "termos" type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Clique em mim</label>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Raw
index3.html
<!DOCTYPE html>
<html>
<head>
<title>Formulários - Netlify</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.5.3/dist/sweetalert2.min.css" />
<style>
body {
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<form id="formulario" name="formulario-login" method="POST" action="/" data-netlify="true">
<div class="form-group">
<label for="exampleInputEmail1">Endereço de email</label>
<input name="email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Seu email">
<small id="emailHelp" class="form-text text-muted">Nunca vamos compartilhar seu email, com ninguém.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Senha</label>
<input name="senha" type="password" class="form-control" id="exampleInputPassword1" placeholder="Senha">
</div>
<div class="form-group form-check">
<input name="termos" type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Clique em mim</label>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.5.3/dist/sweetalert2.all.min.js"></script>
<script>
$(document).ready(function ($) {
const $formulario = $("#formulario");
$formulario.submit(e => {
e.preventDefault();
const $action = $formulario.attr('action');
const $data = $formulario.serialize();
$.post($action, $data).then(() => {
Swal.fire({
icon: 'success',
title: 'Mensagem Enviada!',
text: 'Muito obrigado!',
footer: '<a href="/">Voltar para home</a>'
});
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment