Contact me if you need to build a complex form with complex functions by using Caldera Forms (Create new user, send SMS to user, email validation, delete user, delete post...)I love Caldera Forms, it is much more than a contact form. This superb plugin could do lots of things from making a Search Form, building a Booking Form…

In this tutorial, I will try to display Caldera Forms’ entries in a table.

I/ Preparing a demo form

For demonstration, I will make a form to record list of plugins I am using for my websites which includes their names, categories, short descriptions and the link to their tutorials.

  • Order of Entries: Set a hidden field which has Increment Value start from 1 in order to track order of entry (1, 2, …) – Slug = no
  • Name of Plugin: Text field with Slug = name_of_plugin
  • Plugin Category: Drop-down Select field with Slug = plugin_category
  • Short Description with Slug = plugin_desc
  • Plugin Tutorial: URL field with Slug = plugin_tutorial
  • Submit button, : Button field with Slug = submit_plugin
  • The form was shown in this page: Demo forms for Caldera Forms
  • I will add some plugins and go to next step.

II/ Modify code of Matt Cromwell

Giving all credit to Matt Cromwell for this cool code snippet. I just try to modify to make it has a little better look.

add_shortcode('cf_entries', 'mc_cfes_output');

function mc_cfes_output($atts) {

  $atts = shortcode_atts( array(
    'id' => '',
    'number' => '999'
  ), $atts, 'cf_entries' );

  //in front-end admin class is not included
  require_once( CFCORE_PATH . 'classes/admin.php' );

  //get all entries (page 1 with 9999999 entries per page should do it:)
  $data = Caldera_Forms_Admin::get_entries( $atts['id'], 1, $atts['number'] );

  ob_start();
  ?>
<style>
  
    table { 
      width: 100%; 
      border-collapse: collapse; 
      margin:50px auto;
    }

/* Zebra striping */
    tr:nth-of-type(odd) { 
      background: #eee; 
    }

    th { 
      background: #3498db; 
      color: white; 
      font-weight: bold; 
      font-size:15px;
    }

    td, th { 
      padding-left: 10px; 
      border: 1px solid #ccc; 
      text-align: left; 
      font-size: 13px;
    }

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
  @media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px)  {

    table { 
      width: 100%; 
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
      display: block; 
    }
  
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
  
    tr { 
      border: 1px solid #ccc; 
    }
  
    td { 
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #eee; 
      position: relative;
      padding-left: 50%; 
    }

    td:before { 
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
      /* Label the data */
      content: attr(data-column);

      color: #000;
      font-weight: bold;
    }

}		
    
    </style>
    
    <div class="cf-entries">
      
<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Plugin Name</th>
      <th>Plugin Category</th>
      <th>Short Description</th>
    <th>Plugin Tutorial</th>
    </tr>
  </thead>
  <tbody>
      
  <?php foreach ( (array)$data['entries'] as $entry ) {
      echo '<tr>
          <td>'. $entry['data']['no'] .'</td><td>'.$entry['data']['name_of_plugin'].'</td><td>'.$entry['data']['plugin_category'].'</td><td>'.$entry['data']['plugin_desc'].'</td><td>'.$entry['data']['plugin_tutorial'].'</td></tr>';
    } ?>
    
  </tbody>
</table>

    </div>
    
    


  <?php 

  $output = ob_get_clean();

  return $output;

}

III/ Showing Caldera Forms’ entries on Front-End

You need to tick Show in Entry List on the field you want to show on entriesYou this shortcode to show the table of entries
[cf_entries id="CF5cebf2b2d867a" number="50"]
CF5cebf2b2d867a is the ID of Demo Form, the result as in the table below

No. Plugin Name Plugin Category Short Description Plugin Tutorial Submitted Date
6Caldera Forms Run ActionA free add-on for Caldera Forms. A simple, free form processor that lets you do anything with your form data, by specifying an action to run on form submission.https://wordpress.org/plugins/caldera-forms-run-action/2019-06-10
5PluginceptionOthersA plugin that lets you quickly and easily create new plugins.https://wordpress.org/plugins/pluginception/2019-06-10
4
3fdggfdgFormsdfgsgdfgdfsgdsf.com
2FacetWPSearch - FilterAdvanced Filtering and Faceted Search Plugin for WordPress
1Oxygen BuilderPage BuilderBest Page Builder Ever
4Plugin Notes PlusOthersComment on your plugin
3ElementorPage BuilderWordPress Page Builderhttps://giangle.dev/category/wordpress-tutorials/elementor/
2Caldera FormsFormsCaldera Forms - More than a contact form, it can do lots of thingshttps://giangle.dev/category/wordpress-tutorials/caldera-form/

Notice: If you need the reverse the order of entries, you can replace this code

foreach ( (array)$data['entries'] as $entry )

by this one

foreach ( array_reverse((array)$data['entries']) as $entry )

Credit:

GiangLe.DEV

My name is Giang, a Vietnamese guy living in Thanh Hoa City, Vietnam. I am a WordPress Developer, learning to master WordPress and Laravel PHP Framework.

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
GiangLe.DEVThe Dinosaur Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
The Dinosaur
Guest

Awesome. Tried. It worked.
Is there any way to show only all fields for logged-in users, and order numbers and names for users who are not logged in?

Close Menu