Use Ninja Forms to let users submit data & display it in a table on your website

May 28, 2021

contact form plugin Ninja Forms displaying tables on website front-end

Want to display Ninja Form entries on your website’s front-end? We’ll show you how. In this guide, you will learn to set up a Ninja Form to let users submit data, store the form entries in a custom post type, and display those entries in a searchable, filterable table on your site's front-end.

Ninja Forms is one of the world's leading form builders. They offer an excellent array of form templates to help users submit information to your website. However, they don't provide a way to display user-submitted data in a filterable and searchable format on your site’s front-end.

That’s exactly what our plugins do.

You can use Ninja Forms to collect information, and then display job listings, document libraries, event listings, and much more with the help of one of our plugins - Posts Table Pro, WooCommerce Product Table, or Document Library Pro.

Here’s a table we have built on one of our demo sites:

Table build with Posts Table Pro
Job listings are displayed in a filterable and searchable table

What to expect from this tutorial

You are going to learn to:

  1. Enable users to submit data on your site with Ninja Forms
  2. Create a custom post type to store user-submitted data
  3. Display user-submitted data in a filterable and searchable table with Posts Table Pro

Now, let’s get started...

1. Enable users to submit data on your site with Ninja Forms

  1. Download and install the following plugins:
    1. Ninja Forms
    2. Front End Posting
    3. File Upload (only if you are planning to enable users to upload files like images, pdf, etc.)
  2. Build a list of all the fields that users will need to complete on your form. On our demo site, we are building a form that’ll enable businesses to post job openings. So we need users to provide us with the following information:
    • Job Title
    • Categories
    • Type of Job
    • City
    • Job Description
    • How to Apply
    • Company Name
    • Company Details
    • Logo
    • ReCaptcha
  3. Head over to your WordPress dashboard. You should see a Ninja Form option in the menu on the left.
  4. Now, go to Ninja Forms → Add New and select a template.
  5. We selected the Blank Form template.
  6. Insert the fields you had listed earlier. Kindly follow this guide to learn just how to do that: form-building guide.
  7. When you are satisfied with the form, hit the Publish button.

Below is the form we built to enable businesses to post job openings on our demo site.

Form made with Ninja Forms - front-end
Form made with Ninja Forms to enable users to submit data

Protect the form (optional)

Despite the great strides tech companies have made to fight spam, it still is a huge threat to everyone, especially business websites.

Spammers are always on the lookout for websites with forms because insecure forms offer a gateway into the website. Therefore, any form that you publish on your website will attract spam entires.

Ninja Forms comes with a built-in spam prevention technology but you can still install plugins like Akismet Spam Protection to protect it from spambots.

Alternatively, you can use Ninja Forms' Anti-Spam and Google reCAPTCHA fields to achieve the same. Learn more about Ninja Forms’ spam prevention techniques.

If you have built the form to share it with only a few people, you might want to secure the page so that only authorized users can access it. Here’s a helpful guide: Using Password Protection.

You can also de-index the page and prevent Google from showing it on the SERP.

2. Create a custom post type to store user-submitted data

Ninja Form stores all its user-submitted data under Submissions. But you can choose to store it as a page, a post, or a new custom post type.

We strongly recommend a custom post type because a regular post or page will clutter your website. However, if you still prefer storing it the regular way, then jump straight to Step 7.

In the guide below, you will learn how to create a new custom post type and connect it with Ninja Forms to store the user-submitted data.

Let’s start...

Instructions

  1. Install and activate the free Custom Post Type UI plugin.
  2. On your WordPress dashboard, you should be able to see a CPT UI option on the left-hand menu. Go to CPT UI → Add/Edit Post Types.
  3. Next, under Basic Settings fill up these 3 fields - Post Type Slug, Plural Label, and Singular Label.

Here’s a peek into our basic settings:

Create a custom post type
Creating a custom post type
  1. Scroll down on the same page and take some time to look at all the options under Additional labels. Proceed to modify them to meet your needs.
  2. Scroll further down to Settings → Support. Under support, there are many options. Select the options you’d need on the custom post type.
  3. When you are ready, hit the Add Post Type button.

Now you need to ensure that the user-submitted data is stored in the new custom post type. You’ll do this by connecting the Ninja form you created previously with the new custom post type. Here’s how:

  1. Navigate to Ninja Forms → Dashboard and then open the form.
  2. Go to Emails & Actions. On the right corner of the screen, there is a plus button with a blue background. Click on it and a sidebar will pop out.
  3. Go over to Post Types, a dropdown menu will appear. Select the custom post type. Alternatively, select Post or Pages if you want to store them as posts and pages.
  4. Remember to hit the Publish button.
Connecting Ninja Forms with custom post type
Connecting Ninja Forms with the custom post type

3. Display form entries in a filterable and searchable table

There are two ways to go about doing this: the manual way or the plugin way.

We will totally ignore the manual method simply because it’s super hard, time-consuming, and extremely error-prone. Building a table manually is difficult for even the most seasoned WordPress developers. And you’ll have to add the entries yourself every time a user submits information via Ninja Forms. It’s a lot of work.

As for plugins… we at Barn2 have built hassle-free, responsive, and customizable WordPress table plugins. Those are Posts Table Pro, Document Library Pro, and WooCommerce Product Table. Having spent a decade building and improving the plugins, we are proud to say that today our plugins are the most sought-after table plugins in the WordPress community.

Each of our table plugins is designed to display a certain kind of content. Let’s take a look at what each one offers:

  1. Posts Table Pro: Helps display custom post types, posts, and pages.
  2. WooCommerce Product Table: Helps display WooCommerce products.
  3. Document Library Pro: Helps built document resources.

They all display data in a searchable, filterable table. But each plugin offers different ways of displaying different types of content. Choose the one that best fits the type of data your users are submitting.

Now let’s build a table…

Posts Table Pro
The easiest way to display Ninja Form entries on your website's front-end.

Instructions

  1. Download and install your chosen table plugin from Barn2. (If you prefer a video walkthrough, here’s one on Posts Table Pro.)
  2. Now navigate to the plugin settings page and enter your license key.
  3. Stay on the same page and scroll down. You should be able to see many options. These options dictate how the table will look and behave on your front end.

Take a look at this help doc to understand what each option means and how you can modify them to meet your needs.

For instance, we added taxonomies and custom fields in the columns section. For anyone interested, we used Advanced Custom Fields to first create the custom fields and taxonomies.

Posts Table Pro license key
Posts Table Pro Settings page
  1. Go to Pages → Add new. Give a heading to your page. We named ours: Job Listings.
  2. Then add a shortcode to the page: [posts_table] or [doc_library] or [product_table] (depending on which table plugin you are using).
  3. Now, preview the page and check if the table matches what you had in mind. Reminder: The table will reflect the options you choose earlier. You can always go back and change those settings.

Here’s the table we built on our demo site:

Table build with Posts Table Pro
A job listing table built with Posts Table Pro

All good? Hit the Publish button.

That’s it, folks. The table is ready for your website visitors.

Have queries? The following FAQs may help.

FAQ

Q: How to display user-submitted data from other popular form plugins like Gravity Forms or WPForms, etc?

A: If you want to use other forms plugins to collect user-submitted data and display them on your website, then kindly follow the guides below:

Q: How can users modify their data in future?

A: You can allow users to change their data by installing any one of the following plugins:

  • Universal Frontend Editor: It'll add an Edit button above and below the table. By clicking on it users can go to a front-end editor and modify the data submitted.
  • Editus: It’ll take the user to the page where their data is stored. From there, they can change their data.

Q: How can I choose what to display in the table?

A: It comes down to what you want your website visitors to see. For instance, if you create a job listing page, then you’d want to showcase the job title, company name, location, job category, and type of job.

If you are not sure what to include, we suggest looking at what your competitors are doing. Make a list of what other websites are displaying and then decide what goes into your table.

Start displaying Ninja Forms entries today!

In this tutorial, we have used 5 plugins. You can get them by simply clicking on the links below:

That brings us to the end of the guide. We hope you found it helpful and easy to follow. If you have any queries, kindly leave a comment below.

Posts Table Pro
The easy way to display Ninja Forms entries.

Please share your thoughts...

Your email address will not be published.