Reply To: ACF Form + JS After Post Submission

• Dorn Studio

• October 18, 2016 at 10:16 am

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:

• I have an ACF form in a modal on the front-end
• When a user submits the form and the form submission is successful, I would like to mark an ‘event’ in Google Analytics
• Potentially, I would like to execute other JS functions upon form completion, but I’m assuming the method would be the same regardless

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