Form HTML5, PHP, CSS y cosicas raras..

deividz · #1 (**permalink**) 17/09/2012, 11:44

Antetodo, buenas tardes compañeros!

Tengo un problema que me lleva arrastrando un par de días y ya me tiene un poco mosca..
Me he metido de lleno a "trapichear" el HTML5 y ahora mismo, estoy en plena lucha con lo siguiente:
Quiero hacer un formulario, tengo todo mas o menos conseguido, me explico:

Tengo todos los campos, con sus input y demáses.. quedaría tal que así:

Código HTML:

<form id="ContactForm" action="contactform.php" method="post">
						<div>
							<div  class="wrapper">
								<span>*Nombre:</span>
								<input name="Nombre" type="text" required class="input" id="Nombre" maxlength="60">
							</div>
                            <div  class="wrapper">
								<span>Empresa:</span>
								<input name="Empresa" type="text" class="input" id="Empresa" maxlength="50">
							</div>
                            <div  class="wrapper">
								<span>*Motivo:</span>
								<input name="motivo" type="text" class="input" id="motivo" maxlength="50">
</div>
								<div  class="wrapper">
								<span>*Telefono</span>
								<input type="tel" id="geografico" name="geografico" placeholder="+34" size="3" value="+34" disabled>
<input type="tel" id="telefono" name="telefono" size="6" maxlength=9 required pattern="[0-9]{6}" class="input" >
							</div>
                            <div  class="wrapper">
								<span>E-mail</span>
								<input type="email" id="mail" name="mail" required class="input" >
							</div>
							<div  class="textarea_box">
								<span>Su mensaje:</span>
								<textarea id="consulta" name="consulta" cols="1" rows="1"></textarea>
							</div>
                            <div  id="aster"> * | Campos obligatorios
                              
                              <br>
                              <input type="checkbox" name="condiciones" required id="condiciones">
                              <label for="condiciones">Acepto las condiciones*</label>
                  </div>
							<a href="#" onClick="document.getElementById('ContactForm').submit()">Enviar</a>
							<a href="#" onClick="document.getElementById('ContactForm').reset()">Limpiar</a>
						</div>
					</form>

El archivo contactform.php que es el que envía el email queda tal que así:

Código PHP:

  <?php  
 
//Correo de destino; donde se enviará el correo. 
$correoDestino = "[email protected]"; 
 
 
//Variables.  
 
$Nombre = $_POST['Nombre']; 
$Empresa = $_POST['Empresa']; 
$motivo = $_POST['motivo']; 
$telefono = $_POST['telefono'];  
$mail = $_POST['mail'];  
$consulta = $_POST['consulta'];  
$fecha = time (); 
$fechaFormateada = date ("j/n/Y", $fecha); 
 
//Formateo el asunto del correo 
$asunto = "Contacto WEB_$Nombre; motivo"; 
 
//Cuerpo del email que se te enviará.  
  
$cuerpo = "Enviado por: " . $Nombre . "\n, ".  
$cuerpo .= "Empresa: " .$Empresa . "\n "; 
$cuerpo .= "Motivo: " .$motivo . "\n "; 
$cuerpo .= "Telefono de contacto:" .$telefono . "\n"; 
$cuerpo .= "E-mail: " .$mail . "\n"; 
$cuerpo .= "Comentario:" .$consulta . " \n "; 
// Envío el mensaje 
mail ( $correoDestino, $asunto, $cuerpo, $textoEmisor); 
 
 
//lo otro 
 
$mail_status = mail($mail_to); 
  
 ?> 
   <script language="javascript" type="text/javascript"> 
      alert('Gracias por enviar el mensaje. Nos pondremos en contacto lo antes posible.'); 
      window.location = 'Contacta.html'; 
   </script> 
    
<?php

Y ahora os explico; actualmente, he conseguido que me llegue el email, PERO, el problema está en que si, se envía pero lo que no consigo es que no se pueda enviar el formulario sin que estén todos los campos correctamente rellenos.
Actualmente tengo el jquery: "jquery.html5form-1.5-min.js" con sus dos scripts:

Código HTML:

<script>
    $(document).ready(function(){
        $('#ContactForm').html5form();    
    });
</script>
<script>

    $('#myform').html5form({
        allBrowsers: true
    });

</script>

puestos en el archivo HTML donde se encuentra el form.
Funciona, se pone en rojo el textbox en señal de que está mal.. pero al darle al boton enviar se envía igualmente.

Tanto el form como el archivo "contactform.php" me los he sacado de la manga leyendo por internet y haciendo copy&paste de lo que más o menos iba entendiendo..

He mirado en 20.000 webs, tanto en español como en inglés, pero no me consigo salir.. soy un poco torpe.. a ver si me podeis ayudar compañeros!!!

Muchas gracias de antemano.

flashmax · #2 (**permalink**) 17/09/2012, 12:40

Te dejo un ejemplo haber si te sirve ..saludos!

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=utf-8" />
<title>Documento sin título</title>
<html>
<head>
<script type="text/javascript">
function validar() 
{
if (document.ContactForm.Nombre.value=="") // nombre del campo
{
alert("Debe ingresar su Nombre");
document.ContactForm.Nombre.focus();
return;
}
document.ContactForm.submit();
}
</script>
</head>

<body>
<div id="contenedor">
<form id="ContactForm" action="contactform.php" name="ContactForm" method="post">
						<div>
							<div  class="wrapper">
								<span>*Nombre:</span>
								<input name="Nombre" type="text" required class="input" id="Nombre" maxlength="60">
							</div>
                            <div  class="wrapper">
								<span>Empresa:</span>
								<input name="Empresa" type="text" class="input" id="Empresa" maxlength="50">
							</div>
                            <div  class="wrapper">
								<span>*Motivo:</span>
								<input name="motivo" type="text" class="input" id="motivo" maxlength="50">
</div>
								<div  class="wrapper">
								<span>*Telefono</span>
								<input type="tel" id="geografico" name="geografico" placeholder="+34" size="3" value="+34" disabled>
<input type="tel" id="telefono" name="telefono" size="6" maxlength=9 required pattern="[0-9]{6}" class="input" >
							</div>
                            <div  class="wrapper">
								<span>E-mail</span>
								<input type="email" id="mail" name="mail" required class="input" >
							</div>
							<div  class="textarea_box">
								<span>Su mensaje:</span>
								<textarea id="consulta" name="consulta" cols="1" rows="1"></textarea>
							</div>
                            <div  id="aster"> * | Campos obligatorios
                              
                              <br>
                              <input type="checkbox" name="condiciones" required id="condiciones">
                              <label for="condiciones">Acepto las condiciones*</label>
                  </div>
							<a href="javascript:validar();">Enviar</a>
							<a href="#" onClick="document.getElementById('ContactForm').reset()">Limpiar</a>
						</div>
					</form> 
</div>
</body>
</html>

deividz · #3 (**permalink**) 17/09/2012, 13:20

Nada compañero.. sigue igual..

flashmax · #4 (**permalink**) 17/09/2012, 13:51

Que es lo que sigue igual? no querías validar los campos el ejemplo que te di si no completas el nombre te da la alerta y no lo envía . o te estas refiriendo a otro tipo de validación de campos?

deividz · #5 (**permalink**) 18/09/2012, 02:20

Exactamente eso, que aún poniendo ese código, envía igualmente el form al email.. hay un punto que está mal mal. Pero no doy con el.

flashmax · #6 (**permalink**) 18/09/2012, 13:37

revisa si tienes esto:
<a href="javascript:validar();">Enviar</a>

<form id="ContactForm" action="contactform.php" name="ContactForm"

deividz · #7 (**permalink**) 19/09/2012, 07:11

OK, funciona perfecto compañero.. ahora el problema es que recibo el email con la información en blanco.. no guarda lo que se pone en el formulario...

(Alguien tiene una cuchilla para mis venas? xd)

flashmax · #8 (**permalink**) 19/09/2012, 10:00

Hola reviza si tienes el method="post"> en todo caso muestra todo el código de vuelta html y php. saludos!

deividz · #9 (**permalink**) 19/09/2012, 10:18

Sí lo tengo el metodo post.. :(

Código HTML:

<form id="ContactForm" action="contactform.php" method="post" name="ContactForm">
						<div>
							<div  class="wrapper">
								<span>*Nombre:</span>
								<input name="Nombre" type="text" required class="input" id="Nombre" maxlength="60">
							</div>
                            <div  class="wrapper">
								<span>Empresa:</span>
								<input name="Empresa" type="text" class="input" id="Empresa" maxlength="50">
							</div>
                            <div  class="wrapper">
								<span>*Motivo:</span>
								<input name="motivo" type="text" class="input" id="motivo" maxlength="50">
</div>
								<div  class="wrapper">
								<span>*Telefono</span>
								<input type="tel" id="geografico" name="geografico" placeholder="+34" size="3" value="+34" disabled>
<input type="tel" id="telefono" name="telefono" size="6" maxlength=9 required pattern="[0-9]{6}" class="input" >
							</div>
                            <div  class="wrapper">
								<span>E-mail</span>
								<input type="email" id="mail" name="mail" required class="input" >
							</div>
							<div  class="textarea_box">
								<span>Su mensaje:</span>
								<textarea id="consulta" name="consulta" cols="1" rows="1"></textarea>
							</div>
                            <div  id="aster"> * | Campos obligatorios
                              <br>
                                            </div>
							<p><a href="javascript:validar();" onClick="document.getElementById('ContactForm').submit()">Enviar</a>
						    <a href="#" onClick="document.getElementById('ContactForm').reset()">Limpiar</a></p>
</div>
					</form>

Y el php:

Código PHP:

  <?php  
 
//Correo de destino; donde se enviará el correo. 
$correoDestino = "[email protected]"; 
 
 
//Variables.  
 
$Nombre = $_POST['Nombre']; 
$Empresa = $_POST['Empresa']; 
$motivo = $_POST['motivo']; 
$telefono = $_POST['telefono'];  
$mail = $_POST['mail'];  
$consulta = $_POST['consulta'];  
$fecha = time (); 
$fechaFormateada = date ("j/n/Y", $fecha); 
 
//Formateo el asunto del correo 
$asunto = "Contacto WEB_$Nombre; $motivo"; 
 
//Cuerpo del email que se te enviará.  
  
$cuerpo = "Enviado por: " . $Nombre . "\n, ".  
$cuerpo .= "Empresa: " .$Empresa . "\n "; 
$cuerpo .= "Motivo: " .$motivo . "\n "; 
$cuerpo .= "Telefono de contacto:" .$telefono . "\n"; 
$cuerpo .= "E-mail: " .$mail . "\n"; 
$cuerpo .= "Comentario:" .$consulta . " \n "; 
 
// Envío el mensaje 
mail ( $correoDestino, $motivo); 
 
$mail_status = mail($mail_to); 
  
?> 
   <script language="javascript" type="text/javascript"> 
      alert('Su mensaje ha sido enviado. Nos pondremos en contacto lo antes posible.'); 
      window.location = 'Contacta.html'; 
   </script> 
<?php

tal cual... :(

flashmax · #10 (**permalink**) 19/09/2012, 14:28

tu codigo php tiene errores ,si quieres continuar con tu formulario abre un nuevo post en php pero te recomiendo que hagas uno nuevo con esta herramienta online ya que tienes la obsion de reCAPTCHA para evitar spam y muchas mas cosas, como validacion de campos.
Link:http://www.formmail-maker.com/generator.php

no te olvides de activar :Use more secure reCAPTCHA

anewryzm · #11 (**permalink**) 23/09/2012, 23:53

Aquí te dejo un código.
Te recomiendo estudiarlo.
Perdón por la pequeña explicación, pero creo que con unas leídas es suficiente.

Lo que hace el código es que al presionar el boton "Enviar" - (Se utiliza un botón osea --> input type="button" no un --> input type="submit") - El script valida el primer campo de nombre "nom" y analiza si está vacio.

Código Javascript:

Ver original...
if (form.nom.value==0)
    {
...

Y así sucesivamente con el resto de los campos.
Pero si te percatas, cada análisis contiene un "return false;" y esto es para que se detenga el script.

Al final se envía el formulario con un:

Código Javascript:

Ver original...
document.form.submit();
...

Código Javascript:

Ver originalfunction validar()
{
    var form =document.form;
    if (form.nom.value==0)
    {
        alert("ingrese el nombre");
        form.nom.value="";
        form.nom.focus();
        return false;
    }
    if (form.tel.value==0)
    {
        alert("ingrese el telefono");
        form.tel.value="";
        form.tel.focus();
        return false;
    }
    if (form.correo.value==0)
    {
        alert("ingrese el E-Mail");
        form.correo.value="";
        form.correo.focus();
        return false;
    }
    
    document.form.submit();
}

Espero te sirva de mucho.
Saludos.
Sígueme en Twitter: @Anewryzm