Validar formulario OnePage y seguimiento analytics Aviso, no tengo muchos conocimientos de JS.
Estoy con un formulario muy sencillito que valida que los campos se hayan cumplimentado.
El HTML es el siguiente.
Código HTML:
<!-- BEGIN CONTACT US CONTAINER --> <div class="contact-us no-padding-bottom col-sm-4 col-md-4 fadeInRight" data-delay="50"> <!-- BEGIN HEADING --> <h3 class="text-center">PIDE TU PRESUPUESTO</h3> <!-- END HEADING --> <!-- BEGIN THANK YOU MESSAGE --> <div id="contact_message" class="success-msg">Gracias por contactar.</div> <!-- END THANK YOU MESSAGE --> <div class="form"> <!-- BEGIN FORM --> <form id="contact_form" method="post" onSubmit="return false"> <div class="row"> <div class="col-md-6"> <input id="name" class="form-control" type="text" required="" placeholder="Nombre" name="name"> </div> <div class="col-md-6"> <input id="email" class="form-control" type="text" required="" placeholder="Email" name="email"> </div> </div> <div class="row"> <div class="col-md-6"> <input id="company" class="form-control" type="text" required="" placeholder="Empresa" name="company"> </div> <div class="col-md-6"> <input id="website" class="form-control" type="text" required="" placeholder="Web" name="website"> </div> </div> <div class="row"> <div class="col-md-12"> <div class="message"> <textarea id="message" class="form-control" required="" placeholder="Cuéntanos más sobre tu proyecto..." rows="6" name="message"></textarea> <input type="submit" value="Enviar" class="btn btn-orange" id="btn_submit" onClick="proceed();"> </div> </div> </div> </form> <!-- END FORM --> </div> <div class="clearfix"></div> </div> <!-- END CONTACT US CONTAINER -->
Código PHP:
function proceed(){
var name = document.getElementById("name");
var email = document.getElementById("email");
var company = document.getElementById("company");
var web = document.getElementById("website");
var msg = document.getElementById("message");
var errors = "";
if(name.value == "")
{
name.className = 'error';
return false;
}
else if(email.value == "")
{
email.className = 'error';
return false;
}
else if(checkmail(email.value)==false)
{
alert('Introduce un email válido.');
return false;
}
else if(company.value == "")
{
company.className = 'error';
return false;
}
else if(web.value == "")
{
web.className = 'error';
return false;
}
else if(msg.value == "")
{
msg.className = 'error';
return false;
}
else
{
$.ajax({
type: "POST",
url: "process.php",
data: $("#contact_form").serialize(),
success: function(msg)
{
//alert(msg);
if(msg){
$('#contact_form').fadeOut(1000);
$('#contact_message').fadeIn(2000);
document.getElementById("contact_message").innerHTML = "El email ha sido enviado.";
return true;
}
}
});
}
}
Una opción es añadir el seguimiento del evento en el onclick o no sé si tambien puedo colocar un onsubmit y poner el seguimiento que sería el siguiente
Código:
El handicap de colocarlo en el onclick o en el onsubmit si es posible, es que puede trackear cada click aunque el formulario no esté correctamente formulado, con lo que perderíamos la realidad de los formularios enviados._gaq.push(['_trackEvent','formulario_contacto','enviar','ok']);
Me gustaría saber si hay alguna forma de colocarl y activar el seguimiento dentro de la función proceed() y claro está debería de ser en el último if justo después de activar el mensaje de El email ha sido enviado.
¿Como podría ejecutar ese código aquí dentro?
Código PHP:
else
{
$.ajax({
type: "POST",
url: "process.php",
data: $("#contact_form").serialize(),
success: function(msg)
{
//alert(msg);
if(msg){
$('#contact_form').fadeOut(1000);
$('#contact_message').fadeIn(2000);
document.getElementById("contact_message").innerHTML = "El email ha sido enviado.";
***PONDRIA EL CODIGO AQUÍ*** ¿¿¿¿COMO LO HAGO???
return true;
}
}
});
}
}
