Hi Matt, thanks for answering.
I'm not a programmer and do not know javascript or php.
I looked at the comment that you say but I can not make it work.
I've been looking online and found a plugin to validate html5 forms but does nothing.
Is as follows:
http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.htmlI do not know as I have to do to make the form work well in Internet Explorer, I'm going crazy .. lol
I send my code to see if you can help me.
<!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=utf-8" />
<title>Kromweb</title>
<link rel="stylesheet" type="text/css" href="estilos/estilos.css"/>
<link href="img/favicon_kromweb.png" rel="shortcut icon"/>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="estilos_IE.css" />
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var messageDelay = 2000; // How long to display status messages (in milliseconds)
// Init the form once the document is ready
$( init );
// Initialize the form
function init() {
// Hide the form initially.
// Make submitForm() the form's submit handler.
// Position the form so it sits in the centre of the browser window.
$('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
// When the "Send us an email" link is clicked:
// 1. Fade the content out
// 2. Display the form
// 3. Move focus to the first field
// 4. Prevent the link being followed
$('a[href="#contactForm"]').click( function() {
$('#lista').fadeTo( 'slow', .2 );
$('#contactForm').fadeIn( 'slow', function() {
$('#senderName').focus();
} )
return false;
} );
// When the "Cancel" button is clicked, close the form
$('#cancel').click( function() {
$('#contactForm').fadeOut();
$('#lista').fadeTo( 'slow', 1 );
} );
// When the "Escape" key is pressed, close the form
$('#contactForm').keydown( function( event ) {
if ( event.which == 27 ) {
$('#contactForm').fadeOut();
$('#lista').fadeTo( 'slow', 1 );
}
} );
}
// Submit the form via Ajax
function submitForm() {
var contactForm = $(this);
// Are all the fields filled in?
if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
// No; display a warning message and return to the form
$('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
contactForm.fadeOut().delay(messageDelay).fadeIn();
} else {
// Yes; submit the form to the PHP script via Ajax
$('#sendingMessage').fadeIn();
contactForm.fadeOut();
$.ajax( {
url: contactForm.attr( 'action' ) + "?ajax=true",
type: contactForm.attr( 'method' ),
data: contactForm.serialize(),
success: submitFinished
} );
}
// Prevent the default form submission occurring
return false;
}
// Handle the Ajax response
function submitFinished( response ) {
response = $.trim( response );
$('#sendingMessage').fadeOut();
if ( response == "success" ) {
// Form submitted successfully:
// 1. Display the success message
// 2. Clear the form fields
// 3. Fade the content back in
$('#successMessage').fadeIn().delay(messageDelay).fadeOut();
$('#senderName').val( "" );
$('#senderEmail').val( "" );
$('#message').val( "" );
$('#lista').delay(messageDelay+500).fadeTo( 'slow', 1 );
} else {
// Form submission failed: Display the failure message,
// then redisplay the form
$('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
$('#contactForm').delay(messageDelay+500).fadeIn();
}
}
</script>
<!-- Some IE7 hacks and workarounds -->
<!--[if lt IE 8]>
<style>
/* IE7 needs the fields to be floated as well as the labels */
input, textarea {
float: right;
}
#formButtons {
clear: both;
}
/*
IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
The negative margins are half the element's width/height.
*/
#contactForm.positioned, .statusMessage {
left: 50%;
top: 50%;
}
#contactForm.positioned {
margin-left: -20em;
margin-top: -16.5em;
}
.statusMessage {
margin-left: -15em;
margin-top: -1em;
}
</style>
<![endif]-->
</head>
<body>
<div id="todo">
<div id="cabecera">
<div id="logo">
<a href="#"><img alt="Kromweb" src="img/logo_kromweb.jpg" title="Kromweb" width="559" height="145" border="0" /></a>
<h1>Titulo</h1>
<h2>Diseño Gráfico | Diseño Web | Publicidad | Merchandising</h2>
</div>
<div id="contacto">
<p ><span>(+34) 655 59 09 80</span></p>
<p> e-mail:<a href="#contactForm"> myname@myweb.com</a></p>
</div>
</div>
<!--LISTA-->
<div id="lista">
<ul class="miniaturas">
<li>
<a href="#">
<img class="min" src="img/chicas/1.jpg" alt="#" border="0"/>
<img class="max" src="img/grandes/1.jpg" alt="#" border="0"/>
</li>
</ul>
</div>
<!--FORMULARIO-->
<form id="contactForm" action="processForm.php" method="post" >
<h2>Mándenos un correo...</h2>
<ul>
<li>
<label for="senderName">Nombre</label>
<input type="text" name="senderName" id="senderName" placeholder="Por favor, escriba su nombre" maxlength="40" required="" />
</li>
<li>
<label for="senderEmail">Correo electrónico</label>
<input type="email" name="senderEmail" id="senderEmail" placeholder="Por favor, escriba su Email" maxlength="50" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required="" />
</li>
<li>
<label for="message" style="padding-top: .5em;">Mensaje</label>
<textarea name="message" id="message" placeholder="Por favor, escriba su mensaje" cols="80" rows="10" maxlength="10000" required=""></textarea>
</li>
</ul>
<div id="formButtons">
<input type="submit" id="sendMessage" name="sendMessage" value="Enviar Email" />
<input type="button" id="cancel" name="cancel" value="Cancelar" />
</div>
</form>
<div id="sendingMessage" class="statusMessage"><p>Enviando su correo. Por favor, espere...</p></div>
<div id="successMessage" class="statusMessage"><p>¡¡Gracias por enviar su mensaje!!. Le responderemos lo antes posible.</p></div>
<div id="failureMessage" class="statusMessage"><p>Ha habido un problema al enviar su mensaje. Por favor, inténtelo de nuevo.</p></div>
<div id="incompleteMessage" class="statusMessage"><p>Por favor, complete todos los campos del formulario antes de enviarlo.</p></div>
</div>
</body>
</html>
<?php
// Define some constants
define( "RECIPIENT_NAME", "Name" );
define( "RECIPIENT_EMAIL", "
kromweb@kromweb.com" );
define( "EMAIL_SUBJECT", "Asunto del Mensaje" );
// Read the form values
$success = false;
$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";
// If all values exist, send the email
if ( $senderName && $senderEmail && $message ) {
$recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
$headers = "From: " . $senderName . " <" . $senderEmail . ">";
$success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
}
// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
echo $success ? "success" : "error";
} else {
?>
<html>
<head>
<title>Thanks!</title>
</head>
<body>
<?php if ( $success ) echo "<p>Gracias por enviar su mensaje. Le responderemos lo antes posible.</p>" ?>
<?php if ( !$success ) echo "<p>Ha habido un problema al enviar su mensaje. Por favor, inténtelo de nuevo.</p>" ?>
<p>Pulse atrás en el navegador para volver a la página anterior.</p>
</body>
</html>
<?php
}
?>
Thank you very much.
[Edited by vassilij on 20-May-12 16:54]
hope u understand that.... 
