Display Form Submissions on Frontend Using Elementor

Using the Elementor editor, you can display the captured form submissions on the frontend. The FV - Data Table widget lets you display and easily customize the profile data.

1. In the WordPress Admin dashboard, Go to Form Vibes >> Data Profile.
2. Click on Add New to create a new profile.
3. Under the Display Type, there are two options Table and the Counter. Here I have selected the Table option to display the data in tabular format. 
4. Under the Data Profile feature, there are three sections.
   • Data Source
   • Fields
   • Table

Data Source:



• Form: Select the form for which you want to create a data profile.
• Date Range: Set the date range, select from preset range, or select a custom date.
• Data Filters: Set the filter parameters to select data based on some criteria. 
  • Status: Filter data based on Submission Status.
  • Condition: Set relations like And, Or between multiple filter conditions. Select the field on which you would like the logic to depend on. All the field names are displayed to choose from. Next, set the filter conditions according to which you want to filter out the submissions. You can add multiple conditions to filter the form submissions

Fields:




 All table headers are displayed. Enable the Show Data on Row Expand option to display the row data in an expanded format.

You can also toggle the visibility of columns on row expansion.

Table Settings:




• Default Rows: Limit the number of rows to be displayed at a time
• Pagination: Enable it to give pagination
• Limit: It allows you to customize the number of rows displayed on the Entries page.
• Show Serial Number Column: Enable it to display the records serially.
• Serial Number Column Title: Give the title to the serial number column header.
5. Then Publish the Post and open it in Elementor Editor. Select the FV - Data Table widget from the widget panel and then configure the widget. General:
   
   • Data Profile: All the data profiles created are displayed. Select the Profile name whose data you want to display.
   • Override Default Settings: Enable it to override the default table settings.
6. The entire data is extracted for the selected profile and displayed.