Formulario de contacto completo y responsive: HTML5, CSS3, PHP y JAVASCRIPT

Para que el formulario de contacto se comporte como debe, es decir, te lleguen los mensajes a tu correo de las personas que te escriban y, seguidamente de ello, vuelva a la página de la web, y además aparezca un texto agradeciendo el envío del comentario hace falta una combinación de códigos y archivos HTML5, CSS3, PHP y JAVASCRIPT.

 

1º.- El HTML5 del formulario:

<h2>CONTACTA CONMIGO</h2>
<hr />
<div class="contact-form form">
<form method="post" action="process.php" role="form">
<label for="contact-name">Nombre</label>
<input type="text" name="name" placeholder="Escribe tu nombre" required>
<label for="contact-email">Email</label>
<input type="email" name="email" placeholder="Escribe tu email para que pueda contestarte" required>
<label for="contact-message">Comentario</label>
<textarea name="message" cols="20" rows="10" placeholder="Coméntame lo que quieras" required></textarea>
<input type="submit" name="enviar" value="Enviar" >     
</form>
</div>

Es importante, para que el javascript que hace que se retorne a la página inicial funcione, respetar los “class”, “for”,y “name” (este último para que actúe en el php).

2º.- Un mínimo de CSS3 para el formulario que posibilita que éste sea responsive:

Este Css está adaptado de la web de javimarcos.com:

body {
 background-color: lightblue;
}
h2 {
 text-align: center;
}
h3 {text-align: center;
 color: green;
 padding: 50px;}
hr {
 max-width: 380px;
}
label {
 color: green;
 padding-left: 5px;
}
.form {
 width: 470px;
 height: auto;
 margin: 0 auto;
 padding: 0 1%;
 box-shadow: 5px 5px 0 #AAA;
 border-radius: 5px;
}

input, textarea{
 width: 98%;
 height: 40px;
 font: 300 14px "Open Sans", Arial, sans-serif;
 padding-left: 5px;
 margin: 5px 0 10px 0;
 border-radius: 7px;
}

input[type=submit]{
 background-color: grey;
 height: 50px;
 width: 98%;
 border: none;
 font-weight: 400;
 letter-spacing:2px;
 color:#FFFFFF;
}

input[type=submit]:hover{background-color:green;}

textarea{
 height:100px;
 resize:none;
}

3º.- El archivo php, que he llamado process.php:

<?php

// Email address verification
function isEmail($email) {
 return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i", $email));
}

if($_POST) {

 // Enter the email where you want to receive the message
 $emailTo = 'tuemail@email.com';

 $clientName = addslashes(trim($_POST['name']));
 $clientEmail = addslashes(trim($_POST['email']));
 $message = addslashes(trim($_POST['message']));

 $array = array();
 $array['nameMessage'] = '';
 $array['emailMessage'] = '';
 $array['messageMessage'] = '';

 if($clientName == '') {
 $array['nameMessage'] = 'Por favor, falta tu nombre.';
 }
 if(!isEmail($clientEmail)) {
 $array['emailMessage'] = 'Por favor, introduce una direcci&oacute; de email v&aacute;lida.';
 }
 if($message == '') {
 $array['messageMessage'] = 'Que te olvidas de comentar!.';
 }
 if($clientName != '' && isEmail($clientEmail) && $message != '') {
 // Send email
 $headers = "From: " . $clientName . " <" . $clientEmail . ">" . "\r\n" . "Reply-To: " . $clientEmail;
 mail($emailTo, $subject . ' (Cambia esto por lo que quieras)', $message, $headers);
 }

 echo json_encode($array);

}
?>

4º.- Y el archivo javascript:

Notas:
1.- En el head del html se debe invocar a este archivo:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

2.- Y en el head o antes del cierre del body, se debe invocar el que yo he llamado “script.js”:
<script type="text/javascript" src="script.js"></script>

El archivo “script.js” en cuestión:

jQuery(document).ready(function() {
 /*
 Contact form
 */
 $('.contact-form form').submit(function(e) {
 e.preventDefault();

 var form = $(this);
 var nameLabel = form.find('label[for="contact-name"]');
 var emailLabel = form.find('label[for="contact-email"]');
 var messageLabel = form.find('label[for="contact-message"]');
 
 nameLabel.html('name');
 emailLabel.html('email');
 messageLabel.html('message');
 
 var postdata = form.serialize();
 
 $.ajax({
 type: 'POST',
 url: 'process.php',
 data: postdata,
 dataType: 'json',
 success: function(json) {
 if(json.nameMessage !== '') {
 nameLabel.append(' - <p> ' + json.nameMessage + '</p>');
 }
 if(json.emailMessage !== '') {
 emailLabel.append(' - <p> ' + json.emailMessage + '</p>');
 }
 if(json.messageMessage !== '') {
 messageLabel.append(' - <p> ' + json.messageMessage + '</p>');
 }
 if(json.nameMessage == '' && json.emailMessage == '' && json.messageMessage == '') {
 form.fadeOut('fast', function() {
 form.parent('.contact-form').append('<h3>Gracias por escribirme!<br /> Pronto recibir&aacute;s mi respuesta.</h3>');
 });
 }
 }
 });
 });
 
});

Lo podéis ver en funcionamiento, y probarlo aquí.

Para descargar todos los archivos que intervienen, tal y como se ven en la demo del enlace anterior: formulario

Otra forma más sencilla:
Para que el formulario de contacto que, por ejemplo, viene por defecto en una plantilla funcione, también se puede crear un archivo con extensión php, con un código como éste:

<?php

	$name = @trim(stripslashes($_POST['name'])); 
	$email = @trim(stripslashes($_POST['email']));
	$website = @trim(stripslashes($_POST['website']));
	$message = @trim(stripslashes($_POST['message'])); 

	$email_from = $email;
	$email_to = 'miemail@email.com';//Edita aquí con tu email

	$body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Website: ' . $website . "\n\n" . 'Message: ' . $message;

	$success = @mail($email_to, $body, 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Website: ' . $website . "\n\n" . 'Message: ' . $message);
	
?>

<!DOCTYPE HTML>
<html lang="es">
<head>
	<script>alert("Gracias por escribirme, pronto me pondré en contacto contigo.");</script>
	<meta HTTP-EQUIV="REFRESH" content="0; url=../index.html"> 
</head>

Inluye una orden “alert” de javascript y de refresco de dirección, para volver a la página principal de la web. Con este breve y sencillo código tan sólo será necesario que en el html del formulario en la etiqueta “form”, indiquemos el nombre del archivo php que hemos creado, por ejemplo:

<form method="post" action="process.php">

Un código totalmente efectivo y muy sencillito, sin complicaciones:

 

Espero que te sea de utilidad.