I have a form that I programmed using PHPMailer and I would like it when the user filled out the fields and clicked send, instead of redirecting to another thank you page, I wanted to see a kind of " dialog in> "or rather a modal window with a thank you text inside. And also before the modal appeared that wanted to be displayed a gif on the screen for a few seconds indicating that the form is being sent.
I took a look at this post here , and my code looks like this:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scripttype="text/javascript">
jQuery(document).ready(function () {
jQuery('#ajax_form').submit(function () {
var dados = jQuery(this).serialize();
jQuery.ajax({
type: "POST",
url: "contato.php",
data: dados,
success: function (data)
{
alert(data);
}
});
return false;
});
});
</script>
</head>
<div id="formulario">
<form action="email.php" method="POST" id="ajax_form">
<ul>
<li><input type="text" name="Nome" id="nome" placeholder=" Digite seu nome" required name=nome maxlength="50"></li>
<li><input type="email" name="Email" id="email" placeholder=" Digite seu Email" required name=email maxlength="100"></li>
<li><input type="text" name="Nickname" placeholder=" Digite seu Nickname" required name=nickname maxlength="20"></li>
<li>
<select name="Games">
<option value ="the-elder" selected> --- Selecione um jogo ---</option>
<option value ="the-elder">The Elder Scrols Online</option>
<option value ="archage">ArcheAge</option>
<option value ="worlofwarcraft">World of War Craft </option>
<option value ="forsaken">Forsaken World</option>
<option value ="leagueoflegends">League of Legends</option>
<option value ="dota">Dota 2</option>
<option value ="smite">Smite</option>
<option value ="warface">Warface</option>
<option value ="cs">CS-GO</option>
<option value ="bf">Battle Field</option>
<option value ="cod">Call of Dutty</option>
</select>
</li>
<li><textarea placeholder=" Mensagem" name="Mensagem" required name=mensagem maxlength="300"></textarea></li>
<li><input type=submit value="Enviar" id="enviar" name="Enviar"/></li>
</ul>
</form>
</div>
When I click submit, this appears on my screen:
