Outputting Caldera Form Entries on the frontend

A simple tutorial on outputting Caldera Form submissions on the frontend.

Sometimes you really want to show your form submissions on the front-end. There’s quite a few use-cases if you think about it. What if you wanted to add a type of comment form to a page or section of your site? What if you are taking RSVPs for an event and want to highlight all the great people coming to the event? Putting all those submissions hidden away in wp-admin makes it hard to do those things.

Caldera Forms is my go-to form creation tool, and it happens to have some pretty straight-forward ways to query the entries in the backend and do pretty much whatever you like with them.

The Matt Turns 40 Extravaganza

I’m turning the big FOUR-OH this year. Rather than one event, I wanted to allow my friends and family to come to any of several events I’m doing over my birthday weekend. I could have created multiple Evite invitations, but that would have been a real pain for folks to follow multiple links for roughly 8 events over the course of a weekend.

I’ve said many times: “if it can be built on the web, it can be built with WordPress.” So I went to work making this weekend Extravaganza invite happen with Caldera Forms. You can see the results here.

A big part of the fun of doing an invite is displaying all the fun things people say and what they RSVP for. So I pinged Josh Pollock about my idea and he pointed me to this simple tutorial on querying entries. With just those four lines of code I knew I could grab all the data I needed to display my RSVPs.

After a bit of fiddling, I put together a simple shortcode to do exactly what I wanted. Let’s walk through it.

The Caldera Forms Entries Shortcode

Here’s the code I’m using:

Josh’s tutorial really hinges on this line of code here:

$data = Caldera_Forms_Admin::get_entries( $form_id, 1, 9999999 );

That’s where all the magic is. Basically, to make this into a shortcode, all I really needed to do was create some shortcode attributes, and swap out the $form_id for $atts['id'] instead. That’s what you see happening in lines 3-16 of the Gist.

All the functions needed to do this are in the Caldera_Forms_Admin class, which is only available in the backend. So in order to access those functions in the frontend, we need to include that file in our shortcode function. That’s line 13.

Once the shortcode can point to any form you like, you need to do something with the output. To do that, we need a foreach to loop through all the entries.

Naturally, I have a row outside the foreach that serves as my headers.

Then, the foreach itself loops through our entries. You’ll notice an (array) is prepended on the $data variable. That is there because foreach’s don’t like it if their array returns null or is empty. By prepending the (array) I prevent bad things from happening with my foreach if there are currently no entries for the designated form.

Next you’ll notice that I appended ['entries'] after the $data variable. That is to narrow the array to only the entries.

With that in place, we use our foreach to assign the individual entries to be output as the singular $entry and now we can access the data of each field for each entry. While developing this, I used var_dump religiously to inspect the output of the get_entries() results. If you’re not already familiar with that, start using it today for general troubleshooting and development purposes.

In lines 20-49, you’ll notice that I added my styles for the output directly in my shortcode. That’s because I’m lazy. Typically, you’d want to put them in a CSS file, register them and only enqueue them inside the shortcode function. I wrote a simple tutorial on doing exactly that on The WP Crowd site.

Another important thing to note about creating shortcodes is output buffering. In order for your shortcode to output directly in the place within your content that you placed it in, you need to use an output buffer. Otherwise, they end up at the top of your content area no matter what you do. You can see I open the function with ob_start() and then define $output as ob_get_clean() and then just return that — that’s the output buffer. There are other ways to do this, but that’s the simplest method I know of for WordPress shortcodes and it’s reliable.

And that’s it really. Now I can use a shortcode like this to output any of my entries:

[cf_entries id="CF78d8e5fe27ed9" number="50"]

This is Sample Code, not a Plugin

If you copy-pasta-ed this into your site right now and pointed the shortcode at one of your form id’s, it wouldn’t work. That’s because I’m targeting the fields of my form and yours have different labels. This is not a plugin for distribution, it’s a snippet of code that is functional only in my unique environment but serves as an example of what you can do with Caldera Forms entries.

I wish more developers would share functional snippets like this for learning purposes. Some do, like Carl Alexander, Tom McFarlin, Justin Tadlock, and of course Josh Pollock. Each of those guys have taught me a lot through their articles but especially through the code they share.

At Give, we have a growing library of Snippets that help folks understand exactly how they can interact with our plugin and extend and customize it to their specific needs.

With that in mind, there’s several things you might want to consider when learning from this code:

  • You might enqueue the CSS properly like I describe in that WP Crowd article.
  • You probably want to do different markup. You could do tables or use dt‘s instead.
  • If you did use tables, you could use something like DataTables or FooTable to filter and sort those entries on the front-end as well.
  • You could add a fallback for when there are no entries in the form; maybe show a full row saying “There are not yet any entries for this form” or simply not output anything at all instead.
  • You might add an option into your form that allows people who submit to your form to indicate that they don’t want their submission posted publicly. Then you just add a conditional if statement in the foreach to exclude those.
  • If you wanted to get really fancy, you could cache the results so it loads more quickly and doesn’t have to hit the database on every page load. I’m pretty sure there’s an action in Caldera Forms that you could hook into and clear that cache every time a new entry is submitted. That’d be pretty sweet.

There’s lots of ways to extend this and improve upon it. But if you didn’t know this was available or didn’t have a snippet to start from you probably never would have tried it. Keep that in mind the next time you experiment and end up writing a handy snippet — blog about it! Open Source for the win!

14 thoughts on “Outputting Caldera Form Entries on the frontend

  1. Will this code output each column represented on the backside?

    They offer shortcodes, so I guess I’m not getting what your are doing different here. Sorry for being dense.

    Looking for a solution to output the shortcoded entry viewer that shows all the columns exactly like the backend does, not seeing any practical example in the wild. The folks at Caldera had no idea what I was even talking about apparently from their replies, to my pre-sales question.
    I assume they offer excellent support normally.

  2. My forms will be used for users to submit multiple versions of the same form. Is there a way to allow users to view and edit their own forms? Showing them one form entry is not enough and giving them the viewer allows them to see all forms saved by all users. I need to restrict users to their forms only. I love this plugin and I don’t want to look for ANY other options. Plus I’ve spent a great deal of time learning and falling in love with Caldera Forms.

  3. Thanks for this it was just what I was looking for. I have edited your sample code to include my field slug names rather than yours but I am still not outputting any data. Am I missing something? Do I need to change anything else?

  4. Thanks very much once again. I persevered and found the answer to my own question.

    To display any of the fields using this method you MUST ensure that the field has the ‘Show in Entry List’ option ticked on the field edit window.

    I have created my own plugin and pulled the data successfully into a page.

  5. This is soooooo nice!!
    I used it and it owrked like a charm! Thank you so much!

    While it does work perfectly when used as a shortcode, inside let’s say a page, I can’t seem to get it to work inside a form as a default value for a field. Imagine I want to set the initial value of a field in a form to a value of a field from let’s say the last entry submitted. I tried using a filter as described here https://calderaforms.com/doc/setting-field-default-values-dynamically/. This code works if used as is, but when I tried to combine it with your solution it breaks. Please have a look at my code:

    add_filter( ‘caldera_forms_render_get_field’, function( $field ) {
    if( ‘fld_817562’ == $field[ ‘ID’ ] ){
    require_once( CFCORE_PATH . ‘classes/admin.php’ );
    $form_id = ‘CF5acb741fe8740’;
    //$data = Caldera_Forms_Admin::get_entries( $form_id, 1, 9999999 );
    $field[ ‘config’ ][ ‘default’ ] = ‘0’;
    }
    return $field;
    });

    the line that is commented out (calling the get_entries) is what breaks the code. Can you imagine why?

    Thanks!

  6. Hey Matt,

    When i Try to implement your code im only getting able to pull the Data for 3 fields. The First name, last name and email. All the Other Fields are not populating on the front end. Any Idea why this might happen?

    1. See my post of March 18 at 5.53pm and make sure you have this set for the fields you want to show.

  7. This is a great writeup. Thank you so much. I was able to implement it with no issues.
    I do have a question. Have you found a way to add a “Details” button to your out put that will show all data for that entry. Similar to what is seen from the Admin View.
    I’d like to have the info available to be viewed without people needing to login.

    1. HI Dana, glad you found it useful. All the data is available already in that snippet above. If you look at line 16, that’s getting the entire entry. With that, you can get each individual field in a similar manner to how I did, like `$entry[‘data’][‘first_name’]`. You can change the markup to have your “Details” button and use some jQuery to hide/show a section that holds any/all of the info that you want. Thanks!

  8. I know we need to change this

    RSVPs
    Name Events Comments
    <?php
    foreach ( (array)$data['entries'] as $entry ) {
    echo '’ . $entry[‘data’][‘first_name’] . ‘ ‘ . $entry[‘data’][‘which_events_will_you_attend’] . ‘ ‘ . $entry[‘data’][‘comments_questions’] . ”;
    } ?>

    with our custom too . My question is where will I put the file
    cf-entries.php in caldera form directory?

Leave a Reply

Your email address will not be published. Required fields are marked *

  
Please enter an e-mail address