fbpx

AJAX-based form submission is now possible using Advanced Forms for ACF

We’ve had quite a few people ask for it and Fabian has done a fantastic job of adding AJAX support to ACF forms powered by the Advanced Forms WordPress plugin. This feature is available to both free and pro versions of the plugin as of version 1.8.0.

AJAX is support is easy to enable and there are a few hooks and filters you might find useful when leveraging the power of Advanced Forms Pro for ACF.

Enable AJAX on any form by simply defining the ajax property

Whether you are using the shortcode or the PHP function to load up your form, you can easily enable AJAX submissions. If using the shortcode, just add ajax="1" to your shortcode string and you’re done. e.g;

[advanced_form ajax="1"]

If you are using the PHP function, all you need to do is add 'ajax'=>true to the config array. e.g;

<?php
advanced_form( 'form_5f8f987654e0', [ 'ajax' => true ]);

Modify AJAX responses using PHP before they are sent to the browser

If you need to change the outcome depending on the values of the submitted form, then you can hook into the af/form/ajax/response filter and modify the response accordingly. You might do this if you need to redirect a user in some circumstances, show a different response message depending on submitted data, or even add you own data for use in a custom AJAX JavaScript callback.

Here is an example of redirecting a user when they provide a rating less than a certain value. In this example, you might redirect the user to a follow up form to collect more information or perhaps to some kind of special offer page.

<?php
add_filter( 'af/form/ajax/response', function ( $response, $form, $args ) {
if ( $form['key'] === 'form_5f8f987654e0' ) {
// If our 'star_rating' ACF field has a value less than 3, redirect
// the user to another page.
if ( af_get_field( 'star_rating' ) < 3 ) {
$response['type'] = 'redirect';
$response['redirect_url'] = 'https://example.com';
}
}
return $response;
}, 10, 3 );

Fire custom JavaScript handlers on successful AJAX submissions

When an ACF form is submitted via AJAX, a JavaScript hook is fired using the JavaScript API provided by Advanced Custom Fields. Using this hook, it is possible to run any custom JavaScript code you need after a form is submitted. You may wish to fire custom tracking scripts, open a modal window, replace the form with a custom markup block, and more. There are many possibilities at hand and the basic recipe you need for this looks like this:

jQuery(function ($) {
// Triggering any custom JavaScript.
acf.addAction('af/form/ajax/submission', function (data, form) {
if (form.key === 'form_5f8f987654e0') {
// …add custom handler code here…
}
});
});

Customise the success message on the fly

If you need to modify the success message using JS, this is easy to do as you can see in the following example:

jQuery(function ($) {
// Changing the success message.
acf.addAction('af/form/ajax/submission', function (data, form) {
if (form.key === 'form_5f8f987654e0') {
data.success_message = '<div style="background:green; color:white;">This is a new message!</div>'
}
});
});

Change a message to a redirect on the fly

Similar to the previous example, you may have a situation where you need to redirect somebody based on certain conditions, perhaps using custom data you’ve added while customising the AJAX response via PHP. Here’s an example of changing the AJAX behaviour so that it redirects the user:

jQuery(function ($) {
// Changing the response type to a redirect on the fly.
acf.addAction('af/form/ajax/submission', function (data, form) {
if (form.key === 'form_5f8f987654e0') {
data.type = 'redirect';
data.redirect_url = 'https://example.com';
}
});
});

Conclusion

With the added power of AJAX based submissions, Advanced Forms offers even more possibilities for faster user experiences. The hooks and filters give you, the developer, a whole lot of flexibility in how you craft your WordPress websites.

About the author

Phil Kurth is a web developer living in Melbourne, Australia. Phil has a long history of WordPress development and enjoys building tools to empower others in their web design/development practice.

When not working with the web, Phil is usually spending time with his two young sons or is out hiking through the Australian bush.

Good dev stuff, delivered.

Product news, tips, and other cool things we make.

We never share your data. Read our Privacy Policy

© 2021 Hookturn Digital. All rights reserved.