"formulario contacto html, php y ajax con mesaje de afirmacion"
Bootstrap 3.3.0 Snippet by yoandres

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../image/favicon.ico"> <title>titulo</title> <!-- Bootstrap core CSS --> <link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Custom styles for this template --> <link href="../css/carousel.css" rel="stylesheet"> <script src="../js/jquery.min.js"></script> <script> $(document).ready(function(){ $("#Formulario").submit(function( event ){ event.preventDefault(); $.ajax({ type: 'POST', url: '../php/contacto2.php', data: $(this).serialize(), success: function(data){ $("#respuesta").slideDown(); $("#respuesta").html(data); $('#respuesta2').modal('show'); document.getElementById('Formulario').reset(); } }); return false; }); }); </script> </head> <body> <!-- Content --> <section> <div class="container"> <div class="container"> <h4>empresa</h4> <div class="container"> <iframe src="https://www.google.com/maps/embed?pb=!1m21!1m12!1m3!1d7889.40621095499!2d-70.23299216136742!3d8.624475075086659!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m6!3e6!4m0!4m3!3m2!1d8.626995899999999!2d-70.2301559!5e0!3m2!1ses-419!2sve!4v1456756695234" style="border:0" allowfullscreen="" frameborder="0" height="250" width="100%"></iframe> </div> <strong>Contactenos</strong><br><strong>Oficina:</strong> 123456789 <hr> </div> <div class="container"> <form role="form" id="Formulario" action="../php/contacto2.php" method="POST"> <div class="form-group"> <label class="control-label" for="Nombre">Nombres</label> <input type="text" class="form-control" id="Nombre" name="Nombre" placeholder="Introduzca su nombre" required autofocus /> </div> <div class="form-group"> <label class="control-label" for="Motivo">Motivo de Contacto</label> <select name="Motivo" class="form-control"> <option value="Consulta General">Consulta General</option> <option value="Realizar Pedido">Realizar Pedido</option> <option value="Informe un problema">Informe un problema</option> </select> </div> <div class="form-group"> <label class="control-label" for="Empresa">Empresa</label> <input type="text" class="form-control" id="Empresa" name="Empresa" placeholder="Introduzca el nombre de su empresa" required /> </div> <div class="form-group"> <label class="control-label" for="Correo">Dirección de Correo Electrónico</label> <input type="email" class="form-control" id="Correo" name="Correo" placeholder="Introduzca su correo electrónico" required /> </div> <div class="form-group"> <label class="control-label" for="Mensaje">Mensaje</label> <textarea rows="5" cols="30" class="form-control" id="Mensaje" name="Mensaje" placeholder="Introduzca su mensaje" required ></textarea> </div> <div class="form-group"> <input type="submit" class="btn btn-primary" value="Enviar"> <input type="reset" class="btn btn-default" value="Limpiar"> </div> <div id="respuesta" style="display: none;"></div> </form> </div> </div> </section> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script> <script src="../js/bootstrap.min.js"></script> <!-- Just to make our placeholder images work. Don't actually copy the next line! --> <script src="../js/holder.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../js/ie10-viewport-bug-workaround.js"></script> </body> </html> <!--esta parte de codigo que viene es la que va en un documento php con nombre contacto2.php*/ <?php //Importamos las variables del formulario de contacto @$Nombre = htmlspecialchars($_POST['Nombre']); @$Motivo = htmlspecialchars($_POST['Motivo']); @$Empresa = htmlspecialchars($_POST['Empresa']); @$Correo = htmlspecialchars($_POST['Correo']); @$Mensaje = htmlspecialchars($_POST['Mensaje']); //Preparamos el mensaje de contacto $cabeceras = "From: $Correo\n" //La persona que envia el correo . "Reply-To: $Correo\n"; $asunto = "From: CONTACTO DISYTEL IMPORT $Motivo\n"; //asunto aparecera en la bandeja del servidor de correo $email_to = "tuemail@tuemail.com"; //cambiar por tu email $contenido = "$Nombre ha enviado un mensaje desde el sitio web www.disimpor.com.ve\n" . "\n" . "Nombre: $Nombre\n" . "Motivo: $Motivo\n" . "Empresa: $Empresa\n" . "Correo: $Correo\n" . "Mensaje: $Mensaje\n" . "\n"; //Enviamos el mensaje y comprobamos el resultado if (@mail($email_to, $asunto ,$contenido ,$cabeceras )) { //Si el mensaje se envía muestra una confirmación echo '<div class="modal fade" id="respuesta2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="modal">×</button> <strong>Su mensaje ha sido enviado correctamente.</strong> </div> </div> </div>'; }else{ //Si el mensaje no se envía muestra el mensaje de error echo '<div class="modal fade" id="respuesta2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="modal">×</button> <strong>ERROR. Intente mas tarde.</strong> </div> </div> </div>'; } ?> -->

Related: See More

Argon Design System
AJAX / DIV Wizard

Questions / Comments:

forget it haha thanks! I just found it!

René Bautista () - 7 years ago - Reply 0

Hi! thanks for the snippet! but... where can I find the contacto2.php so it can work? thanks!

René Bautista () - 7 years ago - Reply 0