Projeto para treinar o desenvolvimento de um website utilizando HTML e CSS, utilizando os principais conceitos de requisições HTTP https://otthonleao.github.io/site-chatschool/
Nesse projeto utilizamos o Material Icons que é mantido pelo Google. E para conectar com o projeto, utilizamos a seguinte linha no index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Há outros sites para explorar os diversos icones, como: Font Awesome Icon, Glyphicons, Ionicons
Para formatos simples ou até mesmo testes é possível usar o Google Apps Mail ou a API do FormSubmit.
Caso não configure uma resposta de envio, após enviar o e-mail pode carregar uma página com o json que para o usuário não é legal.
- Nesse caso usamos o jQuery CDN para fazer o script e assim poder. É preciso copiar o endereço do link do
minifief
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>- Mudar o valor do botão para "AGUARDE" e travar após ouvir o clique (event)
$('form').submit(function (event) {
event.preventDefault();
$('form input[type="submit"]').val('Aguarde').attr('disable', true);
$.ajax({
type: $('form').attr('method'),
url: $('form').attr('action'),
data: $('form').serialize()
)}
}- Pegar o nome do usário para colocar no campo assunto
let name = document.querySelector("#nome");
$('form').submit(function (event) {
$('form input[name="_subject"]').val('Contato - Chatboot: ' + name.value);
}- Notificar o sucesso do envio por meio de um alerta
$('form').submit(function (event) {
$.ajax({
success: function () {
alert('E-mail enviado com sucesso!\nEm breve entraremos em contato');
})
}- Limpar os campos do formulário e ativar o botão novamente renomeado para "enviar"
$('form').submit(function (event) {
$.ajax({
success: function () {
$('form').trigger('reset');
$('form input[type="submit"]').val('enviar').attr('disable', false);
})
}