Formulario de contacto sencillo con HTML5, CSS y PHP
Realizaremos un formulario de contacto de manera simple utilizando HTML5, CSS y PHP. Ggracias 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…
ESTRUCTURA HTML
Creamos el index.html:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<link type="text/css"rel="stylesheet"href="style.css">
<!--La linea de arriba es para importar estilos CSSanuestro formulario-->
<title>Formulario de contacto</title>
</head>
<body>
<section class="formulario">
<!--Aqui va el codigo del formulario-->
</section>
</body>
</html>
|
EL FORMULARIO
Creamos un formulario con tres campos: Nombre, Correo electrónico y mensaje. Este código lo tenemos que incluir dentro de la etiqueta section.
|
1
2
3
4
5
6
7
8
9
|
<form action="contact.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>
|
EL CSS
Aplicaremos los estilos al formulario, para ello crearemos el archivo style.css e incluir el siguiente código en él. Modificalo a tu gusto.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
label{
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario{
display:block;
margin:0auto;
width:510px;
color:#666666;
font-family:Arial;
}
form{
margin:0auto;
width:400px;
}
input,textarea{
width:380px;
height:27px;
background:#666666;
border:2pxsolid#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;
}
|
PHP
Creamos el archivo contact.php.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?php
$nombre=$_POST['nombre'];
$email=$_POST['email'];
$mensaje=$_POST['mensaje'];
$para='TUCORREO@CORREO.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://TUSITIOWEB.COM';
</script>";
}else{
echo'Falló el envio';
}
}
?>
|
