Last active
April 12, 2021 17:40
-
-
Save plaidpowered/59bae33e35d7a90df7f6848f8d662ec4 to your computer and use it in GitHub Desktop.
WORK IN PROGRESS: Are you annoyed by all the scripts that are loaded into your page with Contact Form 7? Here is an incredibly simple, dependency-free (no jQuery) replacement that implements CF7's REST API to provide AJAX form validation and feedback.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Please note: This file uses ES6 code structures and likely needs to be transpiled for better browser support in your application. | |
* | |
* To use this, you'll need to enqueue it with a localized variable that passes the CF7 feedback endpoint, for example, | |
* | |
wp_register_script( 'cf7-ajax-script', 'path/to/cf7ajax.js', [], '0.1', true ); | |
wp_localize_script( 'cf7-ajax-script', 'cf7FeedbackEndpoint', get_rest_url( null, 'contact-form-7/v1/contact-forms/###/feedback' ) ); | |
wp_enqueue_script( 'cf7-ajax-script' ); | |
* And don't forget to disable the default CF7 scripts, | |
define( 'WPCF7_LOAD_JS', false ); | |
* Have fun! I will try to finish this soon and write a Medium article that better explains its usage. | |
*/ | |
( function( feedbackUrl ) { | |
"use strict"; | |
const intercerptCF7Form = ( e ) => { | |
let form = e.target || e.srcElement; | |
if ( ! form.classList.contains( 'wpcf7-form' ) ) { | |
return; | |
} | |
e.preventDefault(); | |
e.stopPropagation(); | |
let data = new FormData( form ); | |
if ( e.submitter && e.submitter.name && e.submitter.value ) { | |
data.set( e.submitter.name, e.submitter.value ); | |
} | |
let formXHR = new XMLHttpRequest(); | |
formXHR.myForm = form; | |
formXHR.addEventListener( 'load', doFormFeedback ); | |
formXHR.addEventListener( 'error', doFormError ); | |
formXHR.responseType = 'json'; | |
formXHR.open( 'POST', feedbackUrl.replace( '###', data.get( '_wpcf7' ) ) ); | |
formXHR.send( data ); | |
return false; | |
}; | |
const doFormFeedback = ( e ) => { | |
let { target } = e; | |
let { status, response, myForm } = target; | |
console.log( e ); | |
if ( status !== 200 ) { | |
response = { message: 'An error occurred submitting your form. Please try again.', status: 'error' }; | |
} | |
if ( response.message ) { | |
let output = myForm.querySelector( '.wpcf7-response-output' ); | |
output.innerHTML = response.message; | |
output.setAttribute( 'aria-hidden', 'false' ); | |
} | |
if ( response.status === 'mail_sent' ) { | |
// do something | |
myForm.classList.add( 'sent' ); | |
refreshValidation( myForm, [] ); | |
return; | |
} | |
if ( response.status === 'validation_failed' ) { | |
refreshValidation( myForm, response.invalid_fields ); | |
} | |
}; | |
const refreshValidation = ( form, invalidFields ) => { | |
let fields = form.querySelectorAll( '.wpcf7-form-control-wrap' ); | |
for( let field of fields ) { | |
field.classList.remove( 'wpcf7-not-valid' ); | |
let message = field.querySelector( '.wpcf7-not-valid-tip' ); | |
if ( message ) { | |
field.removeChild( message ); | |
} | |
} | |
for( let field of invalidFields ) { | |
let into = form.querySelector( field.into ); | |
if ( ! into ) { | |
continue; | |
} | |
into.classList.add( 'wpcf7-not-valid' ); | |
let message = document.createElement( 'span' ); | |
message.classList.add( 'wpcf7-not-valid-tip' ); | |
message.setAttribute( 'aria-hidden', 'true' ); | |
message.innerHTML = field.message; | |
into.appendChild( message ); | |
} | |
}; | |
const doFormError = ( e ) => { | |
// todo: something. i told you it was WIP | |
}; | |
document.addEventListener( 'submit', intercerptCF7Form ); | |
} )( cf7FeedbackEndpoint ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment