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!
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.
They have a shortcode that does exactly that for you. What wanted was a leaner way of showing the entries, with my own custom markup. I liked to my example in the article above, it’s under the RSVPs here:
https://www.mattcromwell.com/matts-turning-40-extravaganza/
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.
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?
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.
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!
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?
See my post of March 18 at 5.53pm and make sure you have this set for the fields you want to show.
THANKS for your Quick Reply… That totally did it !
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.
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!
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?
Thanks for emailing me back. and download the plugin “My Custom Functions” to put the cf-entries.php codes.
This tutorial works 100 % working. Thank you very much Matt!
Glad to hear it Ernesto!
Hi Matt, Thanks for your Post. I have not enough idea about programming language..
But I want to know how to display data or table in a page which data entries in Caldera form.
Please give me a idea.
which file or code I put my WP and where?
Please Please help me bro……
Please.
Alawal
You can do this in one of two ways.
1: Create a custom plugin for your site. (I recommend this way as it will always be available regardless of change or update of your theme).
2: Add it to functions.php. This should not be done on the master theme as when you update the theme you will lose the code edit. If you do it this way then make a child theme and add it to the child themes functions.php and it will be preserved on theme update.
Are you give me a custom plugin?
what is the procedure ?
Search on how to create a wordpress plugin. It is pretty easy and then just put Matt’s code in it and call it as he shows with the shortcode.
Worked for me. Created a ‘Potluck’ form. Users can see what others are bringing and admin can view on the backend with all of the other details (phone numbers and emails).
Thank you!
Glad to hear it, Jason, and thanks for the comment of support!
Thank you very much Matt!
This is exactly what I needed. Now the other guests see, who will attend and what food they will bring on the table :)
-Kind regards from Germany,
Olli
Glad to hear it, Olli, thanks for stopping by!
I am getting an anomaly with this. I have a multi select field with up to 9 entries. On the front end if 8 or 9 entries are chosen then rather than the value I am getting array shown. Is there anything I can tweak to get the correct display?
Hello Matt,
Your code is absolutely awesome !!
I have an extra question : I would like to show a table with a lot of entries (several thousand). Would you know how to modify your code to paginate the table ?
Many thanks !
Adrien
Glad to hear it’s working well for you. There’s two things you might consider.
1. Use Caldera Form’s built-in pagination for this function. The function we’re using is called “get_entries” You can see it here: https://github.com/CalderaWP/Caldera-Forms/blob/a49adb550b952d49e28f5dce3461406340ab58fa/classes/admin.php#L834 — it shows that you can set the pagination and the entries per page however you’d like. How you handle the next/prev is probably a question for the CF team
2. You could instead of using the built-in entries function, save your entries as CPTs instead. That way you can leverage all the power of WordPress’ WP_Query. You can read about how to do that here: https://calderaforms.com/doc/custom-processing-of-caldera-forms-submissions/\
Enjoy!
This code displays all form entries including those in the ‘Bin’ any suggestions for a modification to only show those entries that are live and not in the bin?
Th easiest way is to delete definitely the entries in the bin ;)
@Adrien that’s as maybe BUT I want to keep the entries in the backend for review, surely if they are marked as being binned they should not display on the front end.
Looks like there’s an argument in the entries called “active” and another called “trash”. So you should be able to exclude those within your function. See the source in Caldera Forms here:
https://github.com/CalderaWP/Caldera-Forms/blob/a49adb550b952d49e28f5dce3461406340ab58fa/classes/admin.php#L893
Hello Matt,
Thank you for posting this useful code. I have implemented it and its working.
I have a form that allows users to upload images. Is there a way to show the images through this shortcode?
Hi Farhat, yes you can. You just need to find how Caldera saves the upload and get the URL. For me I did a lot of var_dump-ing in order to target the items I wanted to display in my table. Have fun!
Hi Matt,
Thank you for explaining this. I have a question – how can I get notified of when someone has completed the form and submitted? Like I want the pDF versions of forms to be mailed to my administrator email whenever we receive a submission.
I thought this is the way it worked, you put a form on the website and get responses delivered to your email rather than me checking my dashboard for entries everynow and then to see if I recevied anything.
Could you kindly guide on this. Your help is deeply appreciated!
Thanks,
Rahul
HI Raul, for all admin notifications you’ll want to use Caldera’s built-in email notification system in addition. This is just for display on the front-end, but all of Caldera’s other features still will work for you.
I’m not familiar with how their PDF extension works, but if it supports adding the PDF to the email then you should be good there too.
Hi Matt, I just recently found this. Thank you. It’s a big help.
But I do have a question, how to display entries from the form base on the user who logged in on my site?
I have a membership site and I am trying to display all the entries base on the logged in user. Currently it shows all the form entries on my frontend. Any idea how to achieve this?
Hi Rodel,
You’ll need to add a conditional around the output, most likely by getting the current Logged In user ID. WordPress has a helper function for that purpose:
https://developer.wordpress.org/reference/functions/get_current_user_id/
Once you have the USER ID, you’ll have to compare it against the entry that you want to show. If they match, then you allow the output to be seen.
Something like this:
$id = get_current_user_id();
if ( $id == $entry ) {
echo $data;
}
Good luck!