HTML5, CSS y PHP– Curso básico – Formulario de contacto y recepción de mensajes (IV)

HTML5, CSS y PHP– Curso básico – Formulario de contacto y recepción de mensajes (IV)

39 Flares Twitter 29 Facebook 3 Google+ 7 Pin It Share 0 Email -- 39 Flares ×

En esta guía vamos a detallar los pasos para hacer funcional el formulario creado en la guía anterior. De esta manera recibiremos los mensajes del formulario a un correo determinado por el administrador de la página web. Lo vamos a realizar con el lenguaje PHP y por supuesto también usaremos HTML5 y CSS3 vistos en  la anterior guía.

Vamos a tener que crear tres archivos: “formulario.html”, “style.css” y “contacto.php”.

HTML5 (copiar todo lo que está entre corchetes):

[<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>HTML5 Contact Form</title>
    <link rel="stylesheet" media="screen" href="styles.css" >
    <!–[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
        <![endif]–>
</head>
<body>
<form class="contact_form" action="contacto.php" method="post">
    <ul>
        <li>
             <h2>Formulario de Contacto</h2>
        </li>
        <li>
            <label for="name">Nombre:</label>
            <input name="nombre" type="text" required id="nombre"  placeholder="Neoteo" />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" placeholder="neoteo@neoteo.com" required />
        </li>
        <li>
            <label for="website">Sitio Web:</label>
            <input type="url" name="web" placeholder="http://www.neoteo.com" required />
        </li>
        <li>
            <label for="mensaje">Mensaje:</label>
            <textarea name="mensaje" cols="40" rows="6" required id="mensaje" ></textarea>
        </li>
        <li>
            <button class="submit" type="submit">Enviar</button>
        </li>
    </ul>
</form>
</body>
</html>]

Código CSS (copiar todo lo que está entre corchetes):

[.contact_form h2 {
    background: none repeat scroll 0 0 #c1bfbf;
    border-radius: 5px;
    color: #164a20;
    display: block;
    font-family: calibri;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 1px #CCCCCC;
    width: 433px;
}
/*— estilos para los ul y li del formulario —*/
.contact_form ul {
    width:500px;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px;
    border-bottom:1px solid #eee;
    position:relative;
}
.contact_form label {
    color: #555555;
    display: inline-block;
    float: left;
    font-family: calibri;
    font-size: 13px;
    font-weight: bold;
    margin-top: 3px;
    padding: 3px;
    width: 90px;
}
.contact_form input {
    height:20px;
    width:220px;
    padding:5px 8px;
}
.contact_form textarea {
    padding:8px;
    width:300px;
}
.contact_form button {
    margin-left:90px;
}

/*—– estilos visuales de los elementos ——–*/

.contact_form input, .contact_form textarea {
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    color: #888;
    font-size: 12px;
    padding-right:30px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff;
    border:1px solid #555;
    box-shadow: 0 0 3px #aaa;
    padding-right:80px;
}

/* === Estilos de Validacion === */    

.contact_form input:required:valid, .contact_form textarea:required:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

/* === Estilos del boton de Envio === */
button.submit {
    padding: 9px 17px;
   font-family: Helvetica,calibri, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.submit:hover {
    opacity:.55;
    cursor: pointer;
    color: #fff;
}
button.submit:active {
    border: 1px solid #222;
    box-shadow: 0 0 10px 5px #444 inset;
}]

Y ahora vamos a copiar el código PHP (Copiamos todo lo que está entre corchetes):

[<?php
//Variables del formulario de contacto

@$nombre = addslashes($_POST['nombre']);
@$email = addslashes($_POST['email']);
@$web = addslashes($_POST['web']);
@$mensaje = addslashes($_POST['mensaje']);

//Mensaje de contacto
$cabeceras = "From: Neoteon"
 . "Reply-To: $emailn";
$asunto = "Mensaje desde la pagina Web";
$email_to = "tucorreo@tucorreo.com";
$contenido = "$nombre ha enviado un mensaje desde la web www.neoteo.comn"
. "n"
. "Nombre: $nombren"
. "Email: $emailn"
. "Sitio Web: $webn"
. "Mensaje: $mensajen"
. "n";
//Enviamos y resultados del mensaje
if (@mail($email_to, $asunto ,$contenido ,$cabeceras )) {

//Confirmación mensaje Ok
die("Su mensaje se envió correctamente, en la brevedad nos pondremos en contacto con usted. Gracias Neoteo");
}else{
//Error en el envió
die("Error: Su mensaje no pudo ser enviado, intente nuevamente");
}
?>]

En el código PHP vamos a incorporar toda la información para que los mensajes del formulario lleguen a nuestra casilla de correo electrónico. Ahora explicaremos lo que tienes que manipular para dejar tu formulario personalizado.

En la línea 12 cambiar la palabra “Neoteo” por el nombre de tu sitio. En la línea 15 debes escribir  tu dirección de correo electrónico (es donde llegan los mensajes). En la línea 16 reemplazas www.neoteo.com por tu página web.

Y para finalizar,  los mensajes de “envió correcto” o de “error en el envío”,  los personalizas en la línea 27 y 30.

En la guía anterior desarrollamos los pasos para crear y embellecer mediante el CSS un formulario de contacto y en esta guía, con el archivo PHP, estamos personalizando el envío e insertando una casilla de correo electrónico para la recepción de los mensajes del formulario.


  • Marcomax

    Muy bueno, lo recomiendo bastante me ayudo muchisimo, deberian de tener una seccion de aprende PHP, yo se que hay muchos tutoriales y lugares pero seria genial

  • franklin vargas

    Muy buen tutorial… M encanta poder aprender nuevo codigos en php, siempre es bueno aprender un poco mas, comparto que me encantaria que tuvieran un sitio que pudieran siempre tener un sitio asi poder programar en php y deberian dar un pequeño curso de C++

  • hash

    Gracias por el tutorial, ya lo profe y me funciono
    http://kontrolhard.tk/ y http://kontrolhard.tk/formulario.html

  • gun

    ¿Alguien sabe por qué hay una @ delante de las variables que son importadas al principio del código php?

    • Ray

      #4 – La razón de las @, es para evitar los errores, o mas bien evitar que se muestren, sobre todo cuando digitamos mal el nombre de las variables en alguna de las dos partes (HTML y PHP)…
      por ejemplo, el valor "nombre", pasado como parametro POST, si por alguna razón no se envió o se envió pero se equivocó en la digitada, por decirlo "nombe", en PHP generaría un error diciendo que el indice nombre no existe… con el simbolo @ no nos muestra el mensaje, y se continua con la ejecucion del resto del script..diran que es un error colocarlo, pues nunca nos daremos cuenta de la falla, pero algunas veces es util, sobre todo cuando existe un solo archivo PHP, que envia y tambien el mismo es quien recibe…

      • gun

        #6 Gracias por la aclaración. :)

  • sas

    no se si es que soy imbecil o que, pero no he podido hacer que me funcione, no tengo muchos conocimientos en estos temas per me gustaria aprender, al completar el formulario me lleva lleva a la pagina que me muestra toso el codigo de contacto.php, y no envia el correo,

    • Jorge Manuel

      #5 podría ayudarte :d, responder si asi lo quieres.

      • sas

        #8 te lo agradeceria

  • Jorge Manuel

    Podrías usar coloreadores de sintaxis, para darle un poco mas de estilo, aunque muy buen trabajo :D, como SyntaxHighlighter ó Code prettify.

  • hash

    a mi me llega normalmente los mensajes de quienes se registran en el formulario

  • hash

    a mi me llega normalmente los mensajes de quienes se registran en el formulario

  • Yo

    Para La proxima entrega estaria bien modificar el mensaje de enviado o error, en vez de llevarte a una pagina muerta que abriera un tipo de alert como javascript, no se si sera posible utilizando el propio php

  • neuronas

    muy util, solo que tiene un agujero si no aclaras que hay que usar el script

    …y para que sirve.

    de donde saca la leyenda "please fill out this field" ?

  • hash

    quien necesite el codigo aca esta .. ya lo probe en un server y funciona
    https://www.dropbox.com/sh/wdio09rd4zm44qs/Ipa52kFSlH
    y la pagian de muestra
    http://kontrolhard.tk/formulario.html
    http://kontrolhard.tk/

    • http://www.neoteo.com/miembro/patricio_eduardo_almonacid_tapia/ patricio eduardo almonacid tapia

      sabes subi el formulario completo incluido el PHP ya lo subi a un servidor web y al enviar el formulario en el correo que recibo no aparece el nombre ni el mensaje, solo aparece la información del correo y la web

  • gentz

    Muy bueno y perfectamente explicado!!!
    Yo sólo tengo una duda, en mi formulario agregué el campo "telefono" y la única forma de hacerlo funcionar es poniendo el atributo type="text", pues con type="tel" no funciona, y dado que estamos en HTML5 me gustaría poder escribir todos los elementos con sus atributos de este modo… Es esto posible? qué cambio habría que hacer en el php para conseguirlo?!

    Muchas gracias nuevamente!!!

  • gentz

    Otra cosilla, existe alguna manera de hacer volver automáticamente de la página de "confirmación" y/o "error de envío" a nuestra web, en lugar que el usuario se quede allí viendo una página en blanco con un texto simple?!?!

    Espero vuestras respuestas y muchas gracias!

  • http://www.neoteo.com/miembro/Rasectyson/ CesarPC

    Tengo un problema, cuando le doy al botón enviar me abre el archivo de contacto.php
    Lo estoy probando de forma local, me imagino que es por eso pero no estoy seguro