How to load ACF Form acf_form() using a shortcode

An introduction about ACF

Advanced Custom Fields (ACF) is a powerful WordPress plugin that enhances the content management capabilities of your website by allowing you to create and manage custom fields with ease. It enables developers to add additional metadata to posts, pages, and custom post types, making it possible to build highly customized and dynamic websites without sweating too much. With a wide range of field types and flexible options, ACF simplifies the process of tailoring the WordPress backend to suit specific project requirements, making it an indispensable tool for both developers and content creators.

Click here to visit their official website for more details

Download the free version of ACF from WordPress plugin repository

ACF Forms

Reasons why we love this feature and how it makes our lives easy are listed below

• We do not need to recreate a form matching the ACF fields we created in the backend
• We do not need to work on the logic for saving those data into the correct ACF fields using our code.
• We do not need to work on the conditional logic if applied in the backend of the ACF field settings.
• All we need to do is just show the ACF form properly with all the necessary settings in the front end.

Click here to check the official documentation on acf_form() function and all its options.

Shortcodes and ACF Forms

There will be a situation where we might want to show an ACF form inside a page builder or a part of a page etc.. In that case, we can instruct the WordPress to load the ACF form using a shortcode.

In your theme’s functions.php or in your plugin add the following code to create a shortcode to show the ACF form.

<?php
/* Shortcode to show feedback ACF form */
add_shortcode('feedback-form','feedback_form_callback');
function feedback_form_callback( $atts ) {
    ob_start(); //start buffering
    ?>
    <div class="feedback-form-wrapper">
        <?php
            // ACF form options for new feedback submission
            $options = array(
                'post_id'               => 'new_post',
                'new_post'              => array(
                    'post_type'         => 'feedback',
                    'post_status'       => 'publish',
                ),
                'post_title'            => true,
                'submit_value'          => __("Submit Feedback", 'acf'),
                'updated_message'       => __("Feedback submitted successfully", 'acf'),
                'html_updated_message'  => '<div id="message" class="updated success-message"><p>%s</p></div>'
            );

            // ACF function to show the form
            acf_form( $options );
        ?>
    </div>
    <?php
    $html = ob_get_contents(); //get your content
    ob_end_clean(); //clean echoed html code
    return $html;
}

ACF form needs acf_form_head() to load before the header function is called. So, we need to instruct WordPress to load this function before the header. Let’s just say if you are using this shortcode in /submit-feedback page in your website. Then you need to add the following hook.

<?php
// Load ACF header function before theme header. Load only in the necessary pages.
add_action( 'wp', 'load_acf_header_function' );
function load_acf_header_function(){

    // Load ACF styles in pages where we use ACF forms
    if( is_page('submit-feedback') ){
        acf_form_head();
    }
}

Now, you can load your ACF form anywhere in your frontend using shortcodes. Just remember to add those pages in the above hook, so WordPress will load the ACF form header function on those pages for you.

Happy coding!!