Hola
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 -->
El Javascript es esto de aquí.
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;
}
}
});
}
}
El tema es que quiero trackear con analytics el envio de este formulario, al no tener una ventana de confirmación la idea es hacerlo con eventos.
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:
_gaq.push(['_trackEvent','formulario_contacto','enviar','ok']);
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.
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;
}
}
});
}
}