Additionally, is there a way to only have the plugin load for logged in users? I only have one form, which I’ve limited the visibility to logged in users only, but it still loads a bunch of assets in wp_footer (frontend-admin-min.css, dashicons.min.css, acf.global.min.css, acf-input.min.css) even when not logged in, which is unnecessary.
I’ve managed to work out solutions to both.
For the action on submit, I used MutationObserver to pick up on the addition of the success message.
document.addEventListener('DOMContentLoaded', function () {
var forms = document.querySelectorAll('.frontend-form');
for (var i = 0; i < forms.length; i++) {
(function(form) {
var observer = new MutationObserver(function(mutationsList) {
for (var j = 0; j < mutationsList.length; j++) {
var mutation = mutationsList[j];
if (mutation.addedNodes.length > 0) {
if (form.querySelector('.acf-notice.-success')) {
console.log('Success notice detected. Removing .unpublished class.');
form.classList.remove('unpublished');
observer.disconnect();
break;
}
}
}
});
observer.observe(form, { childList: true, subtree: true });
})(forms[i]);
}
});
and to remove the files loaded by the plugin when not required I added an action to functions.php
add_action('wp_enqueue_scripts', 'remove_frontendadmin_styles', 100);
function remove_frontendadmin_styles() {
if (!is_user_logged_in() && !is_admin()) {
wp_dequeue_style('dashicons');
wp_dequeue_style('acf-global-css');
wp_dequeue_style('acf-input-css');
wp_dequeue_style('fea-public-css');
wp_deregister_style('dashicons');
wp_deregister_style('acf-global-css');
wp_deregister_style('acf-input-css');
wp_deregister_style('fea-public-css');
}
}
Happy to hear of more elegant solutions if they exist though!
Hello @nathan-adams
I apologize for the late response. WE have been out of commision to due to holidays + strep throat, but we are now back online.
Here is an example code snippet that uses our js hook “frontend_form_success. I am actually using this in a project to update a live preview when the form is submitted succesfully. You can use console.log to inspect the parameters “data” and “form”
acf.addAction( 'frontend_form_success', function( data, form ) {
if( data.preview ){
//replace '.live-preview' with the preview
var preview = document.querySelectorAll('.live-preview');
preview.forEach(function(preview){
preview.innerHTML = data.preview;
});
//form is a jQuery object, so we need to get the first element to get the DOM element
form = form[0];
form.querySelector('input[name="_acf_status"]').value = '';
//
}
});
Just to clarify, data.preview is null by default, but you can use the php hook frontend_admin/form/submission_preview to generate one, like this:
add_filter( 'frontend_admin/form/submission_preview', 'form_preview', 10, 2 );
function form_preview( $preview, $form ) {
return '<h3>Preview Mode</h3>';
}
Thanks @shabti hope you’re feeling better now.
That’s much cleaner! I was able to adapt that to just this to remove the unpublished class. Working exactly as needed.
acf.addAction( 'frontend_form_success', function( data, form ) {
form.removeClass('unpublished');
});
Awesome. I am glad you are enjoying the plugin (;
