
Advanced Custom Fields widely known as ACF is a popular plugin among WordPress developers to create custom post types, and custom fields and easily manage them without many codes. While it primarily focuses on the backend, it also offers options to create frontend forms. In this article, we will explore how to create a frontend form in ACF to gather and display user-submitted data on your WordPress website.
Frontend forms allow users to submit the custom post type from the front end. For example: customers can create a WooCommerce product from the front end. By the way, if you’re a WooCommerce store owner, don’t forget to check out the WooCommerce Customer Journey Plugin.
Registering a Frontend Form in ACF
Let’s register the form on init
hook with acf_register_form()
add_action( 'acf/init', 'frontend_submission_form_register' );
/**
* Register a frontend submission form.
*
* @since 1.0.0
*/
function frontend_submission_form_register() {
// Check function exists.
if ( function_exists( 'acf_register_form' ) ) {
// Add 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' ),
)
);
}
}
The settings I’m using are:
- id – id of the form.
- post_id – new_post meaning that a new post will be created on form submission.
- new_post (post_type) – custom post type
- new_post (post_status) – draft
- post_title – true meaning that the title field to be appeared in the form
- post_content – true meaning that the content (WYSIWYG Editor) field to be appeared in the form
- field_groups – the field groups ids in an arry
- submit_value – Submit button text
- updated_message – Message after the form is submitted.
The post_title & post_content labels are by default “Title” & “Content” respectively. Here’s how to modify the title & content fields in ACF.
Creating a WordPress block to display a frontend form
Now that the form is created, we’ll need to add somewhere. While there are various ways to display the form. I’ll create a block to add the form anywhere you’d like to. For example: in templates, pages, posts, etc.
To do this, let’s create a block using acf_register_block()
in init
hook:
add_action( 'acf/init', 'acf_frontend_form_block_init' );
/**
* Register the ACF Frontend Form block.
*
* @since 1.0.0
*/
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 I’m using are:
'name'
: This sets a unique identifier for the block, named “acf-frontend-form-block.”'title'
: The display name of the block in the Gutenberg editor is “ACF Frontend Form.”'description'
: A brief description of the block, indicating it’s an “ACF Frontend Form block.”'render_callback'
: Specifies the PHP function responsible for rendering the block’s content on the website.'category'
: Determines the block’s category in the Gutenberg editor, placing it in “Formatting.”'icon'
: Defines the icon used to represent the block in the editor, set to a “menu” icon in this case. You can choose the icons from WordPress Dasicons
The render_callback is responsible for the contents of the block. So, we’d have the function acf_frontend_form_block_render_callback
function acf_frontend_form_block_render_callback() {
acf_form_head();
acf_form('new-submission');
}
here acf_form_head()
is used to add necessary scripts and styles as well as form validation, processing and submission.
while acf_form( 'new-submission')
is used to display the actual form.
Remember “new-submission” is the id of the form we created in step 1.