Use Contact Form 7 to collect user data & display it on your website

Contact Form 7 is a fantastic WordPress form plugin. With it, you can let users submit data. And then display the data in a searchable table on your website using Post My CF7 and one of our WordPress table plugins.

Contact Form 7 is one of the most popular plugins out there. It has over 5 million active installs. Needless to say, it’s a great WordPress contact form plugin.

Most people just use Contact Form 7 to add online inquiry forms to their website. However, did you know that it can do much more than that?

By combining Contact Form 7 with the right plugins, you can use it to collect any type of data from your users and even display it publicly on your website! For example, you can create forms to let users apply for membership, submit a post, upload documents or submit job offerings. You can even create an online business directory or product marketplace.

This tutorial will show you how to enable users to submit data using Contact Form 7 and Post My CF7. You will also learn how to display the data in a table format on your website’s front-end with the help of one of our plugins - WooCommerce Product Table, Posts Table Pro, and Document Library Pro.

In the end, you will have a searchable, filterable, responsive table that displays the data your users submit using Contact Form 7. It will look similar to this:

Let’s begin…

In this tutorial, you will learn how to...

1. Let users submit data using Contact Form 7
2. Store user-submitted data as a custom post type
3. Display Contact Form 7 data in a searchable table on the front end

Here we go…

1. Let users submit data using Contact Form 7

First, we’ll install Contact Form 7 and use it to create a contact form. After that, we’ll show you how to store the data on your WordPress website and display it on the front end.

1. Install the free Contact Form 7 plugin on your WordPress website.
2. Next step is to create a form. But before we get into it, make a list of all the fields you want users to fill on your form. You are probably thinking: how does one know what fields are required? Simply ask yourself what data you want to display to your site’s visitors. For instance, we are building a member’s directory for doctors. We need to display the following information to visitors:
   • Name
   •  Phone
   •  Email
   •  Biodata
   •  Country
   •  Website
   •  Headshot
   • Short Excerpt
   • Level of Expertise
3. Now to build a form, open your WordPress dashboard. Then go to Contact → Add new. Name the form. Scroll down and you should see the following pre-existing sets of fields - name, email, subject, message and send. Keep the fields you need and remove the rest. To add custom fields to the form, follow these Contact Form 7 help docs. You can start with the ‘Creating Forms’ section. Take a look at the form we created on our demo site:

   

4. It’s time to publish the form on your website. Go to Contact → Contact Forms and copy the shortcode of the form you just created.

   

   Create a new page by going over to Pages → Add new. Name the page, then paste the shortcode. Preview the form. All okay? Hit Publish.

This is how our form looks:

Secure the form (recommended)

Forms tend to attract hackers and spammers. In fact, our article about stopping Contact Form 7 spam is one of the most popular posts on our blog! A vulnerable form can be a gateway into your website. Therefore, we highly recommend that you keep the Contact Form 7 plugin updated and protect it.

There are a number of steps you can take.

Contact Form 7 has a reCAPTCHA integration module. Just enable it and it will automatically vet all submissions and block spam bots from abusing the form.

Alternatively, you can take the traditional route and password protect the page. This works only when you want to give access to a few users.

We hope that you have an SSL certificate installed on your website. It encrypts the data users submit on your site. If the data is stolen (yes, despite all precautions, it can happen), hackers would find it impossible to read the data. Get an SSL certificate, if you don’t have one already.

Learn more about how to stop Contact Form 7 spam.

2. Store user-submitted data as a custom post type

Contact Form 7 entries are not stored on your WordPress database. It goes straight to your email inbox. We will show you how to store the data on your WordPress database. But first, you need to decide where to store the data.

2a. Choose where to store the data

It depends entirely on what type of information you are collecting from users. We have 3 plugins that let you display the Contact Form 7 data on the front end. Two of these also provide a way for you to store the data:

• Document Library Pro - Choose this if you’re using Contact Form 7 to receive documents or other types of downloadable resources. It adds a ‘Documents’ section to the WordPress admin. When visitors use Contact Form 7 to submit a document, it will be stored in the Document section along with other information such as the document title and description.
• WooCommerce Product Table - Use this plugin if you’re creating a product marketplace where visitors will submit products to be sold on your website. It works with the free WooCommerce product, which adds a ‘Products’ section to the WordPress admin. Your user-submitted products will be stored here.
• Posts Table Pro - If you’re using Contact Form 7 to collect any other type of user-submitted information (e.g. member profiles) then you need Posts Table Pro. Amazingly, it can display any WordPress post type in a searchable table on the front end.

Ok, so now you know which plugin you’ll be using to display the Contact Form 7 data. If you’ve decided to use Document Library Pro or WooCommerce Product Table, then you can skip straight to step 2c. If you’re using Posts Table Pro, then follow step 2b first.

2b. Consider creating a custom post type

Unlike the other two plugins mentioned above, Posts Table Pro simply displays data from the WordPress database - it doesn’t store it for you in the first place. As a result, you either need to use one of the post types that come with WordPress itself (i.e. pages or posts) or create your own custom post type.

If you’re using Contact Form 7 to collect user-submitted pages or blog posts, then you should definitely use normal pages or posts. Just skip to step 2c.

But if you’re collecting any other type of data (e.g. member profiles), you should create a custom post type. This creates a dedicated area in the WordPress admin for your user-submitted data. It keeps everything neat and clutter-free behind the scenes.

You can use a free plugin to easily create a new post type and store the Contact Form 7 data as a custom post type.

1. Install the free Custom Post Type UI plugin on your website.
2. In the WordPress admin, navigate to CPT UI → Add/edit Post Types. Fill in the basic settings. Then, scroll down and see if you want to fill in other options or modify some of the settings. On our demo site, we left everything as is.

   

   You can also use Custom Post Type UI to add custom taxonomies. These are useful for grouping and filtering the user-submitted data when it is displayed on your website. If you like, then you can also install the free Advanced Custom Fields plugin and use it to add custom fields to your post type. Custom fields are better for storing unique data about each item, such as a reference number, whereas taxonomies are good for data that is shared across multiple items, such as categories.

2c. Link the Contact Form 7 form with the custom post type

The next step is to automatically store the Contact Form 7 form entries to the correct post type in the WordPress database. We’ll do this using the free Post My CF7 plugin.

1. Install the free Post My CF7 plugin on your website.
2. Go to Contact → Contact Form → Create new.
3. On the new page, go over to Post Type and from the drop-down select Existing Post.
   A new option called Select a Post appears with a dropdown. Select the custom post type. This might be Documents, Products, or a post type that you created such as ‘Members’. To save user data as a post or a page, select Posts or Pages.
4. Next, under the default post field, select the fields of your form. This maps the Contact Form 7 form fields that you created way back in step 1 with WordPress post type fields.
5. On the same page, there are options for adding custom fields and taxonomies. You can map these to any custom fields or taxonomies on your post type.

Here’s a peek into how we mapped our form fields to our custom post type:

3. Display Contact Form 7 data in a searchable table on the front end

Contact Form 7 is exclusively a WordPress form plugin. To display user-submitted data in an easily searchable format, you need a dedicated WordPress table plugin.

At Barn2, we have built some of the most popular responsive table plugins with advanced filters and search options. You should have chosen either Document Library Pro, WooCommerce Product Table, or Posts Table Pro in step 2a, depending on the type of Contact Form 7 data you need to display. On our demo site, we are building a member’s directory for doctors. So for this tutorial, we will use the Posts Table Pro plugin. Even if you choose a different table plugin, you can still follow this tutorial.

Instructions

1. Install Posts Table Pro, Document Library Pro, or WooCommerce Product Table on your WordPress website.
2. On your WordPress dashboard, go to the plugin settings page and activate the license key.
3. Scroll down on the same page and modify the settings as needed. There are plenty of video tutorials on our YouTube channel. If you have any queries, take a look at the FAQs section below. For further assistance, leave a comment below or talk to your support department. Before we get on with the steps, here’s a snippet of the Posts Table Pro settings page on our website:
   

   

4. Now, create a new page by going over to Pages → Add new. Don’t forget to name the page.
5. Next, add this shortcode to the page: [doc_library](if using the Document Library Pro plugin) or [posts_table](if using the Posts Table Pro plugin) or [product_table] (if using WooCommerce Product Table).

Now preview the page. It should show you a table. If you need to, go back and modify the plugin settings until you are satisfied with your table.

Here’s how our searchable, filterable table looks like on desktop:

FAQs

Q. Where do Contact Form 7 submissions go?

A. Contact Form 7 submissions will go straight to your email inbox. But you can save submissions on your WordPress site as a new custom post type, or a regular post or page. We have covered it in the tutorial above.

Q. Can I display user data from other contact form plugins?

A. You can display user data from other contact form plugins with the help of any of these Barn2 plugins - WooCommerce Product Table, Posts Table Pro, and Document Library Pro.

We made tutorials for other popular contact form plugins. Feel free to follow these guides - Gravity Forms, Ninja Forms, WPForms, Formidable Forms.

Do you want us to write more tutorials like this? Tell us in a comment below.

Q. Can I enable users to modify the data they submitted?

A. Enable users to modify their data by installing any one of these two plugins: Editus and Universal Frontend Editor. The plugins have a slightly different way of enabling users to access their data. We recommend trying out both plugins on a local environment or a staging site before installing them on your live site.

Where to get the plugins

In this tutorial, we have combined some high-quality plugins to get all the features you need. You can get these plugins by clicking on the hyperlinks below:

• Contact Form 7 - For creating a form to enable users to submit data.
• Custom Post Type UI (optional) - For creating new custom post types.
• Post My CF7 - For storing Contact Form 7 data in WordPress.
• WooCommerce Product Table, or Posts Table Pro, or Document Library Pro - For displaying user data in a searchable table.

Have a question? Leave a comment below.