
En este hermoso apartado podrán ver cómo agregar un formulario de contacto y que este envíe un correo a través de Php.
Recuerda que esta sección pertenece al curso de Boostrap 4! (ver cursos aquí: https://www.youtube.com/bluuweb), así que te recomiendo ver los dos videos anteriores donde desarrollamos formularios de contacto, en este capitulo le incoporamos las funcionalidades de Php para que quede funcional y puedas recibir los datos a tu correo electrónico.
Descarga el Proyecto aquí: https://goo.gl/pIiVeo
Además te dejo los códigos Php y Html por separado.
<!DOCTYPE html> <html lang="es"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <!-- menú de navegación --> <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm sticky-top"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="index.html"> <img src="images/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="Logo Bootstrap"> Bootstrap </a> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <div class="navbar-nav mr-auto ml-auto text-center"> <a class="nav-item nav-link " href="#">Inicio</a> <a class="nav-item nav-link active" href="#">Nosotros</a> <a class="nav-item nav-link" href="#">Servicios</a> <a class="nav-item nav-link" href="#">Contacto</a> </div> <div class="d-flex flex-row justify-content-center"> <a href="#" class="btn btn-outline-primary mr-2">F</a> <a href="#" class="btn btn-outline-danger">Y</a> </div> </div> </nav> <!-- fin menú de navegación --> <!-- Formulario 1 --> <section class="container mt-5 pt-5"> <h3 class="text-uppercase text-center">Formulario de contacto</h3> <p class="lead text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus hic sint non rem quibusdam. Dicta facilis dignissimos deserunt, mollitia dolores.</p> <div class="container"> <div><? echo $error.$mensajeExito; ?></div> <form method="post"> <div class="form-group row"> <label for="nombre" class="col-sm-2 form-control-label">Nombre</label> <div class="col-sm-10"> <input class="form-control" id="nombre" placeholder="Escribe tu nombre" type="text" name="nombre"> </div> </div> <div class="form-group row"> <label for="email" class="col-sm-2 form-control-label">Email</label> <div class="col-sm-10"> <input class="form-control" id="email" placeholder="Escribe tu e-mail" type="email" name="email"> </div> </div> <div class="form-group row"> <label for="asunto" class="col-sm-2 form-control-label">Asunto</label> <div class="col-sm-10"> <input class="form-control" id="asunto" placeholder="Asunto del correo" type="text" name="asunto"> </div> </div> <div class="form-group row"> <label for="mensaje" class="col-sm-2 form-control-label">Mensaje</label> <div class="col-sm-10"> <textarea class="form-control" id="mensaje" rows="3" placeholder="¿Qué quieres preguntar?" name="mensaje"></textarea> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-warning offset-2">Enviar</button> </div> </form> </div> </section> <!-- fin Formulario 1 --> <div class="container-fluid bg-inverse text-white pt-4 pb-2 mt-5"> <div class="text-center"> <p class="lead">No olvides suscribirte a mi canal de Youtube 🙂 <a class="text-white" href="https://www.youtube.com/bluuweb"><button class="btn btn-danger">Bluuweb!</button></a></p> </div> </div> <!-- jQuery first, then Tether, then Bootstrap JS. --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Php
<?php header("Content-type: text/html;charset=\"utf-8\""); $error = ""; $mensajeExito = ""; if ($_POST) { if ($_POST['email'] && filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) { $error .= "E-mail no válido.<br>"; } if ($error != "") { $error = '<div class="alert alert-danger" role="alert"><p><b>Se generó un error:</b></p>' . $error . '</div>'; } else { $nombre = $_POST['nombre']; $mail = $_POST['email']; $asunto = $_POST['asunto']; $mensajeC = $_POST['mensaje']; $header = 'From: ' . $mail . " \r\n"; $header .= "X-Mailer: PHP/" . phpversion() . " \r\n"; $header .= "Mime-Version: 1.0 \r\n"; $header .= "Content-Type: text/plain"; $mensaje = "Este mensaje fue enviado por " . $nombre . ",\r\n"; $mensaje .= "Su e-mail es: " . $mail . " \r\n"; $mensaje .= "Asunto: " . $asunto . " \r\n"; $mensaje .= "Mensaje: " . $mensajeC . " \r\n"; $mensaje .= "Enviado el " . date('d/m/Y', time()); $para = 'tu-nombre@tu-dominio.com'; $asunto = 'Mensaje de mi sitio web'; if (mail($para, $asunto, utf8_decode($mensaje), $header)) { $mensajeExito = '<div class="alert alert-success" role="alert">Mensaje enviado con éxito :)</div>'; } else { $error = '<div class="alert alert-danger" role="alert"><p><strong>Mensaje sin enviar :(</div>'; } } } ?>
No olvides suscribirte a mi canal de Youtube y compartir esta información 🙂
Saludos y nos vemos en el siguiente video tutorial.
Encantado con tus explicaciones. Una pregunta
¿siempre hay que poner el php y el html en el mismo documento?
¿Cada web que construya con un formulario tiene que ser obligatoriamente index.php
gracias?