miércoles, 12 de julio de 2017

 

Como enviar un formulario de contacto en php7, ajax html5 css3, bootstrap

       No hay comentarios    
Cuando estamos trabajando en nuestro  sitio web, muchas veces existe la necesidad de proveer al usuario con un formulario de contacto para hacernos llegar sus consultas, comentarios u otro tipo de información. 

En esta entrada te ayudamos a  cómo hacer un formulario usando html5  para crearlo y PHP para procesarlo y enviarlo por e-mail.
1. creamos un formulario en html en tu editor favorito en mi caso voy utilizar editor Atom

CODIGO

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                <title>
                    Document
                </title>
            </link>
        </meta>
    </head>
    <body>
        <div class="col-xs-12 col-sm-6 col-md-8 ">
            <h3 class=" ">
                FORMULARIO DE CONTACTO.
            </h3>
            <form action="" id="formulario" method="POST" role="form">
                <div class="form-group">
                    <label for="nombre">
                        Nombre de usuario
                    </label>
                    <input class="form-control" id="nombre" name="nombre" placeholder="Tu nombre" required="" type="text">
                    </input>
                </div>
                <div class="form-group">
                    <label for="asunto">
                        Asunto
                    </label>
                    <input class="form-control" id="asunto" name="asunto" placeholder=" Escribe Asunto a enviar" required="" type="text">
                    </input>
                </div>
                <div class="form-group">
                    <label for="email">
                        E-mail
                    </label>
                    <input class="form-control" id="email" name="email" placeholder="Escribe tu email " required="" type="email">
                    </input>
                </div>
                <div class="form-group">
                    <label for="mensaje">
                        Mensaje
                    </label>
                    <textarea class="form-control" id="mensaje" name="mensaje" placeholder=" Escribe tu mensaje aqui " required="" rows="6">
                    </textarea>
                </div>
                <input class="btn btn-primary" id="submit_button" name="enviar" type="submit" value="Enviar"/>
                <button class="btn btn-primary" id="borrar" type="reset">
                    Borrar
                </button>
                <div id="resultado">
                </div>
            </form>
        </div>
        <!-- llamamos al script js -->
        <script src="js/conecta.js">
        </script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
        </script>
        <script>
            src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        </script>
    </body>
</html>
__________________________________________________
 El resultado de formulario seria como la imagen.El formulario es totalmente responsive porque esta diseñado con bootstrap
_________________________________________________________________

Codigo AJAX
$(document).ready(function() {
    $("#formulario").submit(function() {
        var url = "php/enviodemail.php";
        $.ajax({
            type: "POST",
            url: url,
            data: $("#formulario").serialize(),
            success: function(data) {
                $("#resultado").html(data);
            }
        });
        return false;
    });
});
guardanos el archivo como conecta.js

_________________________________________________________________
Codigo PHP
<?php
$nombre    = isset($_POST['nombre']) ? $_POST['nombre'] : '';
$asunto    = isset($_POST['asunto']) ? $_POST['asunto'] : '';
$email     = isset($_POST['email']) ? $_POST['email'] : '';
$mensaje   = isset($_POST['mensaje']) ? $_POST['mensaje'] : '';
$contenido = '
                        <html>
                        <head>
                            <title></title>
                        </head>
                        <body>
                             <h2>Haz recibido un mensaje através de la página cpiprodesign</h2>
                             <p>' . $nombre . ' te ha enviado el siguiente mensaje:</p>
                             <p>' . $mensaje . ' <br><br> Puedes ponerte en contacto con la persona al email: ' . $email . '</p>
                             <hr>
                        </body>
                        </html>';

// Configuración de los encabezados
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= "Content-type: text/html; charset=UTF-8\r\n";

// Enviar correo
$envio = mail('tu_correo@gmail.com', $asunto, $contenido, $headers);

if ($envio) {
    $miresultado = '<h4>El correo ha sido enviado! Gracias por ponerse en contacto con nosotros.</h4>';
} else {

    $miresultado = '<h4>No se envío el correo.</h4>';

}

echo $miresultado;
____________________________________________
guardamos el  archivo como enviodemail.php
Eso seria todo espero ayudarles ..comparte el articulo para llegar a mas , gracias
 



Share:

0 comentarios:

Publicar un comentario

Dudas y sugerencias aqui