De las prácticas en las clases de maestría comparto este ejemplo de un formulario de contacto, la estructura del formulario se crea usando HTML, CSS para su diseño y se procesan los datos con PHP. Como siempre digo se comienza desde lo más básico hasta llegar a grandes logros, con este formulario sencillo lograrás comprender el funcionamiento de la función mail() de PHP. Van incorporados en el ejemplo los archivos SpryAssets (estos por cortesía de Carlos Perdomo), obviamente el formulario está trabajado con Dreamweaver.
Formulario de Contacto con HTML y PHP
Ejemplo en ejecución(Solo demostrativo, necesita servidor)
https://googledrive.com/host/0BxfUn2LNLVPebTNaNk96cVJYV00/contacto.htmlEnlace para descargar ejemplo: El código puede mejorarse a criterio del programador :)
https://googledrive.com/host/0BxfUn2LNLVPeUlMtZmJxbkxqT1U/ejemplo_formulario_contacto.zipCódigo HTML del Formulario de Contacto
El código debe ser guardado en archivo extención HTML por ejemplo contacto.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario de Contacto</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="miCSS.css" />
</head>
<body>
<center>
<div id="head" class="cabecera">
<h1>EJEMPLO DE FORMULARIO CONTACTO</h1>
</div>
<div id="div1" style="font-family:Tahoma; border:3px outset gray;
padding:15px; text-align:center; margin:20px" width="800px" height="100px" class="lateral" >
<form method="post" name="contacto" action="contacto.php" >
<table width="500" border="1" align="center" cellspacing="2px">
<tr>
<th colspan="2" align="center" scope="row">ENVIA TU COMENTARIO</th>
</tr>
<tr>
<th width="78" height="23" align="left" scope="row">Nombre</th>
<td width="406"><label for="nombre"></label>
<span id="sprytextfield1">
<input name="nombre" type="text" id="nombre" size="50" />
<span class="textfieldRequiredMsg">Se necesita un valor<br />
</span><span class="textfieldMinCharsMsg"> <br />
No se cumple el minimo de caracteres requerido.</span> <br />
</span></td>
</tr>
<tr>
<th align="left" scope="row">Correo</th>
<td><label for="correo"></label>
<span id="sprytextfield2">
<input name="correo" type="text" id="correo" size="40" />
<br />
<span class="textfieldRequiredMsg">Se necesita un valor.</span>
<span class="textfieldInvalidFormatMsg">Formato no valido.</span>
<span class="textfieldMinCharsMsg">No se cumple el minimo de caracteres requerido.</span>
</span>
</td>
</tr>
<tr>
<th align="left" scope="row">Comentario</th>
<td><label for="comentario"></label>
<span id="sprytextarea1">
<textarea name="comentario" id="comentario" cols="48" rows="5"></textarea>
<span class="textareaRequiredMsg">Se necesita un valor.</span>
<span class="textareaMinCharsMsg">No se cumple el minimo de caracteres requerido.</span>
<span class="textareaMaxCharsMsg"><br />
Se ha superado el numero maximo de caracteres.</span></span></td>
</tr>
<tr>
<th colspan="2" align="center" scope="row"><p>
<input type="submit" name="enviar" id="enviar" value="Enviar Comentario" />
</p></th>
</tr>
</table>
</form>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur", "change"], minChars:3, maxChars:60});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur"], minChars:3, hint:"micorreo@gmail.com"});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {minChars:5, maxChars:500, validateOn:["blur"]});
</script>
</div>
</center>
</body>
</html>
Código CSS Formulario de Contacto
Sección de código CSS, puede incluirse interno o en archivo externo.#div2 {
border:4px inset purple;
padding:20px;
margin:20px 60px;
text-align:letf;
font-family:Arial;
}
div{
color:teal;
}
.lateral {
font-size: 18px;
background-color:silver;
}
Código PHP
Código del archivo contacto.php
<?php
$nombre = $_POST["nombre"];
$correo = $_POST["correo"];
$comentario = $_POST["comentario"];
$header = 'From: ' . $correo . "\r\n";
$header.= "Content-Type: text/plain";
echo "Nombre:". $nombre."<br>";
echo "Correo:". $correo."<br>";
echo "Comentario:". $comentario."<br>";
if(mail("pavillalta@ugb.edu.sv", "comentarios de:".$nombre, $comentario, $header)){
?>
<script type="text/javascript">
alert("Correo enviado");
document.location.href = "contacto.html";
</script>
<?php
}
?>
De nuevo por si arriba no lo vieron, este enlace es para descargar ejemplo y practicar....practicar...
https://googledrive.com/host/0BxfUn2LNLVPeUlMtZmJxbkxqT1U/ejemplo_formulario_contacto.zip
Desarrollo de sitios web con php, java script, html5, css, tiendas virtuales, manejadores de contenido cms, wordpress y joomla.
No hay comentarios.:
Publicar un comentario
Gracias por tu comentario