How to display form submissions on your website from WPForms (2023)

introduction

Do you want to display form entries on a page within your website to publicly display completed form submissions to your users? This tutorial will walk you through creating and using this functionality.

By default, only Pro users can viewform inputsof the WordPress administrator based on theAccess controlsassigned to your user, but you can easily create functions that allow you to display form inputs on any home page or post on your site.

Creating the shortcode

First, we'll give you a code snippet that needs to be added to your website so you can easily reuse the same shortcode, except just update the form id as needed.

Just add the following code snippet to your website. If you are not sure how to do this, seeit's tutorial.

/** * Custom shortcode to display WPForms form inputs in table view. * * Basic usage: [wpforms_entries_table id="FORMID"]. * * Possible shortcode attributes: * id (required) ID of the form whose inputs should be displayed. * User ID or "current" to use the currently logged in user by default. * Fields Comma-separated list of form field IDs. * number Number of entries to display, default is 30. ** @link https://wpforms.com/developers/how-to-display-form-entries/ ** Real-time counts may be delayed due to the site caching settings ** @param array $atts shortcode attributes. * * @return string */ function wpf_entries_table( $atts ) { // Extract ID shortcode attributes. $atts = shortcode_atts( [ 'id' => '', 'user' => '', 'fields' => '', 'number' => '', 'type' => 'all', // all , unread, read or marked.'sort' => '', 'order' => 'asc', ], $atts ); // Check for an ID attribute (required) and that WPForms is actually // installed and enabled. if ( void ( $ atts [ 'id' ] ) || ! function_exists ( 'wpforms' ) ) { return; } // Get the form of the id specified in the shortcode. $form = wpforms()->form->get( absint( $atts[ 'id' ] ) ); // If the form does not exist, abort. if (void ($form)) { return; } // Drag and format the form data from the form object. $form_data = ! empty($form->post_content)? wpforms_decode ($form->post_content): ''; // Check if we are showing all the allowed fields or only some specific ones. $form_field_ids = isset( $atts[ 'fields' ] ) && $atts[ 'fields' ] !== '' ? explode( ',', str_replace( ' ', '', $atts[ 'fields' ] ) ) : []; // Configure the fields of the form. if (void( $form_field_ids ) ) { $form_fields = $form_data[ 'fields' ]; } else { $form_fields = []; foreach ($form_field_ids as $field_id) { if ( isset ($form_data[ 'fields' ][ $field_id ] ) ) ) { $form_fields[ $field_id ] = $form_data[ 'fields' ][ $field_id ]; } } } if (void($form_fields)) { return; } // Here we define which types of form fields we DO NOT want to include, // instead they should be completely ignored. $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] ); // Loop through all fields on the form and remove all disallowed field types. foreach ( $form_fields as $field_id => $form_field ) { if ( in_array( $form_field[ 'type' ], $form_fields_disallow, true ) ) { unset( $form_fields[ $field_id ] ); } } $entries_args = [ 'form_id' => absint( $atts[ 'id' ] ), ]; // Restrict entries by user if the user_id shortcode attribute was used. if ( ! void( $atts[ 'user' ] ) ) ) { if ( $atts[ 'user' ] === 'current' && is_user_logged_in() ) { $entries_args[ 'user_id' ] = get_current_user_id(); } else { $entries_args[ 'user_id' ] = absint( $atts[ 'user' ] ); } } // number of entries to display. If empty, the default is 30. if ( ! empty( $attributes[ 'number' ] ) ) { $inputs_arguments[ 'number' ] = absint( $attributes[ 'number' ] ); } // Filter the type of entries all, unread, read or stard if ( $atts[ 'type' ] === 'unread' ) { $entries_args[ 'viewed' ] = '0'; } Elseif( $atts[ 'type' ] === 'read' ) { $entries_args[ 'viewed' ] = '1'; } elseif ( $atts[ 'type' ] === 'marked' ) { $entries_args[ 'marked' ] = '1'; } // Get all the inputs for the form according to the defined arguments. // There are many options for querying the inputs. To see more, see // the get_entries() function in class-entry.php (https://a.cl.ly/bLuGnkGx). $entries = json_decode(json_encode(wpforms()->entry->get_entries( $entries_args )), true); if (void( $entries ) ) { return '<p>No entries found.</p>'; } foreach($entries as $key => $entry) { $entries[$key][ 'fields' ] = json_decode($entry[ 'fields' ], true);$entries[$key][ 'meta' ] = json_decode($entries[ 'meta' ], true);}if ( !empty($atts[ 'sort' ]) && isset($entries[0][ 'fields' ][$atts[ 'sort' ]] ] ) ) {if ( strtolower($atts[ 'order' ]) == 'asc' ) {usort($entries, function ($entry1, $entry2) use ($atts) {return strcmp($entry1[ 'fields ' ][$atts[ 'sort' ]][ 'value' ], $entry2[ 'fields' ][$atts[ 'sort' ]][ 'value' ]);});} elseif ( strtolower($atts [ 'order' ]) == 'desc' ) { usort($inputs, function ($input1, $input2) use ($input) { return strcmp($input2[ 'fields' ][$input[ 'sort' ] ] [ 'value' ], $input1[ 'fields' ][$attributes[ 'sort' ]]['value']);});}} ob_start(); echo '<table class="wpforms-frontend-entries">'; echo '<head><tr>'; // Loop through the form data so we can print the field names // in the table header. foreach ($form_fields as $form_field) { // Name/label of the output form field. echo '<th>'; echo esc_html( sanitize_text_field( $form_field[ 'label' ] ) ); echo '</th>'; } echo '</tr></head>'; echo '<body>'; // Now loop through all the inputs on the form. foreach ($items as $item) { echo '<tr>'; $entry_fields = $entry[ 'fields' ]; foreach ($form_fields as $form_field) { echo '<td>'; foreach ($entry_fields as $entry_field) { if (absint( $entry_field[ 'id' ] ) === absint( $form_field[ 'id' ] ) ) ) { echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field[ ' value ' ] ), $entry_field, $form_data, 'entry-frontend-table' ); break; } } echo '</td>'; } echo '</tr>'; } echo '</tbody>'; echo '</table>'; $out = ob_get_clean(); return $output;}add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

With this code snippet, you can use this shortcode anywhere on your website that accepts shortcodes like pages, posts, and widget areas.

just using this[wpforms_entries_table id="FORMID"], your visitors will see the entries submitted to the form you specifiedid="FORMID".

AForm Identification NumberIt can be found atWPForms » All formsand look at the number on thespeed dialcolumn of each form.

with the shortcode

Next, let's copy and paste our shortcode into a new WordPress page.

You must first determine which form ID you want to display these inputs on. In our example, we display inputs for the form ID211so our shortcode looks like this.

[wpforms_entries_table id="211"]

The only attribute required to use the shortcode is theID, without defining this in your shortcode, nothing will appear, so the form id should be in the shortcode.

However, you can filter your listings further by defining some of the shortcode's attributes and we'll check each available attribute.

define thetypeAttribute

Use oftypeThe attribute can be used if, for example, you only want to display flagged entries.

[wpforms_entries_table id="211" type="starred"]

• in– All input types are displayed with this attribute.
• file- This attribute displays only read entries that have been seen by an administrator.
• unread- If you use this attribute, you will only see posts that have been read by an administrator.
• Popa- This attribute only shows posts that have been flagged by an administrator

Using theuserAttribute

If a user is currently logged in to your website and you want them to only see the form inputs they submitted, use this shortcode.

[wpforms_entries_table id="FORMID" user="current"]

If the user is not logged in, all entries from this form are displayed.

If the user is logged in but has not completed the form (while logged in), thenNo results found.would be displayed on the page.

define theFelderAttribute

To display only specific fields, you must first find out the field IDs of the fields you want to display. To find these field IDs,Please check this tutorial.

Once you know what the field IDs are, you'll use them as your shortcode. In this example we only want theNamefield that isfield ID 0and theCommentsfield that isfield ID 2.

[wpforms_entries_table id="211" campos="0,2"]

By separating the field IDs with a comma, only two fields will appear in the entries in the example above.

Use ofNumberAttribute

By default, the shortcode only shows the first 30 posts. However, if you want to display a smaller amount, e.g. B. If you only want to display the first 20 posts, please add your shortcode as below.

[wpforms_entries_table id="211" número="20"]

Henumber=”20″The variable passed in the shortcode determines how many entries the table displays. if you want to showintickets, change theNumberA9999.

Use ofsort byYdomainAttribute

By using your shortcode you can tell the shortcode which field you want to sort the table by and then define if you want to sort itrising(ascending order) ordescending(descending order). An example of this shortcode would look like this.

[wpforms_entries_table id="211" sort="1" order="asc"]

In this example, we show a table with entries for the form ID211and we are going to order this tablerisingorder (ascending) based on field ID1, which is the field ID for theNameform field.

design the table

Table styling is completely optional, as most themes have a default table style built in, just like browsers. However, we wanted to give you an example to help you get started. So if you want to change the default table style, you'll need to copy and paste this CSS into your website.

If you need help on how and where to add CSS to your website,Please check this tutorial.

The layout of your input table depends on the standard layout that your table layout may or may not have.

table { border-collapse: collapse;}thead tr { height: 60px;}table, th, td { border: solid 1px #000000;}td { blank space: normal; Maximum Breite: 33%; Breite: 33%; Wortumbruch: break through; High: 60px; padding: 10px;}tr:nth-child(even) { background: #ccc}tr:nth-child(odd) { background: #fff}

Add a non-table view

If you don't want to use an HTML table view to display your input, we also have a workaround for you. Instead of creating your shortcode using the above code snippet, use this code snippet instead.

/** * Custom shortcode to display WPForms form inputs in a non-table view. * * Basic usage: [wpforms_entries_table id="FORMID"]. * * Possible shortcode attributes: * id (required) ID of the form whose inputs should be displayed. * User ID or "current" to use the currently logged in user by default. * Fields Comma-separated list of form field IDs. * number Number of entries to display, default is 30. ** @link https://wpforms.com/developers/how-to-display-form-entries/ ** Real-time counts may be delayed due to the site caching settings ** @param array $atts shortcode attributes. * * @return string */ function wpf_entries_table( $atts ) { // Extract ID shortcode attributes. $atts = shortcode_atts( [ 'id' => '', 'user' => '', 'fields' => '', 'number' => '', 'type' => 'all', // all , unread, read or marked 'sort' => '', 'order' => 'asc', ], $atts ); // Check for an ID attribute (required) and that WPForms is actually // installed and enabled. if ( void ( $ atts [ 'id' ] ) || ! function_exists ( 'wpforms' ) ) { return; } // Get the form of the id specified in the shortcode. $form = wpforms()->form->get( absint( $atts[ 'id' ] ) ); // If the form does not exist, abort. if (void ($form)) { return; } // Drag and format the form data from the form object. $form_data = ! empty($form->post_content)? wpforms_decode ($form->post_content): ''; // Check if we are showing all the allowed fields or only some specific ones. $form_field_ids = isset( $atts[ 'fields' ] ) && $atts[ 'fields' ] !== '' ? explode( ',', str_replace( ' ', '', $atts[ 'fields' ] ) ) : []; // Configure the fields of the form. if (void( $form_field_ids ) ) { $form_fields = $form_data[ 'fields' ]; } else { $form_fields = []; foreach ($form_field_ids as $field_id) { if ( isset ($form_data[ 'fields' ][ $field_id ] ) ) ) { $form_fields[ $field_id ] = $form_data[ 'fields' ][ $field_id ]; } } } if (void($form_fields)) { return; } // Here we define which types of form fields we DO NOT want to include, // instead they should be completely ignored. $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] ); // Loop through all fields on the form and remove all disallowed field types. foreach ( $form_fields as $field_id => $form_field ) { if ( in_array( $form_field[ 'type' ], $form_fields_disallow, true ) ) { unset( $form_fields[ $field_id ] ); } } $entries_args = [ 'form_id' => absint( $atts[ 'id' ] ), ]; // Restrict entries by user if the user_id shortcode attribute was used. if ( ! void( $atts[ 'user' ] ) ) ) { if ( $atts[ 'user' ] === 'current' && is_user_logged_in() ) { $entries_args[ 'user_id' ] = get_current_user_id(); } else { $entries_args[ 'user_id' ] = absint( $atts[ 'user' ] ); } } // number of entries to display. If empty, the default is 30. if ( ! empty( $attributes[ 'number' ] ) ) { $inputs_arguments[ 'number' ] = absint( $attributes[ 'number' ] ); } // Filter the type of entries all, unread, read or stard if ( $atts[ 'type' ] === 'unread' ) { $entries_args[ 'viewed' ] = '0'; } Elseif( $atts[ 'type' ] === 'read' ) { $entries_args[ 'viewed' ] = '1'; } elseif ( $atts[ 'type' ] === 'marked' ) { $entries_args[ 'marked' ] = '1'; } // Get all the inputs for the form according to the defined arguments. // There are many options for querying the inputs. To see more, see // the get_entries() function in class-entry.php (https://a.cl.ly/bLuGnkGx). $entries = json_decode(json_encode(wpforms()->entry->get_entries( $entries_args )), true); if (void( $entries ) ) { return '<p>No entries found.</p>'; } foreach($entries as $key => $entry) { $entries[$key][ 'fields' ] = json_decode($entry[ 'fields' ], true); $inputs[$key][ 'meta' ] = json_decode($input[ 'meta' ], true); } if ( !empty($atts[ 'sort' ]) && isset($entries[0][ 'fields' ][$atts[ 'sort' ]] ) ) ) { if ( strtolower($atts[ 'order' ] ) == 'asc' ) { usort($inputs, function ($input1, $input2) use ($atts) { return strcmp($input1[ 'fields' ][$atts[ 'sort' ]][ 'value ' ], $entry2[ 'fields' ][$atts[ 'sort' ]][ 'value' ]); }); } elseif ( strtolower($atts[ 'order' ]) == 'desc' ) { usort($entries, function ($entry1, $entry2) use ($atts) { return strcmp($entry2[ 'fields' ]] $attributes[ 'sort' ]][ 'value' ], $input1[ 'fields' ][$attributes[ 'sort' ]]['value']); }); } } ob_start(); echo '<div class="wrapper">'; echo '<div class="header-row">'; // Loop through the form data so we can print the field names // in the table header. foreach ($form_fields as $form_field) { // Name/label of the output form field. echo '<span class="column label">'; echo esc_html( sanitize_text_field( $form_field[ 'label' ] ) ); echo '</span>'; } echo '</div>'; echo '<div class="Entries">'; // Now loop through all the inputs on the form. foreach ($inputs as $input) { echo '<div class="input-details">'; $entry_fields = $entry[ 'fields' ]; foreach ($form_fields as $form_field) { echo '<span class="details">'; foreach ($entry_fields as $entry_field) { if (absint( $entry_field[ 'id' ] ) === absint( $form_field[ 'id' ] ) ) ) { echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field[ ' value ' ] ), $entry_field, $form_data, 'entry-frontend-table' ); break; } } echo '</span>'; } echo '</div>'; } echo '</div>'; echo '</div>'; $out = ob_get_clean(); return $output;}add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

However, it's important to note here that since we're not using a default table, no default styling is applied when using this option, so the CSS is crucial in the next step, but we'll list the CSS classes used for this option Apply your own style.

Give style to the no table

Below is a detailed list of the CSS classes used and their purpose (if necessary).

• .Packaging– This is a full wrapper around the entire post block and can be used when you want to reduce the width of the block so it doesn't extend to 100% of your page.
• .header-row- This is another integral wrapper around each column labels (labels only) if you want to change the background color of the labels section.>
• .column-label– This wrapper encloses each individual label title. For example,Name,Email addressYSuggestion/Commenteach is surrounded by one of these wrappers and could be used to guide the size of this text.
• .Appetizer- This is a complete wrapper of the posts themselves if you want to change the background color of this section to make it look different than the labels.
• .Entry Details- this is a complete wrapper for each individual input and can be useful if you want to provide a different colored background for each input line.
• .Details- Each column of information is wrapped in this class so you can add any additional styling you want, like font size, color, etc.

You can use the following CSS to add some default styles for your non-table view.

If you need help on how and where to add CSS to your website,Please check this tutorial.

.wrapper { width: 100%; remove both; display: block;} .header-row { float: left; Width: 100%; bottom margin: 20px; top border: 1px solid #eee; Padding: 10px 0; border-bottom: 1px solid #eee;} span.details, span.column-label { display: inline-block; Swimmer: left; Width: 33%; right margin: 2px; text alignment: center; border: 5px 0;} .entries { screen: block; remove both; width: 100%;} .header-row span.column-label { text transform: uppercase; letter-spacing: 2px;}.entry-details { border-bottom: 1px solid #ccc; Width: 100%; screen lock; Swimmer: left; border: 20px 0; background padding: 20px;}

The CSS provided above is based on displaying only 3 fields from your listing, theName,EmailYCommentsField. If you want to display more fields, remember to update your CSS accordingly.

And that's it, now you've created a shortcode that can be added to various places on your website to allow non-admin users to view your form entries. Would you also like to be able to see how many entries are left on your form when you use theForm Locker-Add-on? Try our code snippet forHow to see the remaining input limit number.

Filter reference:wpforms_html_field_value

Frequently asked questions

Q: How can I show just a count of unread posts?

A:I would add this snippet to your website.

<?php/** * Custom shortcode to display the WPForms form input count for a form. ** Real-time counts may be delayed due to website caching settings * * @link https://wpforms.com/developers/how-to-display-form-entries/ * */function wpf_dev_entries_count ($atts) { // Extract shortcode attributes from ID. $atts = shortcode_atts(['id' => '','type' => 'all', // all, unread, read, or stared.],$atts);if ( empty( $atts[ 'id' ] ) ) {return;}$args = ['form_id' => absint( $atts[ 'id' ] ),];if ( $atts[ 'type' ] === 'unread' ) {$args[ ' viewed' ] = '0';} elseif( $atts[ 'type' ] === 'read' ) {$args[ 'viewed' ] = '1';} elseif ($atts[ 'type' ] = = = 'featured' ) {$args[ 'featured' ] = '1';}return wpforms()->entry->get_entries( $args, true );}add_shortcode( 'wpf_entries_count', ' wpf_dev_entries_count' );

You can then use this shortcode anywhere on your WordPress site where shortcodes are accepted.

[wpf_entries_count id="13" type="unread"]

You can easily change them.typeto beunread,fileoPopa.

Q: Why aren't my most recent posts showing up?

A:This is likely due to caching at the server, website, or browser level. Check if your cache is completely empty.

Q: Do I have to have columns?

A:Not at all. You can display your posts by putting the tag in front of the field value and putting each field on a separate line with this snippet and CSS.

/** * Custom shortcode to display WPForms form inputs in a non-table view. * * Basic usage: [wpforms_entries_table id="FORMID"]. * * Possible shortcode attributes: * id (required) ID of the form whose inputs should be displayed. * User ID or "current" to use the currently logged in user by default. * Fields Comma-separated list of form field IDs. * number Number of entries to display, default is 30. ** @link https://wpforms.com/developers/how-to-display-form-entries/ ** Real-time counts may be delayed due to the site caching settings ** @param array $atts shortcode attributes. * * @return string */ function wpf_entries_table( $atts ) { // Extract ID shortcode attributes. $atts = shortcode_atts( [ 'id' => '', 'user' => '', 'fields' => '', 'number' => '', 'type' => 'all', // all , unread, read or marked 'sort' => '', 'order' => 'asc', ], $atts ); // Check for an ID attribute (required) and that WPForms is actually // installed and enabled. if ( void ( $ atts [ 'id' ] ) || ! function_exists ( 'wpforms' ) ) { return; } // Get the form of the id specified in the shortcode. $form = wpforms()->form->get( absint( $atts[ 'id' ] ) ); // If the form does not exist, abort. if (void ($form)) { return; } // Drag and format the form data from the form object. $form_data = ! empty($form->post_content)? wpforms_decode ($form->post_content): ''; // Check if we are showing all the allowed fields or only some specific ones. $form_field_ids = isset( $atts[ 'fields' ] ) && $atts[ 'fields' ] !== '' ? explode( ',', str_replace( ' ', '', $atts[ 'fields' ] ) ) : []; // Configure the fields of the form. if (void( $form_field_ids ) ) { $form_fields = $form_data[ 'fields' ]; } else { $form_fields = []; foreach ($form_field_ids as $field_id) { if ( isset ($form_data[ 'fields' ][ $field_id ] ) ) ) { $form_fields[ $field_id ] = $form_data[ 'fields' ][ $field_id ]; } } } if (void($form_fields)) { return; } // Here we define which types of form fields we DO NOT want to include, // instead they should be completely ignored. $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] ); // Loop through all fields on the form and remove all disallowed field types. foreach ( $form_fields as $field_id => $form_field ) { if ( in_array( $form_field[ 'type' ], $form_fields_disallow, true ) ) { unset( $form_fields[ $field_id ] ); } } $entries_args = [ 'form_id' => absint( $atts[ 'id' ] ), ]; // Restrict entries by user if the user_id shortcode attribute was used. if ( ! void( $atts[ 'user' ] ) ) ) { if ( $atts[ 'user' ] === 'current' && is_user_logged_in() ) { $entries_args[ 'user_id' ] = get_current_user_id(); } else { $entries_args[ 'user_id' ] = absint( $atts[ 'user' ] ); } } // number of entries to display. If empty, the default is 30. if ( ! empty( $attributes[ 'number' ] ) ) { $inputs_arguments[ 'number' ] = absint( $attributes[ 'number' ] ); } // Filter the type of entries all, unread, read or stard if ( $atts[ 'type' ] === 'unread' ) { $entries_args[ 'viewed' ] = '0'; } Elseif( $atts[ 'type' ] === 'read' ) { $entries_args[ 'viewed' ] = '1'; } elseif ( $atts[ 'type' ] === 'marked' ) { $entries_args[ 'marked' ] = '1'; } // Get all the inputs for the form according to the defined arguments. // There are many options for querying the inputs. To see more, see // the get_entries() function in class-entry.php (https://a.cl.ly/bLuGnkGx). $entries = json_decode(json_encode(wpforms()->entry->get_entries( $entries_args )), true); if (void( $entries ) ) { return '<p>No entries found.</p>'; } foreach($entries as $key => $entry) { $entries[$key][ 'fields' ] = json_decode($entry[ 'fields' ], true); $inputs[$key][ 'meta' ] = json_decode($input[ 'meta' ], true); } if ( !empty($atts[ 'sort' ]) && isset($entries[0][ 'fields' ][$atts[ 'sort' ]] ) ) ) { if ( strtolower($atts[ 'order' ] ) == 'asc' ) { usort($inputs, function ($input1, $input2) use ($atts) { return strcmp($input1[ 'fields' ][$atts[ 'sort' ]][ 'value ' ], $entry2[ 'fields' ][$atts[ 'sort' ]][ 'value' ]); }); } elseif ( strtolower($atts[ 'order' ]) == 'desc' ) { usort($entries, function ($entry1, $entry2) use ($atts) { return strcmp($entry2[ 'fields' ]] $attributes[ 'sort' ]][ 'value' ], $input1[ 'fields' ][$attributes[ 'sort' ]]['value']); }); } } ob_start(); echo '<div class="wrapper">'; echo '<div class="header-row">'; // Loop through the form data so we can print the field names // in the table header. foreach ($form_fields as $form_field) { // Name/label of the output form field. echo '<span class="column label">'; echo esc_html( sanitize_text_field( $form_field[ 'label' ] ) ); echo '</span>'; } echo '</div>'; echo '<div class="Entries">'; // Now loop through all the inputs on the form. foreach ($inputs as $input) { echo '<div class="input-details">'; $entry_fields = $entry[ 'fields' ]; foreach ($form_fields as $form_field) { echo '<span class="details">'; foreach ($entry_fields as $entry_field) { if (absint( $entry_field[ 'id' ] ) === absint( $form_field[ 'id' ] ) ) ) { echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field[ ' value ' ] ), $entry_field, $form_data, 'entry-frontend-table' ); break; } } echo '</span>'; } echo '</div>'; } echo '</div>'; echo '</div>'; $out = ob_get_clean(); return $output;}add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

Use this CSS below to style the non-table view.

If you need help on how and where to add CSS to your website,Please check this tutorial.

.wrapper { width: 100%; remove both; display: block;} span.details { display: block; right margin: 2px; border: 5px 0;} .entries { screen: block; remove both; width: 100%;} .entry-details { border-bottom: 1px solid #ccc; Width: 100%; screen lock; border: 20px 0; padding-bottom: 20px;} span.label { font-weight: bold; right margin: 5px;}