New Pro theme is live Browse now
Web Design Development

How to Display WordPress Form Entries on Your Site

Share with:


How to Display WordPress Form Entries on Your Site

Do you want to display WordPress form submissions on your website’s front end?

By displaying form entries on the front end, you may give your visitors access to crucial information. It can be used to display event calendars, show good ratings, make directories, and more.

We’ll demonstrate how to display WordPress form entries on your website in this article.

Why Show Frontend WordPress Form Entries?
Use forms to stay in touch with your visitors, get recommendations and feedback, assist users in resolving problems, and more. In some circumstances, displaying form entries for visitors on your WordPress website can be useful.

You may, for instance, show customer feedback and product reviews that people have submitted online. By doing so, you may use social proof to increase conversions and develop customer trust in your company.

On your website, you can also exhibit form entries to build a company directory, user-submitted events on a calendar, statistics, and other significant data gathered through online forms.

On your WordPress website, users’ form submissions are by default kept private, despite this. The form entries can only be viewed by the WordPress administrator and other authorized users.

WordPress Form Entries Using Formidable Forms

Using Formidable Forms is the simplest way to display form entries in WordPress. It is a well-liked WordPress contact form plugin and provides a complete form builder with a ton of customization options.

Forms of every description, even complicated ones like calendars, directories, and calculators, can be made, as well as surveys, tests, and payment forms.

The Formidable Forms plugin must first be installed and activated on your website. Please go to our tutorial on installing a WordPress plugin if you require assistance.

Because it comes with the Visual Views addon, we’ll be utilizing the Formidable Forms Pro edition for this article.

Upon activation, you can go to Formidable » Forms and click the ‘+ Add New’ button at the top.

A popup will then offer you to choose a form type, such as a contact us form, user registration form, survey, or another, after that.

Go ahead and choose the form type you desire. For the sake of this tutorial, we’ll make a contact form to gather customer reviews.

Next, you’ll need to enter a form name and description.

When you’re done, simply click the ‘Create’ button.

You can now edit your form using the form builder.

A very user-friendly drag and drop builder is provided by Formidable. You may add any form field you desire to your form by simply choosing it from the options on the left and inserting it into the form template.

After customizing your contact form, go ahead and embed it anywhere on your website.

The plugin offers multiple options to add your form. The easiest way is to click the ‘Embed’ button in the form builder at the top and then select an existing page or create a new page to add your form.

To embed your forms instead, you can either use a Formidable Forms block or a shortcode block in the WordPress content editor.

You may then give your page a name and preview it after that.

Publish your page as soon as you’re happy with how it looks.

After your form is live, and you start to get entries, then you’ll need to install and activate the Visual Views addon in Formidable Forms.

To do that, simply go to Formidable » Add-Ons from your WordPress dashboard. Next, scroll down to the ‘Visual Views’ addon and click the ‘Install’ button.

Once the addon is active, you can go to Formidable » Views from your WordPress dashboard.

After that, simply click the ‘+ Add New’ button at the top.

You’ll then be presented with a pop-up window where you must choose a view type. You can utilize the plugin’s grid, table, calendar, and classic view.

In this example, form entries will be shown using the “Grid” view.

The next step is to choose a data source for your display.

Go ahead and choose your form from the dropdown menu under “Use Entries from Form” The option to enter a view name is also available.

Simply select “Create a view” after choosing your data source.

Go ahead and click the “Save layout” button after choosing a layout.

After that, by selecting the “+” button, you can add content to the view builder. The layout of the form entries can be changed, and information can be added before and after them.

Under the Grid Style Settings box on your left, the plugin also offers choices to modify the typeface, background color, border, and other elements.

When displaying form entries on your website, you’ll additionally see a shortcode under the View Name field.

In the Grid Style Settings window, there are more sophisticated options. You can specify limits for the number of entries, page size, and other factors under the advanced options.

Don’t forget to click the “Update” button at the top after customizing the view.

You must then show your form submissions on your WordPress website. Copy the shortcode provided under the View Name to accomplish that.

The shortcode will appear as follows:

1[display-frm-data id=2410]

Go to any post or page where you want to show form entries after that. Simply add a “Shortcode” block once you’re in the content editor.

Now, enter the shortcode you copied earlier in the shortcode block.

After that, you can preview the page and publish it.

WordPress Form Entries Displayed Using WPForms

WPForms is another option for showing form entries on the front end of your WordPress website. However, because this method calls for changing code, it is best suited for experienced users who are familiar with coding.

The finest contact form plugin for WordPress, WPForms, allows you to develop various forms using a drag-and-drop form builder.

Just keep in mind that the WPForms Pro edition is required if you wish to view your form entries in the WordPress dashboard. You can also utilize the free WPForms Lite version, which provides email notifications of all your form submissions.

Installing and activating the WPForms plugin is the first step. Please refer to our tutorial on installing a WordPress plugin for additional information.

The next step is to use WPForms to construct an online form. Check out our detailed instructions on how to build a contact form in WordPress.

You must add the following code to your theme’s functions.php file or to a plugin designed specifically for your website after you start receiving form submissions. For more details, visit our tutorial on how to quickly add custom code to WordPress.

/**
* Custom shortcode to display WPForms form entries in table view.
*
* Basic usage: [wpforms_entries_table id="FORMID"].
*
* Possible shortcode attributes:
* id (required)  Form ID of which to show entries.
* user           User ID, or "current" to default to current logged in user.
* fields         Comma separated list of form field IDs.
* number         Number of entries to show, defaults to 30.
*
* @link https://wpforms.com/developers/how-to-display-form-entries/
*
* Realtime counts could be delayed due to any caching setup on the site
*
* @param array $atts Shortcode attributes.
*
* @return string
*/
functionwpf_entries_table( $atts) {
// Pull ID shortcode attributes.
$atts= shortcode_atts(
[
'id'=> '',
'user'=> '',
'fields'=> '',
'number'=> '',
'type'=> 'all'// all, unread, read, or starred.
],
$atts
);
// Check for an ID attribute (required) and that WPForms is in fact
// installed and activated.
if( empty( $atts['id'] ) || ! function_exists( 'wpforms') ) {
return;
}
// Get the form, from the ID provided in the shortcode.
$form= wpforms()->form->get( absint( $atts['id'] ) );
// If the form doesn't exists, abort.
if( empty( $form) ) {
return;
}
// Pull and format the form data out of the form object.
$form_data= ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';
// Check to see if we are showing all allowed fields, or only specific ones.
$form_field_ids= isset( $atts['fields'] ) && $atts['fields'] !== ''? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : [];
// Setup the form fields.
if( empty( $form_field_ids) ) {
$form_fields= $form_data['fields'];
} else{
$form_fields= [];
foreach( $form_field_idsas$field_id) {
if( isset( $form_data['fields'][ $field_id] ) ) {
$form_fields[ $field_id] = $form_data['fields'][ $field_id];
}
}
}
if( empty( $form_fields) ) {
return;
}
// Here we define what the types of form fields we do NOT want to include,
// instead they should be ignored entirely.
$form_fields_disallow= apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha'] );
// Loop through all form fields and remove any field types not allowed.
foreach( $form_fieldsas$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'] ),
];
// Narrow entries by user if user_id shortcode attribute was used.
if( ! empty( $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 show. If empty, defaults to 30.
if( ! empty( $atts['number'] ) ) {
$entries_args['number'] = absint( $atts['number'] );
}
// Filter the type of entries all, unread, read, or starred
if( $atts['type'] === 'unread') {
$entries_args['viewed'] = '0';
} elseif( $atts['type'] === 'read') {
$entries_args['viewed'] = '1';
} elseif( $atts['type'] === 'starred') {
$entries_args['starred'] = '1';
}
// Get all entries for the form, according to arguments defined.
// There are many options available to query entries. To see more, check out
// the get_entries() function inside class-entry.php (https://a.cl.ly/bLuGnkGx).
$entries= wpforms()->entry->get_entries( $entries_args);
if( empty( $entries) ) {
return'<p>No entries found.</p>';
}
ob_start();
echo'<table class="wpforms-frontend-entries">';
echo'<thead><tr>';
// Loop through the form data so we can output form field names in
// the table header.
foreach( $form_fieldsas$form_field) {
// Output the form field name/label.
echo'<th>';
echoesc_html( sanitize_text_field( $form_field['label'] ) );
echo'</th>';
}
echo'</tr></thead>';
echo'<tbody>';
// Now, loop through all the form entries.
foreach( $entriesas$entry) {
echo'<tr>';
// Entry field values are in JSON, so we need to decode.
$entry_fields= json_decode( $entry->fields, true );
foreach( $form_fieldsas$form_field) {
echo'<td>';
foreach( $entry_fieldsas$entry_field) {
if( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) {
echoapply_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>';
$output= ob_get_clean();
return$output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table');

After adding the custom code to your website, you’ll need to enter the following shortcode to any page or post to show form entries.

1[wpforms_entries_table id="FORMID"]

Just replace the FORMID with your form’s ID.

You can find the form ID by going to WPForms » All Forms and then looking at the Shortcode column.

To add a shortcode, simply create a new page or edit an existing one.

Next, go ahead and add a ‘Shortcode’ block.

After adding the block, simply enter your shortcode.

Now preview your WordPress page and click the ‘Publish’ button at the top.

 

Share with:


Leave a Reply

Your email address will not be published.