Primero que todo te felicito por ser maquetadora.... CSS ha sido para mi siempre un imposible... lo odio profundamente jejeje
Segundo, SI se muestra el mensaje que tu quieres lo que pasa es que lo hace e inmediatamente (cuestion de milisegundos) se produce la redireccion con el envio de los datos a la pagina que tu especificas en action="..." y por eso no ves nada :)
Fijate que para eso normalmente se usa alert()
Código Javascript
:
Ver original<html>
<head>
<script language="JavaScript">
function message(){
document.getElementById("demo").innerHTML = "Hemos recibido tu mensaje correctamente.<br />En breve nos pondremos en contacto contigo";
alert("Tu formulario ha sido enviado!");
}
</script>
</head>
<body>
<form action="#" id="consultanos" autocomplete="on" method="post" target="_self" onSubmit="message">
<label>nombre *</label><br />
<input type="text" class="datos" required /><br />
<label>apellidos *</label><br />
<input type="text" class="datos" required /><br />
<label>población</label><br />
<input type="text" class="datos" /><br />
<label>email *</label><br />
<input type="email" class="datos" required /><br />
<label>asunto</label><br />
<input type="text" class="datos" /><br />
<label>consulta *</label><br />
<textarea id="cuerpo" required ></textarea>
<br />
<br />
<input type="submit" id="botonenvio" value="enviar" onclick="message();">
<p id="demo"></p>
</body>
</html>
Prueba y veras