Código HTML:
<html>
<head>
<title>[ contactar ]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-bottom: 40px;
margin-left: 0px;
margin-top: 40px;
margin-right: 0px;
}
-->
</style>
<script language="javascript" type="text/javascript">
function $(id){
return document.getElementById(id);
}
function vacio(cadena)
{ // DECLARACION DE CONSTANTES
var blanco = " \n\t" + String.fromCharCode(13); // blancos
// DECLARACION DE VARIABLES
var i; // indice en cadena
var es_vacio; // cadena es vacio o no
for(i = 0, es_vacio = true; (i < cadena.length) && es_vacio; i++) // INICIO
es_vacio = blanco.indexOf(cadena.charAt(i)) != - 1;
return(es_vacio);
}
function valida_imagen(codigo){
var validacion=0;
if(vacio(f1.nombre.value))
{
document.f1.nombre.style.backgroundColor = "#f6c9dd";// color defecto #f6c9dd resaltado d5006e
document.f1.nombre.style.borderStyle = "solid";
document.f1.nombre.style.borderColor = "#d5006e";
document.f1.nombre.style.borderWidth = "1px";
$('errornombre').style.display='block';
validacion=1;
}
else
{
document.f1.nombre.style.backgroundColor = "#FFFFFF";// color defecto #f6c9dd resaltado d5006e
document.f1.nombre.style.borderStyle = "solid";
document.f1.nombre.style.borderColor = "#000000";
document.f1.nombre.style.borderWidth = "1px";
validacion=0;
}
if((vacio(f1.email.value)) || (document.f1.email.value.indexOf('@') == -1))
{
document.f1.email.style.backgroundColor = "#f6c9dd";// color defecto #f6c9dd resaltado d5006e
document.f1.email.style.borderStyle = "solid";
document.f1.email.style.borderColor = "#d5006e";
document.f1.email.style.borderWidth = "1px";
$('erroremail').style.display='block';
validacion=1;
}
else
{
document.f1.email.style.backgroundColor = "#FFFFFF";// color defecto #f6c9dd resaltado d5006e
document.f1.email.style.borderStyle = "solid";
document.f1.email.style.borderColor = "#000000";
document.f1.email.style.borderWidth = "1px";
}
if(vacio(f1.asunto.value))
{
document.f1.asunto.style.backgroundColor = "#f6c9dd";// color defecto #f6c9dd resaltado d5006e
document.f1.asunto.style.borderStyle = "solid";
document.f1.asunto.style.borderColor = "#d5006e";
document.f1.asunto.style.borderWidth = "1px";
$('errorasunto').style.display='block';
validacion=1;
}
else
{
document.f1.asunto.style.backgroundColor = "#FFFFFF";// color defecto #f6c9dd resaltado d5006e
document.f1.asunto.style.borderStyle = "solid";
document.f1.asunto.style.borderColor = "#000000";
document.f1.asunto.style.borderWidth = "1px";
}
if(vacio(f1.mensaje.value))
{
document.f1.mensaje.style.backgroundColor = "#f6c9dd";// color defecto #f6c9dd resaltado d5006e
document.f1.mensaje.style.borderStyle = "solid";
document.f1.mensaje.style.borderColor = "#d5006e";
document.f1.mensaje.style.borderWidth = "1px";
$('errormensaje').style.display='block';
validacion=1;
}
else
{
document.f1.mensaje.style.backgroundColor = "#FFFFFF";// color defecto #f6c9dd resaltado d5006e
document.f1.mensaje.style.borderStyle = "solid";
document.f1.mensaje.style.borderColor = "#000000";
document.f1.mensaje.style.borderWidth = "1px";
}
if(document.getElementById('seccion').value == "nulo")
{
document.f1.seccion.style.backgroundColor = "#f6c9dd";// color defecto #f6c9dd resaltado d5006e
document.f1.seccion.style.borderStyle = "solid";
document.f1.seccion.style.borderColor = "#d5006e";
document.f1.seccion.style.borderWidth = "1px";
$('errorseccion').style.display='block';
validacion=1;
}
else
{
document.f1.seccion.style.backgroundColor = "#FFFFFF";// color defecto #f6c9dd resaltado d5006e
document.f1.seccion.style.borderStyle = "solid";
document.f1.seccion.style.borderColor = "#000000";
document.f1.seccion.style.borderWidth = "1px";
}
if(validacion==1)
return false;
else
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="left" valign="top"><form name=f1 action="procesa.php" method="post" onSubmit="return valida_imagen(this)">
<table width="440" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="440" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-top:26px" width="82%" align="left" class="cssnegro"><strong class="css_gris">Nombre:</strong><span class="csslogo_naranja">*</span><br>
<input name="nombre" type="text" id="nombre" size="40" maxlength="45" onChange="$('errornombre').style.display='none'">
<div id="errornombre" style="display:none" class="css_rojo">Debe notificar su nombre</div></td>
</tr>
<tr>
<td style="padding-top:12px" align="left" class="cssnegro"><strong class="css_gris">E-Mail:</strong><span class="csslogo_naranja">*</span><br>
<input name="email" type="text" id="email" size="40" maxlength="45" onChange="$('erroremail').style.display='none'">
<div id="erroremail" style="display:none"class="css_rojo">Debe notificar un email válido</div></td>
</tr>
<tr>
<td style="padding-top:12px" align="left" class="cssnegro"><strong class="css_gris">Asunto:</strong><span class="csslogo_naranja">*</span><br>
<input name="asunto" type="text" id="asunto" size="40" maxlength="45" onChange="$('errorasunto').style.display='none'">
<div id="errorasunto" style="display:none" class="css_rojo">Debe notificar su asunto</div></td>
</tr>
<tr>
<td style="padding-top:12px" align="left" class="cssnegro"><strong class="css_gris">Mensaje:</strong><span class="csslogo_naranja">*</span><br>
<textarea name="mensaje" type="text" id="mensaje" size="40" maxlength="45" onChange="$('errormensaje').style.display='none'"></textarea>
<div id="errormensaje" style="display:none" class="css_rojo">Debe notificar su mensaje</div></td>
</tr>
<tr>
<td style="padding-top:15px" align="left" class="cssnegro"><span class="css_gris"><strong>Sección:</strong></span><br>
<select name="seccion" id="seccion" onChange="$('errorseccion').style.display='none'">
<option value="nulo" selected>Seleccione una sección</option>
<option value="Consulta sobre facturacion y/o precios">Consulta sobre facturación y/o precios</option>
<option value="Consulta de caracter general y/o comercial">Consulta de caracter general y/o comercial</option>
<option value="Ayuda para contratar un servicio en nuestra web">Ayuda para contratar un servicio en nuestra web</option>
<option value="Soporte tecnico sobre un servicio contratado">Soporte técnico sobre un servicio contratado</option>
<option value="Otras consultas">Otras consultas</option>
</select>
<div id="errorseccion" style="display:none" class="css_rojo">Debe elegir una seccion</div></td>
</tr>
<tr>
<td style="padding-top:26px" align="left"><input name="contacto" type="submit" value="Enviar">
<input type="hidden" name="codigo" id="codigo" value="<? echo $_SESSION['spamkey']; ?>"></td>
</tr>
<tr>
<td align="left" class="css_gris" style="padding-top:15px"><strong>Los campos con </strong><span class="csslogo_naranja">*</span><strong> son obligatorios. </strong></td>
</tr>
</table></td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>