CFDB Plugin

Problem: you want to display a list of form entries and have a link on each one to show expanded information about that one entry.

For the example below, let’s assume:

• We have a form named registration with entries in the database
• The registration form has fields: firstname, lastname, street, city, state, postalcode, country
• On the Master page, we want a table showing lastname, firstname sorted by lastname
• When we click on a link on the Master page, it takes us to the Detail page where we show all the fields for that entry.

We want the master page to have a table that looks like this:

And when we click on a Details link, we want to navigate to a page that shows all the information for one entry like this:

From Definition

Use whatever form plugin you like to create your form. For this example, I created a Contact Form 7 form like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<p>First Name (required)<br />
    [text* firstname] </p>
 
<p>Last Name (required)<br />
    [text* lastname] </p>
 
<p>Street <br />
    [text street] </p>
 
<p>City <br />
    [text city] </p>
 
<p>State or Province <br />
    [text state] </p>
 
<p>Postal code <br />
    [text postalcode] </p>
 
<p>Country <br />
    [text country] </p>
 
<p>[submit "Submit"]</p>

I added the form shortcode to a post and submitted some entries for testing.

Create two pages or posts in WordPress. The first will be the “Master” page that will display a table of form entries. The second will be the “Detail” page to so the details of a particular entry. You will need to know the URL of the Details page to add it as a link on the Master page.

Master Page

On the Master page I place this shortcode.

• Line 1 shortcode: change the value of form to your form name
• Line 1 shortcode: change the value of show to display those fields that you want. But keep the submit_time field.
• Line 1 shortcode: change the value of headers as desired or remove it.
• Line 1 shortcode: change the value of orderby as desired or remove it.
• On Line 6, replace the value of detailPageUrl in line with the URL to your Details page
• Optionally on Line 5, change the value of label to whatever you like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

[cfdb-table form="registration" show="firstname,lastname,submit_time" headers="firstname=First Name,lastname=Last Name,submit_time=Details" orderby="lastname"]
{{AFTER}}
<script type="text/javascript">
(function ($) {
    var label = "Details";
    var detailPageUrl = "http://your-site/2016/02/04/details-page/";
    detailPageUrl += (detailPageUrl.indexOf('?') === -1) ? "?st=" : "&st=";
    $('td[title="submit_time"] div').each(
            function () {
                var url = detailPageUrl + $(this).html();
                var link = '<a href="' + url + '">' + label + '</a>';
                $(this).html(link);
            })
})(jQuery);
</script>
{{/AFTER}}
[/cfdb-table]

Details Page

On the Details Page, let’s assume we want to display the values as shown below using the cfdb-html tag.

• Line 1: change the value of form to your form name
• Line 2-5: Rewrite the template HTML in your cfdb-html to match your fields

1
2
3
4
5
6

[cfdb-html form="registration" filter="submit_time=$_GET(st)"]
First Name: ${firstname} Last Name: ${lastname} <br/>
${street} ${city}  <br/>
${state} ${postalcode}  <br/>
${country} <br/>
[/cfdb-html]

What is happening here is that we take the submit_time value, which identifies a single form submission. The Master page constructs URLs to the Details page passing the submit_time in the URL (st parameter). Each row in the Master page has a URL with a different st value.

On the details page, the shortcode filter=”submit_time=$_GET(st)” only displays the values for that submission.

If you view the Details page directly then the shortcode will show no content. The st parameter must be in the URL for the shortcode filter to match a form submission.