As the world's leading WordPress forms plugin, people use Gravity Forms in weird and wonderful ways. Today I'm going to show you how to use Gravity Forms to allow users to add information to your website and submit it to you. You'll learn how to automatically store the data as a WordPress post, WooCommerce product (or any other custom post type) and display the Gravity Forms entries in a table on the front end.
The end result will look something like this - a neat table listing your users' form submissions!
Sound a bit random? Well, you'd be surprised at just how many people contact us asking how to do this. Let's look at some examples.
Why display user-submitted information in the front end?
There are lots of reasons why you might want to let users submit information and then list it on your website:
- WordPress document library with user-submitted documents Lots of websites use a WordPress document library plugin to allow users to find and download documents. If you need a way for users to submit their own documents, then you can do this with Gravity Forms.
- WordPress member directory with user profiles If you're using a WordPress member directory plugin to list members or consultants in a table, then you might want to allow people to register and upload a profile. If you don't want to install a heavyweight membership or e-commerce plugin, then it can be simpler to use Gravity Forms for the member registration and profile upload.
- WordPress directory website If you're creating any type of directory, such as a business or local events directory, then it makes sense for users to submit listings. If you're trying to keep your website simple, then you can avoid installing a full directory theme or plugin by using Gravity Forms and a WordPress table plugin instead. You can even take payment via PayPal and hold submissions for moderation by the administrator before they're published!
- WooCommerce user-submitted products If you're using WooCommerce then you can let users submit products to sell in your store.
- User-submitted events If you're using a WordPress events plugin such as The Events Calendar, then your users can submit events to display on your website.
I'm sure there are also lots of reasons that I haven't come across yet. (I'd love to hear about your own use case in the comments below!) Whatever your reasons, I'm going to show you how to do it.
Case study - TV Production Contacts' Job Board
Gravity Forms makes the job board simple to manage. Hiring managers submit all the job details using the form. The user-submitted information is then approved before being automatically displayed in the sortable job board.
Keep reading to find out how to create your own form for users to submit information to your site.
What to expect from this tutorial
This tutorial will teach you how to add the following features to any WordPress website. Read it all, or skip straight to the sections you need:
- Use Gravity Forms to collect user-submitted information
- Store the information as a WordPress post or custom post type
- Display the user-submitted data in a table on the front end of your website
Step 1 - Use Gravity Forms to collect user-submitted information
The first step is to install the Gravity Forms WordPress plugin and create a form. Your visitors will use this to submit information to you. This is useful whether you want them to upload a document, member profile, business listing, upcoming event, or something else.
- First, buy Gravity Forms, download the plugin and install it on your WordPress website (Plugins > Add New).
- You'll see a 'Forms' link appear in the left of the WordPress Dashboard. Navigate to Forms > Add New.
- Enter a name for your form, then add all the fields. (If you haven't done this before, please see the official documentation.) If you want users to be able to upload documents via Gravity Forms, use the 'File Upload' field type.
- Click 'Update' to save your form.
- Next, create a page (Pages → Add New) and click the 'Add Form' button above the WordPress toolbar if you're using the Classic Editor, or use a Gutenberg block if you're using Gutenberg. Select the form you just created and insert it into the page. You can also add other content to the page:
- Finally, view the page and make sure you're happy with it.
Your user-submitted content page should look something like this:
Optional - hide and protect your Gravity Forms page
Some people use Gravity Forms to collect user-submitted content from specific people only. You can do this by protecting the page containing the form.
The simplest way to secure the Gravity Forms page is to password protect it. If you're using an SEO plugin (e.g. Yoast SEO), then you can also use this to noindex the page. This will ensure it is hidden from search engines.
Step 2 - Store the information as a WordPress post or custom post type
So far, you've learned how to use Gravity Forms to create a form that users can use to submit information to you. It looks pretty, but it's not much use yet! At this stage, the information will be emailed to you and stored in the WordPress database. In Step 2, I'll show you how to automatically use this user-submitted data to create WordPress posts, WooCommerce products, and custom posts. This saves you having to manually input the data to your website.
How to use Gravity Forms to save user-submitted information as a WordPress post
Gravity Wiz have an excellent tutorial about how to save Gravity Forms submissions as posts. Do this, then come back to learn how to display the user-submitted content in a table on the front end.
When you follow the Gravity Wiz tutorial, don't forget to set the 'Status' to draft. This is essential if you want to hold the form submissions for moderation for an administrator to approve before they're published.
How to use Gravity Forms to create a custom post
Storing user-submitted information as normal WordPress posts is fine, but it can clutter up your blog. It's normally better to create a dedicated custom post type for this. For example, if you're creating user-submitted business listings then you can create a 'Business Listings' custom post type. This will add a 'Business Listings' link to the left of the WordPress Dashboard. It's a convenient way to organize the listings, separate from your other website content.
You'll also need to do this if you want to store Gravity Forms entries in a post type created by another plugin. This might be the 'products' post type created by WooCommerce, the 'tribe_events' post type created by the Events Calendar plugin, or any other custom post type.
You'll need a free plugin called Gravity Forms + Custom Post Types for this:
- Get the plugin and install it on your WordPress site.
- If you don't already a custom post type for this purpose, create one now. I recommend the free Pods plugin for this. For full instructions, please see my tutorial about how to create a custom post type, then return here and continue this tutorial.
- Use the how-to instructions on the plugin page to map your form fields to the custom post type.
Step 3 - Display user-submitted data in a table on the front end
So far, you've learned how to use Gravity Forms to let users submit information via your website and save it as a post or custom post type. The next step is to display the user submitted posts on the front end of your WordPress site. You'll need our Posts Table Pro plugin for this (or WooCommerce Product Table if you're displaying user-submitted WooCommerce products).
Posts Table Pro is a WordPress table plugin designed to list posts and other post types in a searchable, filterable table view. It's the perfect way to display user-submitted information because each entry is listed in a separate row of the table. Visitors to your website can use the search box to find specific entries, use the filters to refine the list, and sort by any column.
How to list user-submitted content in WordPress
- Get Posts Table Pro and install it on your WordPress website.
- Copy your license key from the confirmation page, then enter it on Settings > Posts Table Pro.
- Stay on the settings page, and spend a minute choosing how you want your tables to look and behave.
- Next, create a new page. You'll use this to list the user-submitted content from Gravity Forms. Click the 'Insert Posts Table' toolbar button. This will add the shortcode
[posts_table]to the page.
Finally, view the page. You'll see all your posts or custom posts (depending on which post type you selected on the plugin settings page) listed in a table on the front end. This is the information that your users have submitted using Gravity Forms. Perfect!
Choosing which posts to display
You may wish to add multiple tables to your site, each containing different posts or custom posts. For example, if you're building a WordPress business directory then you might want to add a table listing posts from a different category on each page.
Fortunately, Posts Table Pro comes with several options for choosing which user-submitted content is listed in the table. You can read about them all here.
Gravity Forms comes with a ‘File Upload’ field which allow users to upload an image or other file type. There are a couple of ways to display file uploads on the front end with Posts Table Pro:
- If users are uploading images then the easiest option is to map the File Upload field to the post featured image. You can easily display this using the ‘image’ column in Posts Table Pro. The featured image for each post will then appear in the table.
- You can map other file types to a custom field, and display it as a custom field column in the table. Gravity Forms saves URL of the uploaded file in the WordPress database, so Posts Table Pro will display this as a plain text link. This isn’t ideal because you want the link to be clickable. To make it clickable, you would need to write some custom code to automatically convert the URL to a clickable link and display this in the table instead. If you don’t have a developer who can do this for you then we recommend Codeable.
Can users edit posts after submitting them?
Yes, there are two ways that you can allow users to edit the information in the table:
- Use Posts Table Pro with a front end spreadsheet editor plugin. Add an 'Edit' link above or below the table. Logged in users with the correct role can click this to access a front end spreadsheet editor, which allows them to edit the content of the table. They then save their changes and return to the main table. (Read tutorial.)
- Install a WordPress front-end editor plugin such as Editus. People can click through to the single post or document page on your website and edit the information from there. This is important because they can't edit the content from within the Posts Table Pro table itself. On the single post or document page, they can edit the content as required.
Can I display Gravity Forms entries on the front end without creating a post?
The Posts Table Pro plugin can only display posts or custom post types. Gravity Forms stores form submissions in a separate database field which you can't list directly in a table with Posts Table Pro.
That's why you need to follow the above instructions to automatically save the data as a post or custom post type, and then display these entries on the front end.
Where to get the plugins
That brings us to the end of our tutorial. You've learned how to use Gravity Forms to allow users to upload information to your website and save it as a post or custom post type. You know how to hold these posts for moderation so that they're not published until an administrator approves them. You've discovered the best way to display this information in a table on the front end of your WordPress website. It's the perfect way to create a user-contributed document library, member directory or business listings.
To set it up, you'll need:
- Gravity Forms - to collect the information from your users.
- Gravity Forms + Custom Post Types - to save the information as a custom post type in WordPress.
- Posts Table Pro - to display the information on your website.
I'd love to hear about how you use Gravity Forms for user-submitted content. Do you keep this private or list it on the front end of your website? What sort of data do you collect and display? Please let me know in the comments below.