Google+ Crear formulario con html5 y CSS3 - tutorial - Miopiblog

lunes, 14 de enero de 2013

Crear formulario con html5 y CSS3 - tutorial

En este tutorial, te voy a explicar que es lo que tienes que hacer para crear un formulario de contacto para sitio web, utilizando html5 para la estructura y CSS3 para el diseño o estilo del formulario. Para lograr que el formulario de contacto html5 funcione y envíe los datos, emplearemos una función php.

Para comenzar a crear nuestro formulario de contacto para sitio web, mediante html5, vamos a comenzar por la estructura. La estructura del formulario de contacto html5 y CSS3, va a estar compuesta por: un <legend> o título del formulario, por un contenedor o <fieldset>,  las etiquetas <form> que corresponden al propio formulario, y varios elementos <label> en cuyo interior estarán los <input> (recuadros donde el usuario introduce sus datos).

Por lo tanto, nuestro html para el formulario de contacto quedaría así:


<fieldset id="contmiformu"> <!------- Título -------> <legend>Contacto:</legend> <!------- Comienza el formulario -------> <form id="miformu" action="enviarform.php" method="post" > <!------- inputs y label -------> <p><label class="label" ><span>Nombre:</span> <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre" required="required" autofocus ></label></p> <p><label class="label" ><span>Apellidos:</span> <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" required="required" ></label></p> <p><label class="label" ><span>Email:</span> <input type="email" id="email" name="email" placeholder="asturver@hotmail.es" required="required" ></label></p> <p><label class="label" ><span>¿Sitio web?:</span> <input type="url" id="url" placeholder="http://asturver.com" name="web" ></label></p> <p><label class="label" ><span>Teléfono:</span> <input type="tel" id="tel" placeholder="Número de teléfono" name="telefono" ></label></p> <p><label class="label" ><span>Comentarios:</span> <textarea id="comentarios" name="comentarios" placeholder="Escribe aquí" cols="17" rows="5" maxlength="1000"></textarea></label></p> <!------- Botón de enviar -------> <p><input class="submit" type="submit" value="Enviar" /><p> </form> </fieldset>
Te explico un poco lo que he creado:


  1. " <fieldset id="contmiformu">
                    <!------- Título ------->
                    <legend>Contacto:</legend>"
    - Este fragmento de código crea, o mejor dicho, abre el contenedor o "fieldset" y hace visible un título para el formulario, en este caso: "Contacto:".
  2. " <!------- Comienza el formulario ------->
            <form id="miformu" action="enviarform.php" method="post" >"
    - Abrimos el elemento <form> o formulario, en cuyo interior van situados los <input> y <label>. Como puedes observar, he asignado un id="", para identificarlo, action="" que hace referencia a la función php que vamos a utilizar para enviar dicho formulario (enviarform.php) y el method="", en este caso "post".
  3. "<!------- inputs y label ------->
            <p><label class="label" ><span>Nombre:</span> <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre" required="required" autofocus ></label></p>"
    - los elementos <label> son en los que introducimos el enunciado que queremos que tengan los <input>, y los propios <input>, que son los cuadros de texto que el usuario rellena con sus datos. Dentro del elemento <input> se pueden especificar varios atributos, en este caso hemos especificado: "required" (requerido), "autofocus" (gracias a este atributo este elemento <input> sale como el "primero a rellenar" siempre), type="" (el tipo de input), id="" (establece una identidad), name="" (establece una identidad que después nos sirve para la función php), placeholder="" (texto que sale escrito por defecto dentro del input).
  4. "<p><input class="submit" type="submit" value="Enviar" /><p>" - Botón de enviar.


Si lo has hecho todo bien, en tu sitio web tendría que verse esto:


Parece que nuestro formulario de contacto está un poco soso, no? jeje!!! no importa, vamos a darle un poco de estilo. Crea una hoja de estilos CSS y añade un link a ésta entre las secciones <head> y </head>, de tu sitio web, o añade los siguientes estilos CSS3 a tu hoja de estilos. También puedes introducir el código para los estilos del formulario de contacto, entre las etiquetas <style type="text/css"> y </style>, para insertarlo en tu sitio web:


/* ------------- estilos para
    el título ------------- */
 
#contmiformu legend {
    margin: 0 auto;
    font-size: 2em;
    font-weight: bold;
}
 
/* ------------- estilos para
    el contenedor ------------- */
 
#contmiformu {
  width: 250px; 
  border: 0;
  padding: 3px; 
 }
 
/* ------------- estilos para
    el formulario ------------- */
 
#miformu {
    width: 300px;
    background-image: linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-image: -o-linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-image: -moz-linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-image: -webkit-linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-image: -ms-linear-gradient(bottom, rgb(192,204,20) 47%, rgb(91,240,126) 68%);
background-color: #5bf07e;
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.47, rgb(192,204,20)),
 color-stop(0.68, rgb(91,240,126))
);
border-width: 2px;
border-color: #26600c;
border-style: solid;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
}
 
#miformu label {
 display: block;
    margin:0;
}
 
#miformu label span {
   display: block;
   margin-left: 7px;
}
 
/* ------------- estilos para
    los input y area de texto ------------- */
 
#miformu label input {
    margin-left: 40px;
    margin-top: 5px;
    padding-left: 3px;
    border-color: #ff6a00;
    -moz-transition: all .25s; 
    -webkit-transition: all .25s; 
    -o-transition: all .25s;
    transition: all .25s;
}
 
#miformu label textarea {
    margin-left: 40px;
    margin-top: 5px;
    padding-left: 3px;
    border-color: #ff6a00;
    -moz-transition: all .25s; 
    -webkit-transition: all .25s; 
    -o-transition: all .25s;
    transition: all .25s;
}
 
/* ------------- efectos para
    los input y area de texto ------------- */
 
 
#miformu label input:focus, #miformu label textarea:focus {
    background: #fff; 
    border-color: #0000FF; 
    box-shadow: 0 0 4px #0000FF; 
    padding-right:65px;
    margin-left: 10px;
}
 
#miformu .submit {
    margin-left: 50px;
    font-size: 14px;
    font-weight: bold;
    padding: 3px;
    margin-bottom: 7px;
    background-color: #808080;
    color: #fff;
    cursor: pointer;
    -moz-transition: all .32s; 
    -webkit-transition: all .32s; 
    -o-transition: all .32s;
    transition: all .32s;
    }
 
 
/* ------------- estilos para
     boton de envío ------------- */
 
 
#miformu .submit:hover {
    padding: 3px 5px;
    background-color: #ebe7e7;
    color: #0000FF;
    }

Vamos a ver como tendría que quedar el formulario de contacto html5 diseñado con CSS3 finalmente, visto con el navegador Google Chrome, por ejemplo:



Parece que ahora se ve algo mejor. En internet explorer se ve algo diferente y se puede mejorar algo el diseño, pero en la mayoría de navegadores modernos se ve exactamente así, como en la imagen. ¿te gusta? espero que sí, no obstante, recuerda que puedes personalizar los estilos modificando el CSS.

Aún nos falta algo muy importante; la función php para enviar los datos del formulario de contacto hmtl5. Crea un nuevo documento .php, copia este código en su interior, personalízalo con tu dirección de correo, tus propias frases... etc, y gúardalo en el directorio raíz de tu sitio web con el nombre: "enviarform.php". Una vez lo tengas, súbelo a tu servidor con el resto de archivos.



<?php
//Importamos los datos del formulario
@$nombre = addslashes($_POST['nombre']);
@$apellidos = addslashes($_POST['apellidos']);
@$email = addslashes($_POST['email']);
@$web = addslashes($_POST['web']);
@$mensaje = addslashes($_POST['comentarios']);
 
//Preparo el correo
$cabecemail = "From: $email\n" 
 . "Reply-To: $email\n";
$asunto = "Mensaje desde el formulario de contacto"; //asunto del mensaje
$email_to = "asturver@hotmail.es"; //cambiar por tu email
$contenido = "$nombre ha enviado un mensaje desde el formulario de contacto, estos son sus datos:"
. "\n"
. "Nombre: $nombre\n"
. "Apellidos: $apellidos\n"
. "Email: $email\n"
. "Sitio Web: $web\n"
. "Comentarios: $mensaje\n"
. "\n";
 
//Enviamos el correo
if (@mail($email_to, $asunto ,$contenido ,$cabecemail )) {
 
//Si el mensaje se envía muestra una frase
die("Gracias, hemos recibido sus datos correctamente.");
}else{
 
//Si algo falla, sale error
die("Error: No hemos recibido sus datos, inténtelo más tarde.");
}
?>

Muy bien, supongo que hasta el momento no ha sido muy difícil, no? pues... ya hemos terminado, jeje!!! Ya tienes creado tu formulario de contacto, realizado con html5 y diseñado con CSS3.

Una cosa más: este formulario realiza la validación correctamente mediante html5 en los navegadores modernos, pero no en otros como IE ni en dispositivos móviles.
Para solucionar este problema, y que nuestro formulario de contacto funcione correctamente en todos los navegadores y en los dispositivos android, introduce el siguiente código entre las etiquetas <head> y </head> del sitio web donde vaya a ir situado el formulario de contacto html5:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://minuevaprueba.webuda.com/jquery.h5form-custom.js"></script>
   
<script>
    $(document).ready(function(){
        $('#miformu').h5form();   
    });
</script>

Este código javascript, hace uso del framework jQuery y de un plugin para validar formularios con jQuery, conocido como jquery.h5form. Si sabes hacerlo, descárgalo y súbelo a tu propio servidor en vez de utilizar "minuevaprueba.webuda.com/jquery.h5form-custom.js", así nunca dejará de funcionar, seguro.
También puedes agregar estilos a las etiquetas de error y demás del plugin, para ello visita este link: https://plugins.jquery.com/h5form/ e infórmate mejor.

Bueno, pues nada, puedes ver este mismo ejemplo funcionando si visitas este subdominio de pruebas, en el que te muestro el formulario html5 y CSS3 que hemos construido, funcionando. Por cierto, en mi android funciona perfectamente.

Si quieres, puedes descargar todos los códigos para el formulario de contacto html5 de este ejemplo, visitando el link. Una cosa: para editar el archivo index, tendrás que utilizar un programa o editor que soporte html5, si no lo tienes, puedes utilizar el bloc de notas de windows. No obstante, también te facilito el archivo index en versión .txt para que puedas editarlo fácilmente (este archivo .txt no es necesario subirlo al servidor).
¿quieres una plantilla responsive design en html5, gratis? echa un vistazo al enlace! :-)

No te olvides de seguirme en las redes sociales o de suscribirte a mi newsletter. Si lo haces, estarás siempre al día sobre nuevas actualizaciones y publicaciones en Miopiblog.

Un saludo!!! ; )

Seguidores (seguir blog)

Me siguen en google plus: