Formulario de Contacto HTML, JavaScrip y CSS - Blog de Tecnologia, Ingenieria en Sistemas

Novedades

sábado, 25 de febrero de 2012

Formulario de Contacto HTML, JavaScrip y CSS

Ejemplo en ejecución:


https://googledrive.com/host/0BxfUn2LNLVPebTNaNk96cVJYV00/contacto.html

Enlace para descargar ejemplo:

https://googledrive.com/host/0BxfUn2LNLVPeUlMtZmJxbkxqT1U/ejemplo_formulario_contacto.zip


Código 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

#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


<?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
}
?>


Enlace para descargar ejemplo:

https://googledrive.com/host/0BxfUn2LNLVPeUlMtZmJxbkxqT1U/ejemplo_formulario_contacto.zip

 

No hay comentarios:

Publicar un comentario

Gracias por su comentario