Unlocking Your WordPress: 2 Easy Ways to Showcase Form Entries on Your Site

Are you gathering form submissions on your WordPress site but not showcasing them to your visitors? That’s a missed chance to engage.

Displaying entries such as testimonials, member directories, or event calendars on your site adds value. It helps visitors access information, view authentic feedback, and connect with people and events in your community.

At CanadaCreate, we have assisted numerous site owners in making their hidden form data valuable. After experimenting with various methods, we have identified two effective approaches.

In this guide, we will demonstrate how to present WordPress form entries on your site in two straightforward methods—whether you are managing a directory, a showcase, or a community platform. 🙌

Why Should You Showcase WordPress Form Entries on Your Website?

Displaying form entries involves taking the data submitted by your visitors and presenting it on the public pages of your WordPress site. One of the key advantages is enhancing social proof.

By default, form submissions are only accessible to site administrators.

However, showcasing testimonials or product reviews that include genuine customer feedback is an excellent way to foster trust. In fact, research indicates that displaying reviews can boost conversion rates by as much as 270%.

Utilize form entries to create valuable resources for your visitors, such as business directories, member lists, or user-submitted events on a calendar.

In the upcoming sections, we will guide you on how to showcase form entries on the front end of your WordPress website using Formidable Forms and WPForms.

Here’s a brief overview of the topics we will cover in this guide:

• How to Display WordPress Form Entries Using Formidable Forms (Simple Method)
  • Step 1: Install Formidable Forms
  • Step 2: Create Your Form
  • Step 3: Publish Your Form
  • Step 4: Enable Visual Views
  • Step 5: Showcase Form Entries on the Front End
• How to Display WordPress Form Entries Using WPForms (Advanced Method)
  • Step 1: Install WPForms
  • Step 2: Create a Form and Showcase Its Entries
• Bonus Tip: How to Create GDPR-Compliant Forms
• Common Questions About Displaying Form Entries in WordPress
• Video Guide: Showcasing WordPress Form Entries
• Additional Resources for Utilizing WordPress Forms

Let’s get started.

Method 1: Showcasing WordPress Form Entries Using Formidable Forms

The simplest way to display form entries on your WordPress site is by using Formidable Forms. This widely-used contact form plugin provides a comprehensive form builder packed with customization options.

You can create a variety of forms, including advanced options like event calendars, directories, and calculators.

We have thoroughly tested Formidable Forms to explore its features, and you can discover our full insights in our detailed Formidable Forms review.

Step 1: Install Formidable Forms

To begin, install and activate the Formidable Forms plugin on your website. For this guide, we’ll be using the Pro version of Formidable Forms, which includes the ‘Visual Views’ addon.

If you need assistance, please refer to our tutorial on how to install a WordPress plugin.

Once activated, navigate to Formidable » Forms and click the ‘+ Add New’ button located at the top.

Step 2: Create Your Form

A popup will appear prompting you to choose a form type, such as a contact form, user registration form, survey, or other options.

Select your desired form type. For this tutorial, we will create a contact form to gather testimonials from users.

Next, you will need to provide a name and description for your form.

Once you finish, just click the ‘Create’ button.

Now, you can personalize your form using the form builder.

Formidable features a user-friendly drag-and-drop builder. Simply choose any form field from the options on the left and drag it into your form template.

Step 3: Publish Your Form

After customizing, you can place the form anywhere on your website.

The plugin provides several methods to add your form. The simplest way is to click the ‘Embed’ button in the form builder at the top, then select an existing page or create a new one to insert your form.

Alternatively, you can embed your forms using a ‘Formidable Forms’ block or a shortcode block in the WordPress content editor.

For this tutorial, we will select the ‘Create new page’ option.

Once you’re in the content editor, you’ll see that you’ve created a dedicated page for your Formidable Forms form.

Before publishing, you may want to preview it by clicking the ‘Preview’ button.

When you’re happy with how it looks, proceed to publish your page.

Step 4: Activate Visual Views

Once your form is active and you begin receiving submissions, install and activate the ‘Visual Views’ add-on in Formidable Forms.

To do this, navigate to Formidable » Add-Ons in your WordPress admin dashboard. Scroll down to find the ‘Visual Views’ add-on and click the ‘Install’ button.

After the add-on is activated, proceed to the Formidable » Views page.

Click the ‘+ Add New’ button located at the top.

A popup window will appear where you can select a view type, such as grid, table, calendar, or classic view.

For this guide, we will select the ‘Grid’ view to display the form entries.

Next, choose a data source for your view.

Click on the ‘Use Entries from Form’ dropdown menu to select your form, and feel free to enter a name for your view.

After selecting your data source, click the ‘Create a view’ button.

This action will open the view builder in Formidable Forms.

To begin, click the ‘Layout Builder’ button.

Now, select a layout to present your form entries.

Choose a layout from the available options at the top. You can add multiple layouts to display your form entries.

After you choose a layout, click the ‘Save Layout’ button to confirm your selection.

Next, you can enhance the view builder by clicking the ‘+’ button. Here, you can customize the layout of the form entries and add content both before and after them.

The plugin allows you to modify typography, background color, borders, and more in the ‘Grid Style Settings’ panel on the left side.

You will also find a shortcode in the ‘View Name’ field, which is necessary for displaying form entries on your site.

The ‘Grid Style Settings’ panel includes advanced options where you can limit the number of entries, adjust page size, and more.

Once you’ve made your customizations, remember to click the ‘Update’ button at the top to save your changes.

Step 5: Show Form Entries on Your Website

Now, you need to display your form entries on your WordPress site. To do this, copy the shortcode found under the ‘View Name.’

The shortcode will appear like this:

[display-frm-data id=2410]

After copying the shortcode, navigate to any post or page where you want to display the form entries.

In the content editor, simply add a ‘Shortcode’ block.

Next, insert the shortcode you previously copied into the shortcode block.

After that, consider previewing the page before you publish it.

You can now visit your website to see the form entries displayed.

Here’s how they appear on our demonstration site:

Method 2: Showcasing WordPress Form Entries with WPForms

You can also showcase form entries using WPForms, one of the top WordPress contact form plugins. This method is more advanced as it involves adding a PHP code snippet to your site.

To proceed, you will needWPForms Pro, which saves all form entries in your WordPress database. The free WPForms Lite version only sends entries via email and does not store them, making it unsuitable for this method.

At CanadaCreate, we utilize WPForms to create a variety of forms, including contact forms and annual user surveys. Learn more about it in our comprehensive WPForms review.

Step 1: Install WPForms

First, let’s sign up for a WPForms account.

You can easily click the ‘Get WPForms Now’ button on their website to select a plan and create your account.

Once that’s done, go ahead and copy your license key.

Now, let’s proceed to set up the plugin.

Begin by downloading the free version of the WPForms plugin from the WordPress repository, which offers essential features. After installation, input your license key to access all the premium functionalities.

First, navigate to Plugins » Add New Plugin in your WordPress dashboard.

Next, utilize the search tool to find the WPForms plugin quickly.

In the search results, click ‘Install Now’ followed by ‘Activate.’ For detailed instructions, refer to our guide on installing a WordPress plugin.

Step 2: Create a Form and Showcase Its Entries

After activation, you can begin building an online form using WPForms. Check out our comprehensive guide on creating a contact form in WordPress.

Once you start receiving form submissions, you’ll need to add the following code to your theme’s functions.php file.

Keep in mind that any error can potentially disrupt your website’s functionality.

For this reason, we highly recommend using WPCode, the top code snippet plugin for WordPress.

Many of our partner brands utilize this plugin as it offers a secure and straightforward method to incorporate custom code snippets into WordPress without the risk of damaging the site. For a comprehensive overview of the platform, take a look at our WPCode review.

There’s no need to be concerned about understanding the code provided below.

Simply copy the code. For instructions on how to easily add custom code to WordPress, please refer to our guide for more details.

/**
 * Custom shortcode to display WPForms form entries in a table format.
 *
 * Usage: [wpforms_entries_table id="FORMID"]
 *
 * Shortcode attributes:
 * id     (required) The form ID for which to display entries.
 * user   User ID or "current" for the logged-in user.
 * fields Comma-separated list of specific form field IDs.
 * number Number of entries to display, defaults to 30.
 * type   Entry type: all, unread, read, or starred.
 *
 * @link https://wpforms.com/developers/how-to-display-form-entries/
 *
 * Note: Real-time counts may be delayed due to site caching.
 *
 * @param array $atts Shortcode attributes.
 *
 * @return string
 */
function wpf_entries_table( $atts ) {

    // Retrieve shortcode attributes.
    $atts = shortcode_atts(
        [
            'id'     => '',
            'user'   => '',
            'fields' => '',
            'number' => '',
            'type'   => 'all',
        ],
        $atts
    );

    // Ensure the ID attribute is present and WPForms is active.
    if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) {
        return '';
    }

    // Retrieve the form using the provided ID.
    $form = wpforms()->form->get( absint( $atts['id'] ) );

    // Abort if the form does not exist.
    if ( empty( $form ) ) {
        return '';
    }

    // Extract and format the form data.
    $form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';

    // Determine if all fields or specific fields should be displayed.
    $form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== ''
        ? explode( ',', str_replace( ' ', '', $atts['fields'] ) )
        : [];

    // Set up the form fields.
    if ( empty( $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 ( empty( $form_fields ) ) {
        return '';
    }

    // Specify field types to exclude from the display.
    $form_fields_disallow = apply_filters(
        'wpforms_frontend_entries_table_disallow',
        [ 'divider', 'html', 'pagebreak', 'captcha' ]
    );

    // Remove disallowed field types from the form fields.
    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'] ),
    ];

    // Filter entries by user if user attribute is provided.
    if ( ! empty( $atts['user'] ) ) {
        if ( 'current' === $atts['user'] && is_user_logged_in() ) {
            $entries_args['user_id'] = get_current_user_id();
        } else {
            $entries_args['user_id'] = absint( $atts['user'] );
        }
    }

    // Set the number of entries to display.
    if ( ! empty( $atts['number'] ) ) {
        $entries_args['number'] = absint( $atts['number'] );
    }

    // Filter entry types.
    if ( 'unread' === $atts['type'] ) {
        $entries_args['viewed'] = '0';
    } elseif ( 'read' === $atts['type'] ) {
        $entries_args['viewed'] = '1';
    } elseif ( 'starred' === $atts['type'] ) {
        $entries_args['starred'] = '1';
    }

    // Retrieve entries for the form based on defined arguments.
    $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>';

    // Output form field names in the table header.
    foreach ( $form_fields as $form_field ) {
        echo '<th>' . esc_html( sanitize_text_field( $form_field['label'] ) ) . '</th>';
    }

    echo '</tr></thead>';
    echo '<tbody>';

    // Loop through all form entries.
    foreach ( $entries as $entry ) {
        $entry_fields = json_decode( $entry->fields, true );

        echo '<tr>';

        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>';

    $output = ob_get_clean();

    return $output;
}

add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

After adding the code to your website using the free WPCode plugin, you can display your form entries. Use a shortcode that can be placed on any page or post.

The basic shortcode format is as follows:

[wpforms_entries_table id="FORMID"]

Make sure to replace FORMID with the actual ID of your form.

You can find the form ID by navigating to WPForms » All Forms and checking the Shortcode column.

Customizing Your WPForms Entry Display (Alternative Method)

You can also modify this shortcode to select which fields to display and how many entries to show. This is particularly useful for creating streamlined, focused displays.

Here are a few helpful options:

• Display specific fields: To show only selected columns, include a fields attribute with the Field IDs from your form. For example, to display only the fields with IDs 1 and 3, you would use:
  [wpforms_entries_table id="123" fields="1,3"]
• Limit the number of entries displayed: To show only the 5 most recent entries, add the number attribute:[wpforms_entries_table id="123" number="5"]

To find the ‘Field ID’ for any field, open your WordPress form in the WPForms builder and click on the desired field. The ID will be displayed at the top of the settings panel on the left.

Step 3: Insert the Shortcode into Your Page

To insert a shortcode, either create a new page or edit an existing one.

Next, add a ‘Shortcode’ block to your page.

Then, simply paste your shortcode into the block.

Once that’s done, preview your WordPress page and click the ‘Publish’ button at the top.

And that’s all there is to it!

Here’s a preview of how our form entries appeared on the front end:

You can further enhance the display with custom CSS styles if needed.

Bonus Tip: How to Create GDPR-Compliant Forms

The General Data Protection Regulation (GDPR) is a law in the European Union that grants individuals greater control over their personal data. If your website collects user information, particularly through forms, it’s crucial to comply with these regulations.

To ensure your forms are GDPR-compliant, you should:

1. Obtain explicit consent: Ask users for permission to store and use their personal information.
2. Respond to access requestsAllow users to view the personal information you have collected about them.
3. Respect deletion requests.Enable users to request the removal of their data from your website.

For more information, refer to our guide on creating GDPR-compliant forms in WordPress. It provides answers to all your questions in a straightforward manner.

Common Questions About Displaying Form Entries in WordPress

Can I display form entries without using a plugin?

Yes, but it requires technical skills. You would need to write custom PHP and SQL code to query your WordPress database and display the results. For most users, using a plugin like Formidable Forms or the WPForms code snippet method is much simpler and safer.

Is it safe to publicly display user-submitted data on my website?

It can be safe, but caution is necessary. Always obtain explicit consent from users before making their data publicly accessible.

It’s crucial to review submissions before they are published on your site. Make sure to examine each entry to avoid the display of inappropriate content.

General guideline:Always obtain explicit permission on a case-by-case basis before publicly displaying sensitive personal information such as full names, email addresses, phone numbers, or home addresses.

How can I customize the appearance of my form entries?

Both methods outlined in this guide allow for styling entries. The Visual Views addon for Formidable Forms offers built-in options for colors, fonts, and layout. Alternatively, the WPForms table method creates a simple HTML table that you can style with custom CSS to align with your theme.

More Resources for Using WordPress Forms

We hope this article has helped you learn how to showcase WordPress form entries on your site.

Next, you might also want to explore our other useful guides on:

• How to Create an Online Order Form
• How to Add a Coupon Code Field to Your WordPress Forms
• How to Implement Autocomplete for Address Fields in WordPress
• Utilizing Conditional Logic in WordPress Forms: A Comprehensive Guide
• How I Successfully Prevented 18,000 Spam Leads from Targeting My WordPress Form
• The Complete Guide to Effectively Using WordPress Forms