How to Display User-Submitted Content in a WordPress Front-End Post Table

Accepting and displaying user-submitted content on your site (for example in a WordPress front-end post table) is a great way to generate user engagement. There are tons of ways you can accept and use user-submitted content to grow your business, boost conversions, or engage visitors.

For example, if you can encourage visitors to submit events, get listed in your member directory, or submit documents to your document library. The possibilities are virtually endless!

In this article, we’ll show you how you can use Gravity Forms paired with the Posts Table Pro plugin to accept user-submitted content from visitors and display it in a WordPress front-end post table.

Collecting and Displaying User-Submitted Content in WordPress

If you’re running a website that has a large following, you might consider setting up a system that allows visitors to submit content to you. This is a great way to generate user engagement, build a community, and grow your brand.

Here are just some ideas for collecting user-submitted content:

Gravity Forms and Posts Table Pro make it easy for website owners to collect and display user-submitted content in a WordPress front-end post table. And, you can use the Advanced Permissions plugin to control who has access to your forms.

How to Display User-Submitted Content in a WordPress Front-End Post Table

In this section, we’ll explain how you can use Gravity Forms to collect user-submitted content and then use the Posts Table Pro plugin to display it in a WordPress front-end post table. For this tutorial, we’ll assume you already have both plugins installed and activated on your WordPress site.

Step #1: Collect User-Submitted Content

The first step is to use Gravity Forms to create a front-end form that users can submit content through. For this tutorial, we’ll create a form that lets users submit events.

Go to FormsNew Form from the WordPress admin panel.

Create a new form

Give the form a title and description and click the Create Form button.

Form in Gravity Forms form builder

You’ll be redirected to the Gravity Forms drag-and-drop form editor. Use the form fields on the right-hand side of the page to create your front-end form. It might look something like this:

Click the Update button to save changes and continue.

Create a new page in WordPress and use the Form block to add the new form to it. It should look something like this on the front-end:

Preview of form on the front-end

Your site’s visitors will be able to use this form to submit event details. You can use the Entry Automation plugin to automatically export your submissions whenever a new one is added. Here’s how:

Go to Settings Entry Automation from your form and click the Add New button. Give the task a name and select the On Form Submission task type.

Export submissions using Entry Automation

Next, set Automation Action to Export Entries. Finally, click the Update Settings button.

Entry Automation export settings

Configure the Export Settings by selecting a file type (CSV, JSON, or PDF), selecting a file naming convention, and selecting the fields you’d like to export.

Note: You can also use the Entry Automation plugin for GDRP compliance.

Click Update Settings to proceed.

Step #2: Store the Content as a WordPress Post

Whenever a user fills out and submits the form, the event details will be emailed to you, stored in the WordPress database, and exported as a CSV, JSON, or PDF file (depending on how you configured the Entry Automation plugin).

However, you’ll need a way to store the user-submitted content directly to a WordPress post or custom post type. This way, you can automatically display the event details in a WordPress front-end post table instead of doing it manually.

Store Content as a WordPress Post

The easiest way to store user-submitted content as a WordPress post is by using the Gravity Forms Post Fields. All you have to do is tweak your form to use the Post Fields instead of the Standard Fields.

Event form using Post fields

Following our example, we replaced:

Click the Update button to continue.

Store Content as a WordPress Custom Post Type

Another way to store content directly to WordPress is by creating a custom post type. You can do this using the Gravity Forms + Custom Post Types plugin. We recommend using the free Pods plugin to create a new custom post type in WordPress.

Following our example, you might create a custom post type called Event Submissions. You can then follow the step-by-step instructions provided on the plugin page to map the fields in your form to the custom post type.

Step #3: Display User-Submitted Content in a WordPress Front-End Post Table

Now that the user-submitted content is being saved directly to WordPress, the final step is to display in on the front-end. For this, we’ll use the Posts Table Pro plugin to create a WordPress front-end post table.

Head over to Settings Posts Table Pro from the WordPress admin panel and configure the following settings:

Set the Post type to post using the dropdown menu. If, however, you created a custom post type, use the dropdown menu to select the correct slug.

Posts Table Pro settings

Use the Columns option to set the columns you’d like to display in the WordPress front-end post table. For example, for our event listings site, we might want to display the event name, date, starting time, and description.

Feel free to configure Table loading, Sorting, and Table controls settings however you’d like based on the type of content you’re collecting and how you’d like to display it on the front-end.

Once you’re done, click the Save Changes button to continue.

Posts Table Pro shortcode in Gutenberg

Create a new page to display the WordPress front-end post table. Add the shortcode [posts_table] to a shortcode block and click the Publish… button. Your page should look something like this on the front-end:

Events listed in WordPress front-end post table

The Posts Table Pro plugin lets you display as many WordPress front-end post tables as you’d like. You can choose which content to display in each table based on category, taxonomy, custom fields, date, and more.

Bonus: Control Who Has Access to Your Form

Depending on the type of form you’re creating and the sort of user-submitted content you’re collecting, you might need to control who has access to your forms. The easiest way to do this is by using the Advanced Permissions plugin.

Go to Settings Permissions from your form and click the Click here to create your first permissions rule link.

Create a new Advanced Permissions rule

You can choose to restrict access to specific users or by user roles. Once you’ve set the Rule Target, simply enable the Capabilities you’d like to assign them.

Advanced Permissions capabilities

Start Accepting User-Submitted Content Today

The Gravity Forms plugin makes it easy to start accepting user-submitted content. Pair it with Posts Table Pro to display the user-submitted content in a WordPress front-end post table.

To take things to the next level, you can use Advanced Permissions to control who has access to your forms and Entry Automation to remain GDPR compliant and export entries to either a CSV, JSON, or PDF file.

Ready to start accepting user-submitted content? Get Posts Table Pro and Advanced Permissions today!