Advanced Custom Fields (ACF) Plugin Integration

A- A+

Starting with WPUF v3.0 you will be able to integrate WPUF custom fields with Advanced Custom Field & Advanced Custom Field Pro Plugin.

This documentation goes through the process in detail.

Create Post Form with Custom Fields

1. Create a Post Form with custom fields.

2. Change the names and choices of the fields as required.

3. Copy the shortcode from above in the Form Editor.

Publish the form from wp-admin→Pages.

4. Your user fills out and submits the form from the frontend.

User view of their submission:

The entries are tracked under wp-admin→Posts.

View without ACF

If your ACF plugin is deactivated or uninstalled, when you click open the entry, you can view the WPUF custom fields. This is without the ACF integration view.

Configuring ACF integration

1. Install the free version of ACF (Advanced Custom Fields) plugin from wp-admin→Plugins→Add New→Search for Advanced Custom Fields plugin.

2. Activate the plugin after installation.

3. When you activate, you will be asked to select how you want it to work with WPUF.

  • Compatible: If you select the Compatible button, it will only make upcoming fields compatible, but will not change the existing ones.
  • Compatible & Migrate: If you select the Compatible & Migrate button, it will update both existing and upcoming custom fields and make it compatible with ACF.
  • No Thanks: If you choose to forego during activation, you can later navigate to wp-admin→User Frontend→Settings→General Options. From here, scroll down to ACF Compatibility and select the option Yes to make WPUF custom fields data compatible with Advanced Custom Fields.

4. For this documentation purpose, we are selecting Compatibility & Migrate.

5. After activating ACF plugin, navigate to wp-admin→Custom Fields→Add New.

6. Set the name of the Field Group. And most importantly, select Post Type properly.

7. Click on Add Field to get started.

8. Now integrate the fields of your WPUF post form with ACF fields.

9. Enter the exact meta key of the field you are integrating into Field Name.

You will find the meta key in the Form Editor page of the Post Form you are integrating. Click on Edit on the custom field you are trying to integrate. You can now view the meta key on the right-hand-side of your screen.

6. Select the type of custom field from Field Type e.g. check-box, drop-down, radio button, multi-select, etc.

Make sure that you enter the Field Name and Field Type correctly.

7. Enter the exact values of the WPUF custom fields under Choices.

You can find the values when you click Edit on the custom field you are trying to integrate with ACF.

Enable the check-box Show Values to find the values of all the options.

Keep in mind to enter the Field Name (meta key), Field Type, and the Choices (values) correctly in order to properly integrate your WPUF form with ACF, as shown below:

Similarly, add the other custom fields of your WPUF form that you want to integrate with ACF plugin.

8. When you are done configuring the fields, click on Publish the Field Group.

9. You can add more fields if you want to even after publishing.

View after ACF Integration

After integration, you can now view the user's submissions in ACF format:

Note: When the user submits a form from the frontend then they will be able to view the data from the custom field on the post/Custom post.

The integration would work the same way not just for existing fields, but also new ones. Create a new post form and work your way in the same way.

Admins can also change the choices from the dashboard by editing the user's entry. And the user will be able to see the changed submissions from the frontend.

This completes the configuration for WPUF-ACF lite and Pro plugin integration.

WPUF ACF Pro Plugin Repeater Field

Note: The repeater field of ACF pro is not compatible with WPUF.

Hope this documentation on Advanced Custom Field integration with the latest version of WP User Frontend was helpful.