Field Render

Display a button/submit input and define various customization. The button will natively submit the current form. A built-in Ajax setting allow to prevent the form submission and call a custom Ajax request instead.

Field Group

Field Settings

Setting nameDescription
Button typeThe button value
Button valueThe button type, Button or Submit
Button attributesThe button class and ID
Before HTMLHTML before the button
After HTMLHTML after the button
Ajax callEnable Ajax call on click

Field Value

The value cannot be retrieved as the field isn’t saved as custom meta.

Ajax Request: PHP

When enabling the “Ajax call” setting, the current form submission will be prevented and process an Ajax request instead. You can add your own PHP logic for that request using the acfe/fields/button hook. Usage example:

/*
 * Button: Ajax Request
 * 
 * @array        $field    Field array
 * @bool/string  $post_id  Current post ID
 */
 
action('acfe/fields/button',                  $field, $post_id);
action('acfe/fields/button/name=my_button',   $field, $post_id);
action('acfe/fields/button/key=field_abc123', $field, $post_id);
add_action('acfe/fields/button/name=my_button', 'my_acf_button_ajax', 10, 2);
function my_acf_button_ajax($field, $post_id){
    
    wp_send_json_success('Success!');
    
}

Ajax Request: JavaScript

The following Javascript hooks let you trigger specific actions depending on the Ajax request status. It is recommended to use the acf/input/admin_enqueue_scripts hook to enqueue a custom ACF JS file. See documentation.

Before Ajax Request

/*
 * Button: Before Ajax Request
 * 
 * @jQuery  $el   jQuery field element
 * @Json    data  Ajax data
 */
 
action('acfe/fields/button/before',                  $el, data);
action('acfe/fields/button/before/name=my_button',   $el, data);
action('acfe/fields/button/before/key=field_abc123', $el, data);
acf.addAction('acfe/fields/button/before/name=my_button', function($el, data){
    
    // do_something();
    
});

Ajax Success

/*
 * Button: Ajax Success
 * 
 * @jQuery  $el   jQuery field element
 * @Json    data  Ajax data
 */
 
action('acfe/fields/button/success',                  $el, data);
action('acfe/fields/button/success/name=my_button',   $el, data);
action('acfe/fields/button/success/key=field_abc123', $el, data);
acf.addAction('acfe/fields/button/success/name=my_button', function($el, data){
    
    // do_something();
    
});

Ajax Complete

/*
 * Button: Ajax Complete
 * 
 * @jQuery  $el   jQuery field element
 * @Json    data  Ajax data
 */
 
action('acfe/fields/button/complete',                  $el, data);
action('acfe/fields/button/complete/name=my_button',   $el, data);
action('acfe/fields/button/complete/key=field_abc123', $el, data);
acf.addAction('acfe/fields/button/complete/name=my_button', function($el, data){
    
    // do_something();
    
});