Hola chicos,
Primero les pido las disculpas correspondientes porque me puedo imaginar que ya han respondido este tema muchas veces.
Les cuento el problema que tengo. Estoy creando un sitio web modificando una planilla. Llegue a la parte del formulario de contacto, donde se envia un email a un correo cualquiera. Lo hice con php, donde el formulario se envia sin problemas al correo electrónico y me aparece bien el mensaje y me redirecciona a la pagina principal sin problemas.
Lo que me gustaría agregarle ahora es que aparezca una cuenta regresiva mientras se muestra el aviso de "Mensaje enviado" y terminando la cuenta regresiva me redireccionara a la página principal. He leído mucho y he visto varios ejemplos donde lo logran usando javascript pero soy bastante novato en esto de la programación web y aún no he conseguido implementarlo.
aquí les muestro el código del formulario de contacto y el php que envía el correo.
Si alguién me pudiera ayudar sería estupendo. Saludos...
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>¡MiNuevaWeb!</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Glegoo_400.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body id="page6">
<!--==============================header=================================-->
<header>
<div class="main">
<div class="wrapper">
<h1><a href="index.html">MiNuevaWeb</a></h1>
<nav class="fright">
<ul class="menu">
<li><a href="index.html">Inicio</a></li>
<li><a class="active" href="contacts.html">Contacto</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!--==============================content================================-->
<section id="content"><div class="ic">MiNuevaWeb</div>
<div class="main">
<div class="container_12">
<div class="wrapper">
<article class="grid_8">
<h2>Formulario</h2>
<form id="contact-form" method="post" enctype="multipart/form-data" action="http://localhost/MiNuevaWeb/sendmail.php">
<fieldset>
<label><input name="name" value="Nombre:" onBlur="if(this.value=='') this.value='Nombre:'" onFocus="if(this.value =='Nombre:' ) this.value=''" /></label>
<label><input name="email" value="E-mail:" onBlur="if(this.value=='') this.value='E-mail:'" onFocus="if(this.value =='E-mail:' ) this.value=''" /></label>
<label><input name="phone" value="Teléfono:" onBlur="if(this.value=='') this.value='Teléfono:'" onFocus="if(this.value =='Teléfono:' ) this.value=''" /></label>
<textarea name="message" onBlur="if(this.value=='') this.value='Mensaje:'" onFocus="if(this.value =='Mensaje:' ) this.value=''">Mensaje:</textarea>
<br><br>
<input type="reset" value="Limpiar" style='width:100px; height:35px'>
<input type="submit" value="Enviar" style='width:100px; height:35px'>
</fieldset>
</form>
</article>
<article class="grid_4">
<div class="indent-top">
<h3 class="img-indent-bot">Contacto</h3>
<div class="indent-left">
<p class="prev-indent-bot">Sus consultas serán respondidas en el horario:</p>
<span class="color-1">Lunes - Viernes: 20:00 hrs - 22:00 hrs</span>
<p class="prev-indent-bot"><span class="color-1">Sábados y Domingos: Todo el día</span></p>
<dl>
<dd><span>Teléfono:</span> +56992345907</dd>
<dd><span>E-mail:</span> <a href="#">[email protected]</a></dd>
</dl>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_8">
<div class="aligncenter">
Email: [email protected]<br>
Teléfono: +569754366907
</div>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html> Archivo sendmail.php
Código PHP:
<?php
// Aquí se deberían validar los datos ingresados por el usuario
if($_POST['name'] == 'Nombre:' || $_POST['email'] == 'E-mail:' || utf8_decode($_POST['phone']) == 'Teléfono:' || $_POST['message'] == 'Mensaje:')
{
echo "<b>Ocurrió un eror y no se envió el mensaje.</b><br><br>Por favor, vuelva atrás y verifique la información ingresada<br>";
}
else
{
// Debes editar las próximas dos líneas de código de acuerdo con tus preferencias
$email_to = "[email protected]";
$email_subject = "Contacto desde el sitio web";
$email_message = "Detalles del formulario de contacto:\n\n";
$email_message .= "Nombre: " . utf8_encode(utf8_decode($_POST['name'])) . "\n";
$email_message .= "E-mail: " . utf8_encode(utf8_decode($_POST['email'])) . "\n";
$email_message .= utf8_encode("Teléfono: ") . utf8_encode(utf8_decode($_POST['phone'])) . "\n";
$email_message .= "Mensaje: " . utf8_encode(utf8_decode($_POST['message'])) . "\n\n";
// Ahora se envía el e-mail usando la función mail() de PHP
$headers = 'From: [email protected]'."\r\n".
'Reply-To: [email protected]'."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
header( "refresh:10; url=http://www.algo.cl" );
echo "<b>¡Sus datos fueron enviados!</b> Nos contactaremos con usted lo antes posible. <br><br> Regresando...";
}
?>