Advanced Custom Fields, popularly known as ACF, is a widely-used plugin among WordPress developers for effortlessly creating custom post types and fields, facilitating efficient management without extensive coding. Although ACF primarily emphasizes backend functionality, it also offers options to create frontend forms. In this article, we will delve into the process of creating a frontend form in ACF to gather and display user-submitted data on your WordPress website.

Registering a Frontend Form in ACF

To initiate the frontend form, we start by registering it using the ‘acf/init’ hook with the function acf_register_form().

add_action( 'acf/init', 'frontend_submission_form_register' );

function frontend_submission_form_register() {
    // Check if the function exists.
    if ( function_exists( 'acf_register_form' ) ) {
        // Add a new form.
        acf_register_form(
            array(
                'id'              => 'new-submission',
                'post_id'         => 'new_post',
                'new_post'        => array(
                    'post_type'   => 'site',
                    'post_status' => 'draft',
                ),
                'post_title'      => true,
                'post_content'    => true,
                'field_groups'    => array( 'group_64db31437c759' ),
                'submit_value'    => __( 'Submit', 'acf' ),
                'updated_message' => __( 'Form Submitted.', 'acf' ),
            )
        );
    }
}

In this setup, we define essential settings such as:

  • id: The identifier for the form.
  • post_id: The ‘new_post’ value signifies that a new post will be created upon form submission.
  • new_post (post_type): Specifies the custom post type.
  • new_post (post_status): Sets the post status to ‘draft’.
  • post_title & post_content: Allows inclusion of title and content fields in the form.
  • field_groups: Specifies the field group IDs in an array.
  • submit_value: Defines the text for the submit button.
  • updated_message: Message displayed after the form is submitted.

Creating a WordPress Block for Displaying the Frontend Form

Now that the form is registered, we need a way to display it. One effective method is by creating a block using acf_register_block() within the ‘init’ hook.

add_action( 'acf/init', 'acf_frontend_form_block_init' );

function acf_frontend_form_block_init() {
    if ( function_exists( 'acf_register_block' ) ) {
        acf_register_block(
            array(
                'name'            => 'acf-frontend-form-block',
                'title'           => __( 'ACF Frontend Form' ),
                'description'     => __( 'ACF Frontend Form block.' ),
                'render_callback' => 'acf_frontend_form_block_render_callback',
                'category'        => 'formatting',
                'icon'            => 'menu'
            )
        );
    }
}

The block settings encompass:

  • name: An identifier for the block.
  • title: The display name of the block in the Gutenberg editor.
  • description: A brief description of the block’s purpose.
  • render_callback: Specifies the function responsible for rendering the block’s content.
  • category: Assigns the block to a specific category in the Gutenberg editor.
  • icon: Defines the icon representing the block in the editor.

The render_callback function, acf_frontend_form_block_render_callback, is responsible for the actual content of the block, incorporating the form display.

function acf_frontend_form_block_render_callback() {
    acf_form_head();
    acf_form('new-submission');
}

Here, acf_form_head() is utilized to add necessary scripts, styles, form validation, processing, and submission. The acf_form('new-submission') function displays the actual form, with ‘new-submission’ being the form’s specified identifier.

In conclusion, creating frontend forms with ACF offers a streamlined approach for users to submit data directly from the front end of your WordPress website. By employing the outlined steps, you can seamlessly integrate and display these forms as needed within your site’s content.