How to Display WS Form Entries in a Searchable Table on Your WordPress Site

In this detailed tutorial, we’ll show you how to integrate the WS Form PRO and Posts Table Pro plugins to display WS Form Entries in a searchable table on your WordPress website.

We were recently asked by Michelle Frechette for a solution that could display speakers in a table on the website WPSpeakers.com. We successfully achieved this in WordPress by combining WS Form PRO with Barn2’s Posts Table Pro plugin.

Michelle was kind enough to provide us with the following testimonial:

I’m in awe of how well these plugins worked together to create such a wonderful display (and search) for speakers in the WordPress community. WS Form, Post Tables Pro, and ACF created exactly what I needed.

I’m grateful not only that these plugins exist, but also for the attention to detail provided by Mark Westguard and Katie Keith.

I couldn’t have asked for better.

In this tutorial, we will explore an exciting new use case for WS Form by demonstrating how to display posts created with the post management add-on in a searchable directory on your WordPress site.

To give you a clear idea of the end result, we’ll use a case study to illustrate the process. Here’s the WP Speakers searchable library — a free database of speakers available for WordPress meetups, WordCamps, and other WordPress-related events.

WP Speakers‘ website administrators successfully implemented all the instructions and steps in this tutorial. We’ll walk you through the steps they followed so that you can replicate their approach on your website.

Ready? Let’s jump straight into it!

How to Display WS Form Entries in a Searchable Table: An Overview

We’ll get into the steps to create a searchable table in a bit. First, here’s a quick overview of the plugins you’ll need and why you need to use them:

WS Form PRO

WS Form PRO is the powerful and versatile form builder plugin. You’ll need to use this to create the online form to collect data from your website’s users. Going back to the earlier example of our case study, here’s the WP Speakers registration form. Their website visitors need to enter their details into this form, which will display the searchable library.

Advanced Custom Fields (ACF)

Advanced Custom Fields is a popular plugin that adds extra content fields to your WordPress website. ACF helps you create custom posts and fields to store metadata and additional information within your WordPress site.

If you’re wondering why you need to use both ACF and WS Form plugins, here’s why: WS Form creates and displays the form fields, whereas ACF stores the data collected or submitted by your website’s users in the backend of your WordPress website. In essence, ACF bridges the gap between WS Form and Posts Table Pro, allowing you to create a custom post type to store the data collected using the form within your WordPress database.

To illustrate this using our case study, WP Speakers used the ACF plugin to create a custom post type called “Speakers”. When a new speaker registers on their website’s front end, ACF stores the speaker’s data as a draft post in the “Speakers” section of the WordPress admin.

You need the premium version of ACF to create custom post types such as “Speakers”. If you’re looking for a free alternative then you can use the Easy Post Types and Fields plugin instead. This is 100% free to install and use.

Posts Table Pro

Finally, you’ll need the Posts Table Pro plugin. Posts Table Pro is a popular plugin that lets you automatically create and display dynamic tables listing posts, products, and other custom post types on the front end of your WordPress website.

Posts Table Pro displays the data collected using WS Form in a searchable table on the front end of WordPress. Although the Posts Table Pro plugin has a wide variety of use cases, we’ll focus on using it to create a member directory, as that’s most relevant to this tutorial.

Now that we’ve covered the plugins you’ll need, we’ll get into the detailed steps and instructions in the next section. If you follow the steps in this tutorial, you’ll have your searchable directory of WS Form entries up and running in no time.

Step-By-Step Tutorial on How to Display WS Form Entries in a Searchable Table

We’ve grouped the steps in this tutorial into three key sections to make this even more straightforward:

1. Use ACF to create a custom post type to collect and store data on your website’s back end.
2. Create the signup form using WS Form and connect it with ACF.
3. Create the searchable table and integrate WS Form with Posts Table Pro.

Let’s look at each step in detail.

Step 1: Create a Custom Post Type to Store Your Data

We’ll use the Advanced Custom Fields plugin to create custom fields to collect and save data from your site’s visitors.

The custom post type feature lets you create your own type of content within WordPress. Just like you can create default posts and pages in WordPress, you can also create custom post types such as “Membership” or “Directory”. The custom post feature is super-helpful because it allows you to organize various types of content on your website.

Let’s look at the steps to create custom fields using ACF:

1. Download the Advanced Custom Fields (ACF) plugin.
2. Install and activate the plugin.
3. Navigate to “ACF” → “Post Types” within your WordPress dashboard.
4. Click on the “Add Post Type” button.
5. Now, type in the plural and singular labels for each post type. In this example, we typed in “Speaker” to create a custom post type for people registering as speakers. Here’s what the labels mean:
   1. Plural label: This means the plural label for the field you’re registering — for example, Speakers, Members, and Consultants.
   2. Singular label: This means the singular label for the field you’re registering — for example, Speaker, Member, and Consultant.
   3. Post type key: This is the URL slug of the custom post type. This field is automatically generated by the plugin when you enter the singular label. However, you can edit it if you like.
6. Toggle the “Public” setting on.
7. Select “Save changes” from the top right-hand menu.
   
   Next, you need to create custom meta fields to collect general data about each speaker.
8. Go to “ACF” → “Field Groups” within your WordPress dashboard.
9. Click on the “Add New” button.
10. Type in a name for the field group from the top of the screen.
11. Select the appropriate field type from the dropdown menu. For example, to add a field to collect members’ names, select the “Text” field.
12. Type in the “Field Label” and “Field Name”.
13. Navigate towards the bottom of the screen and locate the “Settings” panel.
14. From the “Location Rules” tab on the settings panel, select “Post type” → “is equal to” → “Speakers”.
15. Finally, select “Save changes” from the top right-hand menu.
16. Rinse and repeat: Repeat steps 8-16 to create additional fields as needed.Now, it’s time to create taxonomies to categorize and group your content. For this tutorial, we want our members to be grouped based on the topics and languages they can present in.
17. Navigate to “ACF” → “Taxonomies” within your WordPress dashboard.
18. Click on the “Add New” button.
19. Type in the plural and singular labels for each taxonomy. The plugin automatically generates the taxonomy key.
20. Next, select “Speakers” from the “Post Type” dropdown menu.
21. Toggle on the “Public” button.
22. Finally, click on the “save changes” button from the top right-hand corner of the screen.
23. Rinse and repeat: Repeat steps 17-22 to create additional fields as needed.

Great, you’ve completed the first step! But that’s just one-third of the puzzle. You still need to enable these custom fields to collect and save information from the front end of your website — and that’s what we’ll cover in the next section.

Step 2: Use WS Form PRO to Collect Data from Users

Let’s dive into how to setup and configure WS Form PRO to collect data from your website’s users:

1. Purchase and download the WS Form PRO plugin and the Post Management add-on.
2. Install and activate the plugins.
3. Navigate to “WS Form” → “Add New” within your WordPress dashboard.
4. Go to the “Post Management” tab and select the “Post” template. Note that you’ll need to install the “Post Management” add-on first in order to use this feature.
5. Clicking on the template automatically creates a form with the essential fields for posts, as well as fields you created with ACF.
6. Navigate to WS Form’s layout editor and select the “Actions” icon.
7. Locate the “Post Management” action and click on the gear icon.
8. Go to the “Field Mapping” – “ACF Field Mapping” panel.
9. Update the field mapping settings as you prefer.
10. You can map the custom taxonomies you created in ACF to specific form fields in the “Terms” section. To do this, you’ll need to create checkbox options in the WS Form layout editor for each of the taxonomy terms that users will be able to select from when they complete the form, such as listing all the regions or topics.
11. Finally, click on the “Save & Close” button.

Now, we’ve successfully created the registration form with signup fields. But we’re not done yet. In the third and final step, we’ll cover how to create and display a searchable table to display entries from WS Form on your website.

Step 3: Display WS Form Entries in a Searchable Table

Let’s look at how to display WS Form Entries in a searchable table on your website:

1. Purchase and download the Posts Table Pro plugin.
2. Install and activate the plugin.
3. Enter your license key into the setup wizard.
4. The plugin’s in-built setup wizard will guide you through the step-by-step process to create a table. Alternatively, you can navigate to “Post Tables” → “Add New” to create a table later on.
5. Type in a name for the table you’re creating. This table name is for internal use only and won’t appear on your website’s front end.
6. Next, select the custom post type that you created using the ACF plugin in step 1 of this tutorial. Continuing with our case study, WP Speakers selected “Speakers”.
7. On the “Columns” screen, select the fields that you created in steps 1 (with ACF) and 2 (with WS Form) and want to be displayed in your table. In addition, you can further modify the table with these options if you prefer:
   1. Choose the type of column from the dropdown list and click on the “Add” button.
   2. Rearrange the order of the columns in the table by using the sort icon on the left to drag and drop the columns and using the column tile.
   3. To rename the table, click on the pencil icon and type in a new name. Then, select the “Done” button.
   4. Toggle off the “Show Column” button to hide the column name.
   5. Click on the “X” icon to remove a column from the table.

   

8. You can add filters to the table to help your website’s users navigate the table easily. The filters will be displayed as dropdown menus above the table, and you can add as many filters as you prefer. To do this, select “Custom” and add each of the taxonomies that you created using ACF in Step 1 with the prefix “tax:” on the “Filters” settings page. For example, here’s how to display taxonomies for region and topic: “tax: region, tax: topic”. This will add two filter dropdowns above the table, and your website visitors will be able to filter through the list of WS Form entries by region or topic to find what they’re looking for.
9. You can enable lazy loading to optimize the page loading speed of your table.
10. Next, you can select the sorting options to determine how the options will be sorted. For example, you can sort posts based on the published date and in ascending or descending order.
11. Customize the sorting options for your table. The available sort options will change depending on whether or not you enabled lazy load on the previous page.
12. Finally, the “Ready” page will generate the shortcode for your table that you can paste on your site.
13. Paste the shortcode on your site as you prefer.

That’s about it! If you’ve followed these steps, you’ll have successfully created a searchable table to display WS Form entries on your WordPress site.

Now, you can head over to the front end of your website to preview your table.

Conclusion

Integrating WS Form PRO and Posts Table Pro plugins takes only a few minutes. In addition to creating a searchable membership directory, you can use these plugins for a wide variety of use cases.

Organizing and displaying posts created with WS Form PRO in a searchable table on your WordPress website is super easy. Go ahead and follow the steps we’ve laid out in this tutorial to create your own membership directory today!

To wrap up, we want to thank Michelle Frechette for kindly allowing us to feature WP Speakers as a case study to help other people wanting to display posts created with WS Form.