In this tutorial, we will demonstrate how to showcase Contact Form 7 entries in a table view format on the frontend using CF7 Views. We’ll cover the steps to create a table view, add pagination, and customize which fields are displayed.
Before we begin, please ensure that you have installed and activated the CF7 Views plugin.
Creating a Table View for Contact Form 7 Entries on the Frontend
- Navigate to CF7 Views -> Add New.
- Provide a name for your view. This name is for internal reference and won’t be displayed on the frontend; it’s solely for backend organization.
- Select the form you want to use under the ‘Select View Source’ option.
- Table view is the default CF7 Views.
- Add fields in the ‘Before Entry List,’ ‘Entry List,’ and ‘After Entry List’ sections. You can also include pagination, custom HTML, and pagination information fields in the ‘Before Entry List’ and ‘After Entry List’ sections. The fields you add in the ‘Entry List’ section will be shown as table headers on the frontend.
- Publish the view.
Displaying the Table View of Contact Form 7 Entries on the Frontend
- Copy the shortcode provided in the sidebar for the view you just created.
- Paste the shortcode on the page or post where you wish to display the view.
- Publish or update the page.
If you wish to create additional customized views for your Contact Form 7 entries, you can follow a similar process. Enjoy presenting your form entries in an organized table format on the frontend!”