Contact Form 7 jQuery custom event triggers not working. WordPress
- SOLVED
I need this code to work.
<pre>
$(document).on('mailsent.wpcf7', function(event) {
console.log(event)
})
</pre>
or something similar.
I have test that code on many scenarios and It's not working.
What I need is a modal to open when user click submit button, then whether the mail is sent or not, the modal should show the Alertmessage text from WPCF7.
Answers (3)
Francisco Javier Carazo Gil answers:
Could you show me an example to do some test in JS console?
Alvaro Rosado comments:
Well, actually that's it. The function should work itself, when user hit the send button the function should trigger an event.
Francisco Javier Carazo Gil comments:
Yes I know. Could you give me an example url?
Alvaro Rosado comments:
http://tallerarquitecturaconstruccion.com/contacto/
As I understand <pre>mailfailed.wpcf7</pre> should be triggered when hit send without any value in the form, so it return the error.
Francisco Javier Carazo Gil comments:
Ok, try better with this:
jQuery(".wpcf7").on('submit.wpcf', function(e){
console.log( "HOLA" );
});
Francisco Javier Carazo Gil comments:
Other events:
$(".wpcf7").on('invalid.wpcf7 spam.wpcf7 mailsent.wpcf7 mailfailed.wpcf7', function(e){
$('.form .wpcf7 img.ajax-loader').hide();
});
$(".wpcf7").on('invalid.wpcf7',function(e){
$('html, body').animate({
scrollTop: $(".wpcf7-not-valid").first().offset().top-30
}, 1000);
});
Alvaro Rosado comments:
Submit works. But the other two does not. I need the mailfailed.wpcf7 to work :(
Francisco Javier Carazo Gil comments:
Which version are you usign? Since 3.3 it should work: https://contactform7.com/2012/09/24/contact-form-7-33/
Alvaro Rosado comments:
WPCF7 4.6.1
WP 4.7.2
Francisco Javier Carazo Gil comments:
Ok I have been reading CF7 JS code and all this event will be triggered after AJAX call.
They are all called in .wpcf7AjaxSuccess function.
For example mailfailed.wpcf7 is triggered when the mail cannot be sent but not when there is no mail in the form.
So you have to use some validation way like:
$( ".wpcf7" ).submit(function( event ) {
if( '#wpcf7-f6-p4-o1 > form > div.row > div:nth-child(2) > span > input' ).val() == "")
return false;
event.preventDefault();
});
For example, a typical JS validation for any HTML form.
Francisco Javier Carazo Gil comments:
I wrote a comment and I didn't sent the notification, read the previous comment.
Alvaro Rosado comments:
Yes Javier you are correct. The first function was not what I need it.
This worked for me:
jQuery(document).on('wpcf7:submit', function () {
jQuery('#formAlerts').modal();
});
jQuery( document ).ajaxComplete(function( event,request, settings ) {
var alertMessage = $(".wpcf7-response-output").html();
jQuery(document).find("#formResponse").html(alertMessage);
function sample() {
if(jQuery('.wpcf7-form.invalid').length > 0){
}else{
jQuery('#formAlerts').modal('hide');
}
}
setTimeout(sample, 2000);
});
mod mi answers:
Hi, are you using this code exactly to test if something appears in the log? Because like this the "event" variable is undefined.
You should try this and test:
$(document).on('mailsent.wpcf7', function () {
console.log('mailsent.wpcf7 was triggered!');
});
And this with your modal function:
$(document).on('mailsent.wpcf7', function () {
//Your function here
});
Alvaro Rosado comments:
Yes, I know. The code is not showing anything in the console. It's not firing anything at all.
Rempty answers:
In the contact form 7 you can add in "Additional Settings" some triggers functions
on_submit: "console.log('Test');"
If you want to open a modalbox, first create a javascript function
function open_mymodal(){
jQuery('#myModal').open();
}
and in the Additional Setting fields use:
on_submit: "open_mymodal();"