How to Display Contact Form 7 Submissions Using the CF7 Views Plugin

Displaying submissions from your Contact Form 7 (CF7) forms on your WordPress site can be incredibly useful for managing and showcasing user interactions. The CF7 Views plugin provides a seamless way to achieve this, allowing you to present form data beautifully and efficiently. In this blog post, we’ll walk you through the steps to display your Contact Form 7 submissions using the CF7 Views plugin.

Step 1: Install and Activate the Required Plugins

First, you need to install and activate the necessary plugins: Flamingo and CF7 Views.

  1. Navigate to the WordPress Dashboard: Go to your WordPress admin panel.
  2. Go to Plugins > Add New:
    • Search for Flamingo: Install and activate the Flamingo plugin. This plugin is required to save Contact Form 7 entries.
    • Search for CF7 Views: Install and activate the CF7 Views plugin.

Step 2: Create a New View

Once the plugin is activated, you can create a new view to display your CF7 submissions.

  1. Go to CF7 Views: You’ll see a new menu item called “CF7 Views” in your WordPress dashboard.
  2. Add New View: Click on “Add New” to create a new view.
  3. Configure the View:
    • Title: Give your view a title.
    • Form Selection: Select the Contact Form 7 form whose submissions you want to display.

Step 3: Design Your View Layout

The CF7 Views plugin provides a user-friendly interface to design how your form submissions will appear.

  1. Fields Selection: Choose the form fields you want to display. This could include names, email addresses, messages, or any other data captured by your form.
  2. Customize Layout: Drag and drop the selected fields to arrange them in your preferred order. You can also add custom HTML and CSS to style your layout.
  3. Preview: Use the preview option to see how your view will look on the front end.

Step 4: Publish and Display the View

Once you’ve configured and designed your view, you can publish it and display it on your site.

  1. Publish the View: Click the “Publish” button to save your view.
  2. Copy the Shortcode: After publishing, you’ll get a shortcode for your view.
  3. Add Shortcode to Page/Post: Go to the page or post where you want to display the submissions and paste the shortcode there.

Step 5: Fine-Tuning and Additional Settings

The CF7 Views plugin offers additional settings to fine-tune how your data is displayed.

  1. Filtering and Sorting: Configure filtering options to allow users to search through the submissions. You can also set sorting options to arrange submissions based on date, name, or any other field.
  2. Pagination: If you have a large number of submissions, enable pagination to improve navigation and user experience.

Step 6: Advanced Customizations (Optional)

For more advanced customizations, you can:

  1. Utilize the Datatable Addon: For displaying nice-looking tables, you can use the Datatable addon available with CF7 Views Developer License. This addon provides enhanced table features, including search, sorting, and pagination.
  2. Use the List View in Pro Version: The Personal license of the CF7 Views Pro offers a List View feature, allowing you to present your submissions in a clean, organized list format. This is especially useful for managing and viewing a large number of submissions efficiently.

Conclusion

Displaying Contact Form 7 submissions on your website can be incredibly powerful for both you and your users. With the CF7 Views plugin, this process is straightforward and highly customizable. By following the steps outlined in this blog post, you can easily create beautiful views to display your form submissions.

We hope this guide helps you make the most of your CF7 Views plugin. If you have any questions or need further assistance, feel free to contact our support team.

Happy customizing!