Hi there,
I’m using acf_form()
on the front end and after submission, the form displays the ‘updated_message’ text. What I would like to know is how to fire JavaScript to close a modal, after the form is sent, and specifically, when the form actually renders as sent (i.e. showing the ‘updated_message’ text) and not merely using ajaxComplete()
As well, I would also like to mark Google Analytics goals only when an an ACF form sends successfully.
Does anyone know how this might be accomplished?
Thanks in advance
Hi @ryandorn
I’m not sure I understand your question, so forgive me if I’m wrong. The acf_form() function as default will add a GET parameter ‘?updated=true’ when the submission is succeeded. That way you can check this parameter and add the script if it exists like this:
if( isset($_GET['updated']) && $_GET['updated'] == 'true' ) {
// Your code here
}
If that’s not what you want, could you please explain it to me again?
Thanks 🙂
Hi James,
Sorry for the super-delayed response; got a bit caught up with stuff 🙂
I think maybe it might be useful to explain the scenario.
What I would like to accomplish on a high level: Trigger JavaScript only when an acf_form() (front-end) is sent without error.
A specific scenario:
Below is a boilerplate example of a script that I’d normally run using WP AJAX:
function do_stuff_after_acf_form_submit_success() {
var ajax_url = 'ajax_my_params.ajax_url';
$.ajax({
type: 'POST',
url: ajax_url,
data: {
action: 'my_action',
},
beforeSend: function (){
// Stuff
},
success: function(data){
// This is the part that I want to access, i.e. if a front-end acf_form() sends with success, do stuff
ga('send', 'event', 'Videos', 'play', 'Fall Campaign'); // Example GA Event
},
error: function(){
// Error
}
});
};
For marking events/conversions in analytics, older-school methods would entail sending a user to something like a thank you page, for example (using acf_form):
$_POST['return'] = get_home_url() . 'thanks/';
However, I want to trigger a GA event (or whatever JS function) via the ACF Form send success…ie via JS/AJAX.
I hope this makes sense and I’d be happy to clarify further if needed.
Best,
Ryan
Hi @ryandorn
I’m afraid acf_form() is designed to redirect the user after the form is successfully submitted. If you need to do it using AJAX, then you need to create a handler to handle the submitted data. This page should give you more idea about it: https://codex.wordpress.org/AJAX_in_Plugins.
In the custom handler, you can use the update_field() function to add the value to the post.
I hope this makes sense 🙂
This is an older post but it came up in my searching for an answer to this problem, so here is my solution:
if ( 'undefined' !== typeof acf ) {
acf.add_filter( 'validation_complete', function( json, $form ) {
if ( json.valid && ! json.errors ) {
// Do what you need to do here.
// json will hold the current validation status. $form will let you access the form elements on the page if needed
}
return json;
});
}
This solution probably requires ACF 5+
The topic ‘ACF Form + JS After Post Submission’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.