Send email via JS
by WILLIAM CORREA
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<form method="post" onsubmit="return false;">
<div class="columns">
<div class="column">
<label class="label">Nome</label>
<p class="control">
<input name="nome" class="input" type="text" placeholder="Text input" required>
</p>
</div>
</div>
<div class="columns">
<div class="column">
<label class="label">E-mail</label>
<p class="control">
<input name="email" class="input" type="text" placeholder="Text input" required>
</p>
</div>
<div class="column">
<label class="label">Telefone</label>
<p class="control">
<input name="telefone" class="input" type="text" placeholder="Text input">
</p>
</div>
</div>
<div class="columns">
<div class="column">
<label class="label">Assunto</label>
<p class="control">
<span class="select is-fullwidth">
<select name="assunto" required>
<option value="Dúvida">Dúvida</option>
<option value="Sugestão">Sugestão</option>
<option value="Crítica">Crítica</option>
</select>
</span>
</p>
</div>
</div>
<div class="columns">
<div class="column">
<label class="label">Mensagem</label>
<p class="control">
<textarea name="mensagem" class="textarea" placeholder="Textarea" required></textarea>
</p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="control">
<input type="submit" class="button is-primary" value="Enviar"/>
<input type="reset" class="button is-link" value="Cancelar">
</p>
</div>
</div>
</form>
CSS
.columns {
padding: 5px 20px;
}
.column {
padding: 0 2px;
}
.column p {
margin: 0;
}
JavaScript
(function() {
$('.button.is-primary').click(function() {
$("form").submit(function(e){
e.preventDefault();
$.ajax({
url: "http://safeto.work",
jsonp: "callback",
dataType: "jsonp",
data: {
q: "",
format: "json"
},
success: function( response ) {
console.log( response );
}
});
});
});
})();