🥽 Beta testers needed! Stay up to date with the latest news from CTRLS.DEV

CPT UI + Advanced Custom Fields + Front-end Data Collection Form

How to use CPT UI and ACF to setup a front-end form and collect user generated content.



Welcome back to another practical tutorial from our blog.

This time I will guide you on how to use the CPT UI and Advanced Custom Fields plugins to create a CPT, Custom Fields Group, and set up and collect user-generated data with a front-end form linked to both the CPT UI and ACF.

Are we ready to code? Let’s get started.

The Setup

First, we need to install and activate both CPT UI and Advanced Custom Fields plugins. The free versions are sufficient for this tutorial however if you want to have the full capability for each plugin you might want to take a look at their PRO versions.

So, in the first 2 screenshots (2-3), we create a CPT called Restaurants with taxonomy for our categories Cuisine.

Next, in the last 2 screenshots (4-5) we create and setup an Advanced Custom Field group again called Restaurants with several fields.

The one that I need to highlight is the Category (with type taxonomy) which we use to create a link between the group and the CPT Cuisine categories.

Subscribe to our Newsletter* if you find our content useful and would like to receive regular updates with the latest posts.

Note: Note what’s the ID for your ACF group, we will need this when we create and setup out front-end form.

Hint: (click on the thumbnails to preview larger images)

The Back-end

Once we have our setup all cleared we are ready to add some data to our WordPress admin back-end area.

First, we need to create an Add Restaurants page and assign a template page where we will have the code for our front-end form (see code below).

Next in screenshot 2 and 3 we add some default Cuisine categories and also you preview the ACF group form in the backend.

Hint: (click on the thumbnails to preview larger images)

In our add-restaurant.php template, there are a couple of things I need to highlight out.

  • Be sure to add acf_form_head() before the get_header() and acf_enqueue_uploader() before the get_footer() functions.
  • inside the while loop we insert the add_form() function to display our ACF group on the front-end. Add the ID of your ACF Group in my case it is 4.
  • As you see the post_status is set as a draft, this will not publish the entry automatically on submission but an Editor/Administrator must approve it manually before it goes up live.

Note: As you could already see I am using the default TwentyTwenty theme for this tutorial but the same can be applied to any other custom or open-source theme.

In addition, if you add the following action with acf/form_submit hook inside your theme functions.php your custom Post title will be updated after the front-end form submission to the same name as the Business Name.

<?php
  add_action('acf/submit_form', function($form, $post_id) {
    wp_update_post(array(
      'ID' => $post_id,
      'post_title' => get_field('business_name', $post_id),
   ));
  }, 10, 2);

You could use the same approach if you want to add additional data or link your CPT entry to another part of your WordPress setup.

For, example if you want to add a date or time added, or keep track of the IP address or location of the submitter.

The Front-end

Now, we have everything set up on the backend. The last thing we need to do is create a single page for our CPT/ACF restaurant entry and to test and see if everything is working as it should.

You can read more about WordPress Template Hierarchy here but to display a singular CPT entry we need to name our file in the following format {single-custom_post_type_slug.php}.

In our case, it would be single-restarutants.php.

Note: Put this file in your theme main folder.

Then we are ready to display our Restaurant content. Take a look at the get_field() function if you have any questions or the code above is not clear for you.

And we are all good, we have the setup and architecture, we have the front-end form to collect data and last we have a single page to display this content after revision by an Administrator/Editor.

Hint: (click on the thumbnails to preview larger images)

What’s Next?

These are pretty much all the basic steps you need to follow if you want to utilize the CPT UI and Advanced Custom Fields plugins.

Moreover, you may want to have another page with all the entries (either on the same page where the front-end form is or create a separate page) as a directory.

Also, adding pagination, taxonomy, search, or sorting filters would be another feature you might want to consider as a part of your directory page.

Hope that was useful and you could incorporate it in you next project.

‘Til the next one.

Resources

* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!

Related Content

Create Gutenberg Blocks with ACF 5.8+ PRO

How to register and customize Gutenberg blocks with the Advanced Custom Fields plugin (no JavaScript needed)

READ MORE...

How to Use WP-CLI and Create WordPress Child Themes

Quickly and easily generate and initialize child themes using WP-CLI.

READ MORE...

Adding License Key Feature to Your Premium WordPress Theme or Plugin (1/3)

In this three-part tutorial, I will show you how you can set up, create and add license key functionality with authentication for your premium theme or plugin.

READ MORE...

Leave a Reply

Your email address will not be published. Required fields are marked *

Adding License Key Feature to Your Premium WordPress Theme or Plugin (2/3)

Thank you for reading our content. Use the buttons below to spread the love and share Adding License Key Feature to Your Premium WordPress Theme or Plugin (1/3) with your followers.