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 four sections.
   • Data Source
   • Fields
   • Table
   • Search

Data Source



• Form: Select the form for which you want to create a data profile.
• Date Range: Set the date range, select from the preset range, or select a custom date.
• Search: Enable the search toggle to use the search functionality on the frontend.
• 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.

Search



• Search Columns: Specify the field from where you want to fetch the search result.
• Search Operators: Set on which you want to run the query to narrow the search result.
• Display filter on Frontend: Enable it to filter data from the Selected fields.
• Alignment: Set alignment like left, right, and center, search & filter fields will be aligned accordingly.

Note: Select at least one value from the search options to avail search functionality at Frontend

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.