Create Amazing ACF Frontend Forms: A Powerful Step-by-Step Guide

ACF Frontend Forms: Are you looking to enhance user interaction on your WordPress website by allowing them to submit content directly from the frontend? Then you’ve come to the right place! With the powerful Advanced Custom Fields (ACF) plugin, creating ACF Frontend Forms is not only possible but surprisingly straightforward using the acf_form() function. This guide will walk you through the process, empowering your users to contribute content without ever touching the WordPress backend.

Why Use ACF Frontend Forms?

Imagine a directory website where users can submit their own listings, a community portal where members can share events, or a review site where visitors can post their experiences. These scenarios all benefit immensely from ACF Frontend Forms. They streamline the content submission process, making it intuitive and accessible for your audience, while keeping your backend clean and secure.

Step 1: Setting Up Your Custom Post Type and Fields

Before we dive into the acf_form() function, you’ll need a custom post type to store your user-submitted content and an ACF field group associated with it.

For example, let’s create a “User Story” custom post type and add some fields like “Story Title,” “Story Content,” and “Author Name.”

You can register a custom post type using a plugin like ACF itself or Custom Post Type UI or by adding code to your theme’s functions.php file:

function pn_create_user_story_post_type() {
    register_post_type( 'user_story',
        array(
            'labels' => array(
                'name'          => __( 'User Stories', 'textdomain' ),
                'singular_name' => __( 'User Story', 'textdomain' )
            ),
            'public'        => true,
            'has_archive'   => true,
            'menu_icon'     => 'dashicons-groups',
            'supports'      => array( 'title', 'editor', 'thumbnail' ),
            'rewrite'       => array( 'slug' => 'user-stories' ),
        )
    );
}
add_action( 'init', 'pn_create_user_story_post_type' );

Next, create an ACF field group with your desired fields (e.g., a text field for “Author Name”) and assign it to your “User Story” post type.

Step 2: Creating the Frontend Form with acf_form()

Now for the core of our ACF Frontend Forms setup! We’ll use the acf_form() function to display the submission form on your chosen frontend page or post.

First, ensure ACF’s form functionality is loaded. Add this to your functions.php:

function pn_acf_init() {
    acf_update_setting('acf/forms', true);
}
add_action('acf/init', 'pn_acf_init');

Then, create a new page in WordPress (e.g., “Submit Your Story”) and switch to the “Text” editor. Here, you’ll add the following shortcode, which will call a function to render our ACF form:

[pn_acf_frontend_form]

Now, in your functions.php file, create the shortcode function:

function pn_render_frontend_form() {
    ob_start(); // Start output buffering

    if ( !is_user_logged_in() ) {
        echo '<p>Please log in to submit your story.</p>';
        return ob_get_clean();
    }

    acf_form_head(); // Important for ACF form functionality

    $form_settings = array(
        'post_id'       => 'new_post', // Creates a new post
        'new_post'      => array(
            'post_type'     => 'user_story', // Our custom post type
            'post_status'   => 'pending',    // Set status to pending for review
        ),
        'field_groups'  => array('group_xxxxxxxxxxxx'), // Replace with your ACF field group ID
        'submit_value'  => 'Submit Your Story',
        'updated_message' => 'Thanks for your submission! It is awaiting review.',
        'return'        => site_url('/user-stories/'), // Redirect after submission
        'html_before_fields' => '<p>Share your story with us!</p>',
    );

    acf_form( $form_settings );

    return ob_get_clean(); // Return the buffered content
}
add_shortcode('pn_acf_frontend_form', 'pn_render_frontend_form');

Important:

• Replace ‘group_xxxxxxxxxxxx‘ with the actual ID of your ACF field group. You can find this in the URL when editing your field group in the WordPress admin (e.g., post=123 where 123 is the ID).
• Adjust post_status as needed. pending is a good default for user-submitted content that requires review.
• The return parameter specifies where the user is redirected after successful submission.
• acf_form_head() is crucial and must be called before acf_form() to ensure all necessary scripts and styles are loaded.

Step 3: Styling Your Form

Out of the box, your ACF Frontend Forms might look a bit plain. You can style it using custom CSS in your theme’s style.css file or through a custom CSS plugin. ACF forms typically use standard HTML elements, making them easy to target.

For example:

.acf-form {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.acf-field label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.acf-field input[type="text"],
.acf-field textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.acf-submit input[type="submit"] {
    background-color: #007cba;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.acf-submit input[type="submit"]:hover {
    background-color: #005f8f;
}

Conclusion

By following these steps, you’ve successfully implemented ACF Frontend Forms on your WordPress site. You’ve empowered your users to contribute content seamlessly, enhancing engagement and expanding your site’s capabilities. Remember to thoroughly test your forms and adjust settings like post_status and return URLs to fit your specific workflow. Enjoy the power of user-generated content!

Here is a visual representation of how the sample code outputs the form in the frontend: