Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CF7 Bulma Ajax-loader icon
/**
* when cf7 ajax-loader
* @param {[type]} form [description]
* @return {[type]} [description]
*/
wpcf7.submit = function( form ) {
if ( typeof window.FormData !== 'function' ) {
return;
}
var $form = $( form );
$( '.button.wpcf7-submit', $form ).addClass( 'is-loading' );
$( '[placeholder].placeheld', $form ).each( function( i, n ) {
$( n ).val( '' );
} );
wpcf7.clearResponse( $form );
var formData = new FormData( $form.get( 0 ) );
var detail = {
id: $form.closest( 'div.wpcf7' ).attr( 'id' ),
status: 'init',
inputs: [],
formData: formData
};
$.each( $form.serializeArray(), function( i, field ) {
if ( '_wpcf7' == field.name ) {
detail.contactFormId = field.value;
} else if ( '_wpcf7_version' == field.name ) {
detail.pluginVersion = field.value;
} else if ( '_wpcf7_locale' == field.name ) {
detail.contactFormLocale = field.value;
} else if ( '_wpcf7_unit_tag' == field.name ) {
detail.unitTag = field.value;
} else if ( '_wpcf7_container_post' == field.name ) {
detail.containerPostId = field.value;
} else if ( field.name.match( /^_wpcf7_\w+_free_text_/ ) ) {
var owner = field.name.replace( /^_wpcf7_\w+_free_text_/, '' );
detail.inputs.push( {
name: owner + '-free-text',
value: field.value
} );
} else if ( field.name.match( /^_/ ) ) {
// do nothing
} else {
detail.inputs.push( field );
}
} );
wpcf7.triggerEvent( $form.closest( 'div.wpcf7' ), 'beforesubmit', detail );
var ajaxSuccess = function( data, status, xhr, $form ) {
detail.id = $( data.into ).attr( 'id' );
detail.status = data.status;
detail.apiResponse = data;
var $message = $( '.wpcf7-response-output', $form );
switch ( data.status ) {
case 'validation_failed':
$.each( data.invalidFields, function( i, n ) {
$( n.into, $form ).each( function() {
wpcf7.notValidTip( this, n.message );
$( '.wpcf7-form-control', this ).addClass( 'wpcf7-not-valid' );
$( '[aria-invalid]', this ).attr( 'aria-invalid', 'true' );
} );
} );
$message.addClass( 'wpcf7-validation-errors' );
$form.addClass( 'invalid' );
wpcf7.triggerEvent( data.into, 'invalid', detail );
break;
case 'acceptance_missing':
$message.addClass( 'wpcf7-acceptance-missing' );
$form.addClass( 'unaccepted' );
wpcf7.triggerEvent( data.into, 'unaccepted', detail );
break;
case 'spam':
$message.addClass( 'wpcf7-spam-blocked' );
$form.addClass( 'spam' );
$( '[name="g-recaptcha-response"]', $form ).each( function() {
if ( '' === $( this ).val() ) {
var $recaptcha = $( this ).closest( '.wpcf7-form-control-wrap' );
wpcf7.notValidTip( $recaptcha, wpcf7.recaptcha.messages.empty );
}
} );
wpcf7.triggerEvent( data.into, 'spam', detail );
break;
case 'aborted':
$message.addClass( 'wpcf7-aborted' );
$form.addClass( 'aborted' );
wpcf7.triggerEvent( data.into, 'aborted', detail );
break;
case 'mail_sent':
$message.addClass( 'wpcf7-mail-sent-ok' );
$form.addClass( 'sent' );
wpcf7.triggerEvent( data.into, 'mailsent', detail );
break;
case 'mail_failed':
$message.addClass( 'wpcf7-mail-sent-ng' );
$form.addClass( 'failed' );
wpcf7.triggerEvent( data.into, 'mailfailed', detail );
break;
default:
var customStatusClass = 'custom-'
+ data.status.replace( /[^0-9a-z]+/i, '-' );
$message.addClass( 'wpcf7-' + customStatusClass );
$form.addClass( customStatusClass );
}
wpcf7.refill( $form, data );
wpcf7.triggerEvent( data.into, 'submit', detail );
if ( 'mail_sent' == data.status ) {
$form.each( function() {
this.reset();
} );
}
$form.find( '[placeholder].placeheld' ).each( function( i, n ) {
$( n ).val( $( n ).attr( 'placeholder' ) );
} );
$message.html( '' ).append( data.message ).slideDown( 'fast' );
$message.attr( 'role', 'alert' );
$( '.screen-reader-response', $form.closest( '.wpcf7' ) ).each( function() {
var $response = $( this );
$response.html( '' ).attr( 'role', '' ).append( data.message );
if ( data.invalidFields ) {
var $invalids = $( '<ul></ul>' );
$.each( data.invalidFields, function( i, n ) {
if ( n.idref ) {
var $li = $( '<li></li>' ).append( $( '<a></a>' ).attr( 'href', '#' + n.idref ).append( n.message ) );
} else {
var $li = $( '<li></li>' ).append( n.message );
}
$invalids.append( $li );
} );
$response.append( $invalids );
}
$response.attr( 'role', 'alert' ).focus();
} );
};
$.ajax( {
type: 'POST',
url: wpcf7.apiSettings.getRoute(
'/contact-forms/' + wpcf7.getId( $form ) + '/feedback' ),
data: formData,
dataType: 'json',
processData: false,
contentType: false
} ).done( function( data, status, xhr ) {
ajaxSuccess( data, status, xhr, $form );
$( '.button.wpcf7-submit', $form ).removeClass( 'is-loading' );
} ).fail( function( xhr, status, error ) {
var $e = $( '<div class="ajax-error"></div>' ).text( error.message );
$form.after( $e );
} );
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.