Formulario contacto PHP JS

Creando un formulario de contacto con
PHP y Javascript [1]: El proyecto

Home CSS Creando un formulario de contacto con PHP y Javascript [1]: El
proyecto
En esta serie de tutoriales vamos a ver como crear desde cero un formulario de contacto bsico
con PHP.
Para el PHP habr que tener algn tipo de hosting que nos permita enviar e-mails (me
consta que 000webhost lo permite). Aunque lo primero es tener el HTML necesario, que es un
formulario cualquiera. Usar tres campos: Nombre, e-mail y mensaje, que sern
obligatorios.
El resultado final ser algo as:
Si te interesa aprender cmo hacerlo, te recomiendo que leas esto. Si no, siempre puedes
esperar a que acabe, y ponga un link de descarga a los archivos finales.
Nota: tened en cuenta que usaremos varios atributos propios de HTML5 (aunque haremos que
funcione en navegadores antiguos )
Para hacer todo crearemos una carpeta con estos archivos (por ahora):
index.html, donde tendremos nuestro formulario.
Una carpeta llamada css, donde guardaremos style.css, el archivo para editar la
apariencia del formulario, y reset.css, elfamoso reset de Eric Meyer (suelo preferir
usar normalize.css, pero no merece la pena incluirlo sin editar para un proyecto
pequeo).
Una carpeta llamada js, donde guardaremos:
modernizr.js, una versin de modernizr que comprueba los tipos de
elementos HTML5 de los formularios. Podis descargarla desde aqu

script.js, donde pondremos el cdigo necesario para enviar el formulario
con los datos necesarios, y comprobar los campos necesarios.
post.php, donde enviaremos los datos.
Creando un formulario de contacto

con PHP y Javascript [2]: El HTML
Home HTML Creando un formulario de contacto con PHP y Javascript [2]: El HTML
Es lo primero que tendremos que realizar: el formulario desde el que vamos a enviar nuestros
datos. Es te es el contenido de nuestro archivo index.html.
Con esto obtendremos un resultado tal que as:
Espero que los comentarios sean bastante aclaratorios

<!DOCTYPE html>




<html class="no-js" lang="es">

<head>

<title>Formulario de contacto</title>
<!-Charset (juego de caracteres para que se vean las tildes, etc)
-->
<meta charset="UTF-8">
<!-Viewport (la usan los mviles para calcular el ancho de las pginas)
-->
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1" />
<!-Referencia a nuestros archivos CSS

-->
<link rel="stylesheet" type="text/css" href="css/reset.css">

<link rel="stylesheet" type="text/css" href="css/style.css">
<!-Referencia a modernizr (en el head)
script.js => encima de </body>,
para acelerar la carga
y evitar conflictos con el DOM
-->
<script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>
<div id="container">
<!-Aqu pondremos los errores (de existir alguno)

-->
<div id="error"></div>
<!-Definimos el mtodo de envo (POST hace que nuestros datos no se

puedan ver desde
el navegador, que es lo ms seguro), y la URL a la que enviarlo (post.php)
-->
<form id="formulario" name="formulario" method="POST"

action="post.php">
<!-El nombre
-->
<p>
<label for="nombre">Nombre</label><span
class="requerido">*</span>
<input type="text" name="nombre" id="nombre" size="30" required
placeholder="Nombre">
</p>
<!-El e-mail
-->
<p>
<label for="email">e-mail</label><span
<input type="email" name="email" id="email" placeholder="Introduce
tu e-mail" required>
</p>
<!-El mensaje
-->
<p>
<label for="mensaje">Mensaje</label><span
<textarea id="mensaje" name="mensaje" placeholder="El asunto"
rows="8" required></textarea>
</p>
<p class="submit">
<input type="submit" id="submit" value="Enviar">
</p>
</form>
<!-Aqu pondremos el mensaje cuando enviemos el mensaje
-->
<div id="correcto"></div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Toda la serie:

PHP y Javascript [3]: el CSS
Home CSS Creando un formulario de contacto con PHP y Javascript [3]: el
CSS
En la ltima entrada, dejamos hecho un formulario bsico, pero visualmente no obtuvimos
grandes resultados.
Tras editar nuestro archivo style.css de la carpeta css y rellenar con el reset de Eric Meyer el
archivo reset.css, obtendremos:
Ya que el reset.css es slo copiar el cdigo que viene en el link de arriba, slo pondr
el style.css:
html
{
background: #eee;
color: #333;
font-size: 87.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html, input, textarea

{
font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
font-weight: 700;
}
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container
{
width: 100%;
max-width: 650px;
background: #fff;
border: 1px solid #ccc;
margin: 2em auto;
padding: 2em;
}
.ie6 #container
{
width: 650px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus

{
outline: none;
-webkit-box-shadow: 0 0 4px 1px #5AB7F5, inset 0 0 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 4px 1px #5ab7f5, inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 4px 1px #5AB7F5, inset 0 0 4px rgba(0, 0, 0, 0.2);
border-color: #5AB7F5;
}
input[type="text"], input[type="email"], textarea

{
color: #555;
height: 2em;
width: 100%;
padding: .2em;
padding-left: .5em;
border: 1px solid #d2d2d2;
margin-left: 1em;
}
textarea
{
padding: .5em;
}
input[type="submit"], input[type="text"], input[type="email"], textarea

{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
input[type="text"], input[type="email"]
{
max-width: 250px;
}
textarea {
display: block;
margin-left: 0;
min-height: 8em;
}
p{
line-height: 2.3em;
}
p.submit
{
text-align: center;
margin-top: 1em;
}
.requerido {
color: #3D85C6;
font-weight: 700;
font-size: 1.2em;
}
input[type="submit"]
{
display: inline-block;
*display: inline;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,
endColorstr=#E3E3E3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9',
endColorstr='#E3E3E3')";
cursor: pointer;
color: #444;
position: relative;
padding: 5px 10px;

border: 1px solid #CCC;
background: #F1F1F1;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,
#F9F9F9), color-stop(100%, #E3E3E3));
background-image: -webkit-linear-gradient(#F9F9F9, #E3E3E3);
background-image: -moz-linear-gradient(#F9F9F9, #E3E3E3);

background-image: -o-linear-gradient(#F9F9F9, #E3E3E3);
background-image: linear-gradient(#F9F9F9, #E3E3E3);
-webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset;

-moz-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset;
box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset;
}
input[type="submit"]:hover
{
background: #EAEAEA;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EAEAEA,
endColorstr=#EAEAEA);
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAEAEA',
endColorstr='#EAEAEA')";
}
input[type="submit"]:active
{
background: #EAEAEA;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
}
#error ul {
list-style: disc;
color: red;
padding-left: 40px;
margin-bottom: 2em;
}
#correcto {
color: green;
text-align: center;
}
Toda la serie:

PHP y Javascript [4]: el Javascript
Home Javascript Creando un formulario de contacto con PHP y Javascript
[4]: el Javascript
Con el javascript no cambiaremos la apariencia del formulario, pero s comprobaremos errores
de relleno del formulario, y haremos que no se redirija la pgina una vez enviado. Dentro de la
carpeta js, el archivo modernizr.js es ste, por lo que me centrar enscript.js.
Bsicamente lo que hacemos es comprobar los campos y enviar al servidor va AJAX el
mensaje:
(function(window, document){
// Abreviar document.getElementById
function $(id){
return document.getElementById(id);
}
/*
Variables para evitar acceder al DOM muchas veces,
y abreviar
*/
var form = $('formulario'),
nombre = $('nombre'),
email = $('email'),
mensaje = $('mensaje'),
error = $('error'),
correcto = $('correcto');
// Comprobar e-mail y cadena vaca

function emailVerification(valor){
// Expresin regular para validar el email
(http://stackoverflow.com/questions/46155/validate-email-address-in-javascript)
// Yo haba hecho una propia, pero no estoy en mi ordenador, y esta parece
funcionar bien
var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\
[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))
$/
return regex.test(valor);
}
function estaVacio(valor){
return valor === "";
}
// Funcin que suceder cada vez que el formulario se enva

function onsubmit(e){
var data = {
nombre: nombre.value,
email: email.value,
mensaje: mensaje.value
},
errores = [];
e = e || window.event;
// Evitamos redireccionar
if( typeof e.preventDefault === 'function'){
e.preventDefault()
} else {
e.returnValue = false;
}
// comprobamos errores (prefiero mostrarlos normalmente quitando el

required)
if( estaVacio(data.nombre)){
errores.push("El campo del nombre no puede estar vaco")

}
if( ! emailVerification(data.email)){
errores.push("Introduce un email vlido")
}
if( estaVacio(data.mensaje) ){
errores.push("El mensaje no puede estar vaco")
}
// Si hay errores no enviamos el formulario

if(errores.length){
error.innerHTML = '<ul><li>' + errores.join('</li><li>') + '</li></ul>';
return false;
}
// Si no hay errores, ponemos la lista de errores vacos

error.innerHTML = '';
// Enviamos el formulario, pero evitamos redireccionar

enviarform(data);
return false;
}
// Funcin mediante la que envimos el formulario

function enviarform(data){
var request = createRequest(),
params = convertirObjeto(data);
request.open("POST", 'post.php', false);

request.setRequestHeader("Content-type", "application/x-www-formurlencoded");
request.onreadystatechange = function(){
if( request.readyState === 4 ){
if( request.responseText !== "SUCCESS" ){
return error.innerHTML = "<ul><li>Hubo un error al enviar el
formulario</li></ul>"
}
// Si est todo correcto mostramos el mensaje y ocultamos el formulario
correcto.innerHTML = "El mensaje se envi correctamente, intentar
responderte lo antes posible";
form.style.display = "none";
}
}
request.send(params);
}
// Creamos una solicitud AJAX

function createRequest(){
// IE7 no implement bien XMLHttpRequest, as que intentamos usar el nativo
if( window.ActiveXObject ){
try{
return new window.ActiveXObject("Microsoft.XMLHTTP");
} catch(ex){
alert("Usas un navegador demasiado antiguo (IE5), actualzalo para poder
desfrutar de la web")
return null
}
}
return new window.XMLHttpRequest();
}
// Convierte un objeto en una cadena de texto preparada para ser enviada al

servidor
function convertirObjeto(obj){
var ret = '',
key, current = 0;
for (key in obj){
ret += ((current === 0 ? '' : '&') + key + '=' +
encodeURIComponent(obj[key]) );
current++
}
return ret;
}
/*
Si no est javascript activado y es un navegador moderno, el navegador

comprobar los campos por nosotros
Si s lo est, prefiero comprobarlos y mostrar los errores en conjunto.
*/
nombre.required = email.required = mensaje.required = false;
email.type = "text";
// Aadimos el evento cuando el formulario va a ser enviado

form.addEventListener ? form.addEventListener('submit', onsubmit, false):
form.attachEvent('onsubmit', onsubmit)
})(window, document, undefined)

Toda la serie:

PHP y Javascript [5]: el PHP
Home PHP Creando un formulario de contacto con PHP y Javascript [5]: el
PHP
En las anteriores partes de este tutorial hemos creado un bonito formulario, con un genial
acabado, y un script que nos permite enviar va AJAX los datos al servidor para que nos lo
enve por e-mail.
Pero estamos enviando los datos a una pgina vaca (por ahora), post.php. Ahora nos
encargaremos de que cada vez que se enve nos llegue un bonito mensaje a nuestra bandeja
de entrada:
Nota: Es necesario que el servidor donde alojes estos ficheros tenga activada la
funcin mail de PHP. Yo he alojado los ficherosaqu (000webhost.com), y como veis funciona.
Por lo que he ledo es posible que te llegue como spam (dependiendo de qu correo usas).
Nota 2: Importantsimo cambiar la primera variable ($receptor) por la direccin a la que

quieres que llegue el correo.
<?php
// Aqu el email al que queres recibir el correo
// (en mi caso ecoal95[arroba]gmail[punto]com)
$receptor = "tumail@tudominio.com";
//------------------------------------------------------------------// VARIABLES DEL MENSAJE
$mensaje = preg_replace('/\n/','<br>',urldecode($_POST['mensaje']));
$nombre = urldecode($_POST['nombre']);
$email = urldecode($_POST['email']);
$fecha = date('c');
$titulo = "Nuevo mensaje de $nombre desde el formulario de contacto";
// Comprobamos que hay un email vldo y un mensaje

if( ! filter_var($email, FILTER_VALIDATE_EMAIL) || ! isset($_POST['mensaje']) )
die("ERROR");
// El mensaje
$data = "
<html><head>
<title>$titulo</title>
<meta name='viewport' content='width:device-width,initial-scale=1'>
<style>
body{
font-family:Arial,Helvetica,sans-serif;
background: #eee;
color: #333;
}
.mensaje {
width: 100%;
max-width: 650px;
background: #fff;
border: 1px solid #ccc;
margin: 2em auto;
padding: 2em;
} </style>
</head>
<body>
<div class='mensaje'>
<h1>Nuevo mensaje de $nombre</h1>
<p><strong>Fecha:</strong> $fecha</p>
<p><strong>Mensaje:</strong><br>$mensaje</p>
<p><strong>Email:</strong> <a href='mailto:$email'>$email</a></p>
</div>
</body></html>";
$cabeceras = "MIME-Version: 1.0\r\n";

$cabeceras .= "Content-type: text/html; charset=utf-8\r\n";
$cabeceras .= "From: $nombre<$email>\r\n";
$cabeceras .= "To: $receptor";
// Enviamos nuestro email y damos cuenta sy hay algn error

if(mail($receptor, $titulo, $data, $cabeceras))
echo "SUCCESS";
else
echo "ERROR";
?>
Toda la serie:
Crear un formulario con PHP y

Javascript [6]: Resultado y
demostracin
Home Javascript Crear un formulario con PHP y Javascript [6]: Resultado
y demostracin
Ya tenemos hecho nuestro formulario con PHP, con AJAX y comprobacin de errores. Pero no
lo hemos visto en accin:
Demo Descarga
Si os descargis el archivo, recordad cambiar en el archivo post.php mi e-mail por el vuestro.
Si tenis problemas con la llegada de los mensajes (probad un par de veces insertando en
el formulario emails distintos), echadle un ojo a este comentario.
Formulario con errores
Formulario relleno correctamente
Formulario enviado correctamente
Mensaje en la bandeja de entrada de GMail
Mensaje recibido y abierto

Formulario contacto PHP JS

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Formulario contacto PHP JS

Hochgeladen von

Copyright:

Verfügbare Formate

Creando un formulario de contacto con

PHP y Javascript [1]: El proyecto

index.html, donde tendremos nuestro formulario.

Una carpeta llamada js, donde guardaremos:

modernizr.js, una versin de modernizr que comprueba los tipos de

elementos HTML5 de los formularios. Podis descargarla desde aqu

con los datos necesarios, y comprobar los campos necesarios.

post.php, donde enviaremos los datos.

Creando un formulario de contacto

Espero que los comentarios sean bastante aclaratorios

<html class="ie7 lt-ie8 lt-ie9 no-js" lang="es">

<!-Referencia a nuestros archivos CSS

<link rel="stylesheet" type="text/css" href="css/reset.css">

<!-Aqu pondremos los errores (de existir alguno)

<!-Definimos el mtodo de envo (POST hace que nuestros datos no se

<form id="formulario" name="formulario" method="POST"

Creando un formulario de contacto con

html, input, textarea

input[type="text"]:focus, input[type="email"]:focus, textarea:focus

input[type="text"], input[type="email"], textarea

input[type="submit"], input[type="text"], input[type="email"], textarea

padding: 5px 10px;

background-image: -moz-linear-gradient(#F9F9F9, #E3E3E3);

-webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset;

Creando un formulario de contacto con

// Comprobar e-mail y cadena vaca

// Funcin que suceder cada vez que el formulario se enva

// comprobamos errores (prefiero mostrarlos normalmente quitando el

errores.push("El campo del nombre no puede estar vaco")

// Si hay errores no enviamos el formulario

// Si no hay errores, ponemos la lista de errores vacos

// Enviamos el formulario, pero evitamos redireccionar

// Funcin mediante la que envimos el formulario

request.open("POST", 'post.php', false);

// Creamos una solicitud AJAX

// Convierte un objeto en una cadena de texto preparada para ser enviada al

Si no est javascript activado y es un navegador moderno, el navegador

// Aadimos el evento cuando el formulario va a ser enviado

})(window, document, undefined)

Creando un formulario de contacto con

Nota 2: Importantsimo cambiar la primera variable ($receptor) por la direccin a la que

//------------------------------------------------------------------// VARIABLES DEL MENSAJE

// Comprobamos que hay un email vldo y un mensaje

$cabeceras = "MIME-Version: 1.0\r\n";

// Enviamos nuestro email y damos cuenta sy hay algn error

Crear un formulario con PHP y

Formulario con errores

Formulario relleno correctamente

Formulario enviado correctamente

Mensaje en la bandeja de entrada de GMail

Mensaje recibido y abierto

Das könnte Ihnen auch gefallen