Support

Account

Home Forums ACF PRO ACF Form + JS After Post Submission

Solving

ACF Form + JS After Post Submission

  • 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:

    • 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

  • 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+

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘ACF Form + JS After Post Submission’ is closed to new replies.