[vc_row][vc_column width=”2/3″][vc_custom_heading text=”Ver DEMO” font_container=”tag:h2|text_align:right|color:%23dd3333″ google_fonts=”font_family:Montserrat%3Aregular%2C700|font_style:400%20regular%3A400%3Anormal” link=”url:http%3A%2F%2Fhostperuweb.com%2Fportafolio%2Fformularios%2Fform1%2F|title:Ver%20demostraci%C3%B3n%20de%20formulario%20de%20contacto|target:%20_blank”][vc_column_text]Explicaremos como realizar un formulario de contacto de manera simple y eficiente utilizando una combinación de los lenguajes HTML5, CSS y PHP.
Aunque para mucho sea obvio, antes de comenzar quisiera mencionar que para que funcione correctamente el formulario es necesario subirlo a un servidor web para que el código PHP pueda ser ejecutado.[/vc_column_text][vc_tta_tabs][vc_tta_section title=”Estructura HTML” tab_id=”1451006853072-d4609474-bc45″][vc_column_text]Para comenzar a desarrollar el formulario, primero debemos crear nuestro archivo (index.html), el mismo contendrá el código que generará visualmente el formulario en nuestra página.
Podemos ver que gracias al lenguaje HTML5, las etiquetas utilizadas son mucho más intuitivas y fáciles de leer, a diferencia de las versiones anteriores, donde se utilizaban divs para crear bloques, ahora los diferenciamos con etiquetas fácilmente reconocibles como head, header, section, article, footer, entre otras…
A continuación daremos forma al formulario, vamos a crearlo con 3 campos: Nombre, Correo electrónico y mensaje. Para hacerlo, debemos incluir el siguiente código dentro de la etiqueta section.
[sourcecode language=”html”]
<!DOCTYPE html>
<!– El encabezado !DOCTYPE html especifica que se trata de un documento HTML5 –>
<html>
<head>
<link type="text/css" rel="stylesheet" href="estilo.css">
<!– La linea de arriba es para importar estilos CSS a nuestro formulario –>
<title>Formulario de contacto</title>
</head>
<body>
<section class="formulario">
<form action="contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required />
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="ejemplo@correo.com" required />
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required></textarea>
<input id="submit" type="submit" name="submit" value="Enviar" />
</form>
</section>
</body>
</html>
[/sourcecode]
Quiero mencionar la función que cumplen los atributos required y placeholder, ambos propiedades de HTML5. Required indica que el campo es obligatorio. Placeholder muestra un texto cuando el campo está vacío, para indicar al usuario que debe ir en ese campo, este texto se borra al hacer click en el campo. El tipo de campo type=”email” nos provee validación automática.[/vc_column_text][/vc_tta_section][vc_tta_section title=”Estilo CSS” tab_id=”1451006853188-a893a3ea-98ec”][vc_column_text]A continuación aplicaremos estilos al formulario, para ello debemos crear el archivo estilo.css e incluir el siguiente código en él. Esta parte depende de la creatividad de cada uno, este código se puede modificar a gusto adaptándolo al diseño de su sitio web.
[sourcecode language=”css”]
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial;
}
form {
margin:0 auto;
width:400px;
}
input, textarea {
width:380px;
height:27px;
background:#666666;
border:2px solid #f6f6f6;
padding:10px;
margin-top:5px;
font-size:10px;
color:#ffffff;
}
textarea {
height:150px;
}
#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
}
[/sourcecode]
[/vc_column_text][/vc_tta_section][vc_tta_section title=”Archivo PHP” tab_id=”1451007472486-d6d03d72-ce15″][vc_column_text]A continuación creamos el archivo contacto.php e incluimos el siguiente código.
[sourcecode language=”php”]
<?php
$nombre = $_POST["nombre"];
$email = $_POST["email"];
$mensaje = $_POST["mensaje"];
$para = "tuemail@tudominio.com";
$titulo = "ASUNTO DEL MENSAJE";
$header = "From: " . $email;
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje";
if ($_POST["submit"]) {
if (mail($para, $titulo, $msjCorreo, $header)) {
echo "<script language=’javascript’>
alert(‘Mensaje enviado, muchas gracias.’);
window.location.href = ‘http://(tudominio)’;
</script>";
} else {
echo "Falló el envio";
}
}
?>
[/sourcecode]
[/vc_column_text][/vc_tta_section][/vc_tta_tabs][vc_column_text]CONCLUSIÓN
Hemos creado un simple pero efectivo formulario utilizando los lenguajes HTML5, CSS y PHP. Creamos 3 archivos:
index.html para mostrar el formulario,
estilo.css para aplicar diseño,
contacto.php para enviar el contenido a nuestra casilla de correo.
Espero les sea útil, no olviden de calificar y comentar. Muchas gracias.[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_row_inner][vc_column_inner]
[/vc_column_inner][/vc_row_inner][vc_separator][vc_row_inner][vc_column_inner]
[/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]