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
$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.
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
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
- 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!