[cfdb-table]

October 18th, 2014

This documentation applies to version 2.6 and later

Summary of Shortcode Options

Option Example

 

Description
form [cfdb-table form="myform"] Required. Designates the form to display. All rows and columns are displayed by default
role [cfdb-datatable form="myform" role="Author"] Make short code only display output for user’s with minimum-required role. Choices are

  • Administrator
  • Editor
  • Author
  • Contributor
  • Subscriber
  • Anyone

WARNING: this setting is overridden by plugin setting in WP Admin page Contact -> Database Options -> Can See Submission when using shortcodes
(since 2.4.1)

show [cfdb-table form="myform" show="col1,col2"] Limits columns to be shown to be those designated (comma-delimited list)
hide [cfdb-table form="myform" hide="col1,col2"] Does not show listed columns (comma-delimited list)
header [cfdb-table form="myform" header="false"] Show or do not show the table header. Valid values are true (the default) and false
headers [cfdb-table form="myform" headers="your-name=Name,ex_field1=Email"] Allows you to change the name displayed in the table header. Map a form field names to a more readable display names. (Since 2.5.1)
limit [cfdb-table form="myform" limit="10"] One number: limit=”10″ means show first 10 rows. Is the same as limit=”0,10″
Two Numbers: limit=”100,10″ means show 10 rows starting at row #100)
random [cfdb-table form="myform" random="2"] Display 2 random rows from those that the short code finds. (Since 2.4)
orderby [cfdb-table form="myform" orderby="last-name,first-name"] Sort rows by designated columns. Use “column-name desc” to sort in descending (reverse) order
search [cfdb-table form="myform" search="Simpson"] Select rows to display that have any cell with the search text in it (case insensitive). Intended to mimic behavior of the “Search” field in the DataTable
filter [cfdb-table form="myform" filter="col1=Simpson"] Select which rows to display based on filter expression. More powerful than “search”, it can filter on multiple columns with boolean and regular expressions. If both “search” and “filter” are specified, “search” is ignored.
Options specific to this shortcode
id [cfdb-table form="myform" id="myid"] Sets the id attribute on the table tag
class [cfdb-table form="myform" class="myclass"] Sets the class attribute on the table tag
style [cfdb-table form="myform" id="myid" style="#myid th > td { font-size: x-small; background-color: #E8E8E8;  }"] Injects input CSS into a style tag. Use in conjunction with id or class to identify what you are styling.

 

The [cfdb-table] short code has all the basic shortcode options. But of particular interest to this shortcode are options that help you style the resulting table.

 

Apply your CSS to the table: set the table’s ‘class’ or ‘id’ attribute:

  • [cfdb-table form="your-form" class="css_class"](outputs<table class="css_class">(default: class=”cf7-db-table” and a <style> tag for it)
  • [cfdb-table form="your-form" id="css_id"](outputs<table id="css_id">(no default id)
  • [cfdb-table form="your-form" id="css_id" class="css_class"](outputs <table id="css_id" class="css_class">)

Applying different styles to different columns: By default, all<th>and<td>tags are giventitle=the field (column) name. For example, forfield1you will see tags:

  • <th title="field1"><div>field1</div></th>
  • <td title="field1"><div>{row value for field1}</div></td>

(Notice the there is a<div>nested in the<th>and<td>)

Use thistitleattribute to style columns and their headers individually. Example CSS selectors:

Injecting CSS

You can include your own style sheet on the page, but you can also use the shortcode to inject a style tag to handle CSS for your table. To do so, use the style option, and just put in raw CSS. The shortcode output will wrap that in a <style> tag.

Here are some example of CSS selectors you can use to style your table. Assuming shortcode using “class” and/or “id”:

  • [cfdb-table form="myform" id="myformid" class="myformclass"]
  • and the table includes form field/table columnfield1

Format Column Headers: select the<th>for columnfield1

  • WARNING: This won’t work to embed in the “style” attribute of a short code because WordPress does not allow nested square brackets inside the square brackets of a short code. So you would need have another way to put this CSS onto your page, perhaps through your theme.
  • Using id: #myformid th[title="field1"] { /* add your style here */ }
  • Using class: table.myformclass th[title="field1"] { /* add your style here */ }

Use this to style just the<th>(like its height and width) but not the text in the cell. Remember: the text of the header is nested inside a div (<th><div>)

Format Column Header Text: Similarly, select the nested div (<th><div>) for column field1

  • WARNING: This won’t work to embed in the “style” attribute of a short code because WordPress does not allow nested square brackets inside the square brackets of a short code. So you would need have another way to put this CSS onto your page, perhaps through your theme.
  • Using id:  #myformid th[title="field1"] > div { /* add your style here */ }
  • Using class: table.myformclass th[title="field1"] > div { /* add your style here */ }

Format Data Cells: selects each table cell<td>in the columnfield1

  • WARNING: This won’t work to embed in the “style” attribute of a short code because WordPress does not allow nested square brackets inside the square brackets of a short code. So you would need have another way to put this CSS onto your page, perhaps through your theme.

  • Using id: #myformid tbody td[title="field1"] { /* add your style here */ }
  • Using class: table.myformclass tbody td[title="field1"] { /* add your style here */ }

 

Use this to style just the<td>(like its height and width) but not the text in the cell. Remember: the text of the field is nested inside a div (<td><div>)

Format Data Cell Text: selects the nested div (<td><div>) for column field1

  • WARNING: This won’t work to embed in the “style” attribute of a short code because WordPress does not allow nested square brackets inside the square brackets of a short code. So you would need have another way to put this CSS onto your page, perhaps through your theme.

  • Using id: #myformid tbody td[title="field1"] > div { /* add your style here */ }
  • Using class: table.myformclass tbody td[title="field1"] > div { /* add your style here */ }

Use this to specifically format the text in the table cells

 

 

 

  1. March 9th, 2012 at 07:00 | #1

    Hi, thank for this excellent plugin! I have one question. I use “Email to download” plugin which combines CF7 and WP Download monitor. When user click to download, page with form is displayed, after all fields are filled email with link is send. All data are perfectly colleted by cdfb except what file is downloaded. Can i include page name to cdfb report? It will be very useful for me.

    Sorry for poor english ;) and thanks for any help!

  2. March 9th, 2012 at 10:49 | #2

    Nevermind – cfdb works with “CF7- Dynamic Text Extension” plugin extension ;)

  3. May 1st, 2012 at 15:22 | #3

    Great plugin, thank you!

    My question. I am struggling with CSS and don’t seem to be able to get it “injected” correctly. What I want is a larger font and the alternating rows an alternating background color. Are there any examples I can follow somewhere getting lost with the { /* add your style here */ } part of all this. :)

  4. July 2nd, 2012 at 07:50 | #4

    Maybe I did not read good enhough, but the data of the contact sheet is not visable for non administrater visitors. What do I do wrong…? So only when I’m logged on as administrator I see the data. But I want to show the data to any visitor of the site. It’s like a poll. People can predict the name, length and weight of our unborn child, and we want to share all the pedictions with other people. I hope you can help me!

    • Michael Simpson
      July 2nd, 2012 at 09:07 | #5

      Go to admin Database Options -> Can See Submission when using shortcodes
      set to “Anyone”

  5. July 2nd, 2012 at 18:56 | #6

    Hi Michael!

    I found it! Great Thanks!
    For this question I did search the internet, but I really couldn’t find a solution. The problem now is, that I want a real table. But I guess that the ccs of the theme I use does not facilitate that. So I do get a list, but the rows are to close to each other. I prefer some publishing on the table. Do you have a shortcode for CELLPADDING and CELLSPACING. That would be great!

    Thanks again!

    @Michael Simpson

  6. Michael Simpson
    July 4th, 2012 at 13:28 | #7

    @Maikel
    Try using the “style” attribute of the short code to inject CSS described on this page.

  7. Jose
    August 10th, 2012 at 05:43 | #8

    Hi Michael!!

    First, thanks for your great Plugin!!

    I have made a table with several fields, one of them is a picture, is it possible that the field will show a display of the image? If not possible, could we set a default text that link to the image? I know the [cfdb-html form="myform" filelinks="img"] but i can´t mix cfdb-html and cfdb-table.

    Thanks in advance.

    • Michael Simpson
      August 10th, 2012 at 11:53 | #9

      I don’t think I have a way to get the image from [cfdb-table]. You can use [cfdb-html] to create a table. You would have to manually put in the open and close table tags, then use [cfdb-html] to output the rows along with an img tag to show the image.

  8. Ekansh
    October 3rd, 2012 at 12:54 | #10

    Hi Michael,

    I am unable to inject css in [cfdb-table]. the code snippet you provided are somewhat ambiguous to me. can you please provide me an example code snippet in which you are using a pattern in background (image) and header of table is bold.

    please provide me this.

    • Michael Simpson
      October 3rd, 2012 at 14:19 | #11

      post your css and short code and I’ll try to send you the short code with the css in it.

  9. October 15th, 2012 at 08:36 | #12

    hello

    this may seem crazy

    but what where do you actually place code?
    [cfdb-table form="database" show="submit_time"]

    i just want the database to pick up this show=”submit_time” value. but dont want it to place on the page?

  10. Michael Simpson
    October 15th, 2012 at 18:29 | #13

    @James
    I don’t understand. I think you have messages on a couple pages here and on the WP forum (or I’m confusing another James). I can’t follow your thread. I’d prefer this be on the WP forum.

  11. October 20th, 2012 at 17:58 | #14

    @Michael Simpson
    Can you direct me to documentation on how to create the [cfdb-html] short code; ie where does it get saved, what is the format, how to populate the table from the DB…

    I am interested in creating a table to display an image from the DB.

    • Michael Simpson
      October 20th, 2012 at 20:59 | #15

      The short code, once created, you goes in a post.
      The Database Short Code page in the WP Administration section can help you build one based on your existing forms & fields. See its documentation page.

  12. Andycahn
    October 26th, 2012 at 12:01 | #16

    This is extremely useful. Thanks and great work.

    Is it possible to create a table column that combines field data? For example, one “Contact” column with the name hyperlinked to its email address, instead of taking up space with two column. The excel function is like this, with emails in column A and Names in column B.

    =hyperlink(“mailto:”&a1,b1)

    • Michael Simpson
      October 26th, 2012 at 12:36 | #17

      There is no way to do this using [cfdb-table]. But if you use [cfdb-html] you can lay out a table any way you like it. The downside is you have to write the HTML tags for it. You would need to write something like this:

      <table><tbody>
      [cfdb-html form="Contact form 1"]<tr><td><a href=”mailto:${ColumnA}”>${ColumnB}</a></td></tr>[/cfdb-html]
      </tbody></table>

  13. Michael Shinosky
    November 4th, 2012 at 12:50 | #18

    Greetings,

    Thanks for the great plugin. Is this possible with the shortcode creator:

    I have a table displaying the data from a job application form. I need the ability to “deny” or “accept” an application that sends a corresponding email to the applicant. So the code would be something like:

    Output: first line of applicant info that have not been sent an email.
    Two buttons: “Deny” “Accept” that sends canned email to applicant.
    Updates: Applicant info in database that email has been sent
    Updates: If applicant was “accepted” or “denied”
    Repeat for next applicant info…

    Thanks.

    • Michael Simpson
      November 4th, 2012 at 16:12 | #19

      No, not possible.

  14. Michael Shinosky
    November 5th, 2012 at 11:13 | #20

    @Michael Simpson

    Hmm… seems like it is possible to me. Add a couple of dynamic hidden fields to the top of the form in CF7 like:

    [dynamichidden emailsent “false”]
    [dynamichidden denyoraccept “null”]

    and as long as the email address and hidden fields stay with the correct “field_id”

    Which from what I can tell will stay the same – I should be able to search, output and update with php and some sql commands. Or am I missing something? Maybe something to do with how shortcodes work? In which case – eliminating the use of a short code and developing something with AJAX might work?

    Thanks.

  15. Michael Simpson
    November 5th, 2012 at 12:47 | #21

    @Michael Shinosky
    I see. I haven’t used the dynamic options. If you can have such a field call a php function to populate its value, then you could register a hook that uses the API (http://cfdbplugin.com/?page_id=367) of this plugin to search for a value.

  16. November 12th, 2012 at 08:59 | #22

    hi mike

    I have completely misunderstood the instructions on injecting CSS, it seems. It doesn’t work, anyway. I have tried the following after reading your instructions:
    [cfdb-table form=”Volunteer Signup” id=”PH” show=”from_email,ex_field6,ex_field3,ex_field5,ex_field7,first_name,last_name,” limit=”200″ orderby=”Submitted desc” style=”PH tbody td [title=’ex_field6′] {background-color: #FFFF00}” ]

    Nada. what i really want is to make different column widths for each column, not turn the background red! What am I doing wrong here?

    Thanks …

    • Michael Simpson
      November 12th, 2012 at 12:44 | #23

      The style should be:
      style="#PH tbody td[title='ex_field6'] {background-color: #FFFF00}"

      …but that might not work either. When I tested this just now, WordPress is getting tripped up on the “]” inside the style value and interpreting that as the end of the short code. It appears you can’t use the “[xxx]” CSS selector here.

      I don’t have a good work-around other than to put the style tag on the page or in the theme manually.

  17. November 12th, 2012 at 12:31 | #24

    Hi Michael – What im asking quite simple for you i imagine. (sorry im quite new) I want to place the unique ID that is generated upon each form submit into the database as opposed to it appearinfg on the actual web page. How Do i do this?

    @Michael Simpson

  18. Michael Simpson
    November 12th, 2012 at 12:49 | #25

    @James
    Each submission already has a unique ID. It is a file named “submit_time” and is a number. By default, it is not shown in a short code, but can be added to the “show” value of a short code. By default, ‘submit_time’ is also converted into the more human-readable “Submitted” column in a short code. But you can treat them like two different fields with regard to showing & hiding them.

  19. Michael Shinosky
    November 15th, 2012 at 21:48 | #26

    @Michael Simpson
    Thanks Michael for the help!! Got it Done!!!! Didn’t need to create a hook. I used the submit_time field in the table to find the ‘emailsent’ field value and my ‘denyoraccept’ field value created with dynamic hidden fields plugin for CF7. It’s for a back end type page where the HR department can go and send an applicant an accept or deny email – then update the database table by passing variables to the same page. It can also export all to CSV with the link generated by your plugin code. Here’s the code if anyone wants to use it. It’s not the cleanest or most efficient but it works. If anyone sees how it can be more efficient – by all means :)

    .hrbuttons {
    -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7 !important;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7 !important;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7 !important;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ) !important;
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ) !important;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#79bbff’, endColorstr=’#378de5′) !important;
    background-color:#79bbff !important;
    -moz-border-radius:6px !important;
    -webkit-border-radius:6px !important;
    border-radius:6px !important;
    border:1px solid #84bbf3 !important;
    display:inline-block !important;
    color:#ffffff !important;
    font-family:arial !important;
    font-size:11px !important;
    font-weight:bold !important;
    padding:6px 3px !important;
    text-decoration:none !important;
    text-shadow:1px 1px 0px #528ecc !important;
    }
    .hrbuttons:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ) !important;
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ) !important;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#378de5′, endColorstr=’#79bbff’) !important;
    background-color:#378de5 !important;
    }
    .hrbuttons:active {
    position:relative !important;
    top:1px !important;
    }
    /* This imageless css button was generated by CSSButtonGenerator.com */
    .entry-content {
    display: none;
    }
    #box-table-a {
    font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
    }
    #box-table-a th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe;
    border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: black;
    }
    #box-table-a td {
    padding: 8px;
    background: #e8edff;
    border-bottom: 1px solid #fff;
    color: black;
    border-top: 1px solid transparent;
    }
    #box-table-a tr:hover td {
    background: #d0dafd;
    color: black;
    }

    <?php

    add_filter( 'genesis_after_post_content', 'customcontent' ); // This is to add after the normal page/post content.

    function customcontent() {

    $urlsent = $_GET['urlsent'];
    $twang = $_GET['twang'];
    $id = $_GET['submitted'];
    echo 'NamePhoneEmailPosition Applied';
    require_once(ABSPATH . ‘wp-content/plugins/contact-form-7-to-database-extension/CFDBFormIterator.php’);
    $exp = new CFDBFormIterator();
    $exp->export(‘Job Application’, $atts);
    while ($row = $exp->nextRow()) {
    $submittime = $row[‘submit_time’];

    extract($row);
    $wholename = $firstname . ” ” . $lastname;
    $urldeny = “www.domain.com/index.php/intermediatepage?twang=deny&submitted=” . $Submitted;
    $urlaccept = “www.domain.com/index.php/intermediatepage?twang=accept&submitted=” . $Submitted;

    if ( $Submitted === $id ) {

    switch ($twang) {
    case “accept” :
    $headers = “From: $from_add \r\n”;
    $headers .= “Reply-To: $from_add \r\n”;
    $headers .= “Return-Path: $from_add\r\n”;
    $headers .= “X-Mailer: PHP \r\n”;
    $from_add = “blah@blah.com”;

    $to_add = $email; //<– put your yahoo/gmail email address here

    $subject = "Your Submitted Application With blahblah";
    $message = "Hello " . $firstname . ",

    Thank you for submitting your application to Blah Blah. We will contact you shortly to set up an interview.

    Sincerely,

    The Human Resources Department";

    if(mail($to_add,$subject,$message,$headers))
    {
    $msg = "Accept Email Sent To Applicant“;

    $dbaddress = “blahblah”;

    $database = “blahblah”;

    $user = “blahblah”;

    $password = “blahblah”;

    $con = mysql_connect($dbaddress, $user, $password);
    if (!$con)
    {
    die(‘Could not connect: ‘ . mysql_error());
    }
    //
    mysql_select_db($database, $con);

    mysql_query(“UPDATE wp_cf7dbplugin_submits SET field_value=’true’
    WHERE field_name=’emailsent’ AND submit_time=$submittime “);

    mysql_query(“UPDATE wp_cf7dbplugin_submits SET field_value=’accept’
    WHERE field_name=’denyoraccept’AND submit_time=$submittime “);

    mysql_close($con);

    }
    else
    {
    $msg = “Error Sending Email! Please Try Again“;
    }

    echo $msg;

    break;
    case “deny” :
    $headers = “From: $from_add \r\n”;
    $headers .= “Reply-To: $from_add \r\n”;
    $headers .= “Return-Path: $from_add\r\n”;
    $headers .= “X-Mailer: PHP \r\n”;
    $from_add = “blahblah@blah.com”;

    $to_add = $email; //<– put your yahoo/gmail email address here

    $subject = "Your Submitted Application With blahblah";
    $message = "Hello " . $firstname .",

    After careful consideration of your background, skills and qualifications, we have chosen another candidate whose skills more closely match those required by the position. Thank for your interest in blahblah and best of luck in your future endeavors.

    Sincerely,

    The Human Resources Department";

    if(mail($to_add,$subject,$message,$headers))
    {
    $msg = "Deny Email Sent To Applicant“;

    $dbaddress = “blah”;

    $database = “blah”;

    $user = “blah”;

    $password = “blah”;

    $con = mysql_connect($dbaddress, $user, $password);
    if (!$con)
    {
    die(‘Could not connect: ‘ . mysql_error());
    }

    mysql_select_db($database, $con);

    mysql_query(“UPDATE wp_cf7dbplugin_submits SET field_value=’true’
    WHERE field_name=’emailsent’ AND submit_time=$submittime “);

    mysql_query(“UPDATE wp_cf7dbplugin_submits SET field_value=’deny’
    WHERE field_name=’denyoraccept’ AND submit_time=$submittime “);

    mysql_close($con);
    }
    else
    {
    $msg = “Error Sending Email! Please Try Again“;
    }

    echo $msg;
    break;
    default :
    break;
    } // switch

    } // if submitted

    elseif ($urlsent == ‘emailed’){
    if ($emailsent == ‘true’) {

    echo “$wholename$homephone$email$positionappliedEmail Sent $denyoraccept”;
    }
    }
    elseif ($urlsent == ‘accept’){
    if ($denyoraccept == ‘accept’) {
    echo “$wholename$homephone$email$positionappliedApp Accepted”;
    }
    }
    elseif ($urlsent == ‘deny’){
    if ($denyoraccept == ‘deny’) {
    echo “$wholename$homephone$email$positionappliedApp Denied “;
    }
    }
    elseif ($urlsent == ‘all’){

    echo “$wholename$homephone$email$positionapplied”;
    if ($emailsent == ‘false’) {
    $urldeny = “www.domain.com/index.php/hrbackend?twang=deny&submitted=” . $Submitted;
    $urlaccept = “www.domain.com/index.php/hrbackend?twang=accept&submitted=” . $Submitted;
    echo “Accept Deny“;
    }
    else {
    echo “Denied Or Accepted: $denyoraccept“;

    }

    }

    else {
    if ($emailsent == ‘false’) {
    $urldeny = “www.domain.com/index.php/hrbackend?twang=deny&submitted=” . $Submitted;
    $urlaccept = “www.domain.com/index.php/hrbackend?twang=accept&submitted=” . $Submitted;
    echo “$wholename$homephone$email$positionappliedAcceptDeny“;

    }

    }

    } //close the while

    $urlall = “www.domain.com/index.php/hrbackend?urlsent=all”;
    $urldeny = “www.domain.com/index.php/hrbackend?urlsent=deny”;
    $urlaccept = “www.domain.com/index.php/hrbackend?urlsent=accept”;
    $urlemailed = “www.domain.com/index.php/hrbackend?urlsent=emailed”;
    $urlnotsent = “www.domain.com/index.php/hrbackend”;
    echo ”
    “;
    if (($urlsent == ‘emailed’)) {
    echo ”
    Show All
    Show Only Denied
    Show Only Accepted
    Show All Not Emailed
    “;
    }
    elseif ($urlsent == ‘accept’){
    echo ”
    Show All
    Show Only Denied
    Show All Not Emailed
    Show All Emailed“;
    }
    elseif ($urlsent == ‘deny’){
    echo ”
    Show All
    Show All Not Emailed
    Show Only Accepted
    Show All Emailed“;
    }
    elseif ($urlsent == ‘all’){
    echo ”
    Show All Not Emailed
    Show Only Denied
    Show Only Accepted
    Show All Emailed“;
    }
    else {
    echo ”
    Show All
    Show Only Denied
    Show Only Accepted
    Show All Emailed“;
    }

    echo ”;

    echo ‘Export All Records to CSV‘;
    } // function custombutton

    genesis(); //

  20. December 12th, 2012 at 15:31 | #27

    I have created custom roles allowing to group users but only giving them Subscriber level permission. This role does not show up under the “Can SeeEdit/Delets Submission data” options. So Subscribers can see the data, when I only want my custom group or above to have access. Can you make this plugin read these extra roles? The plugin also allows me to set custom permissions for each role. Can you tell me what the permissions are for the “Can SeeEdit/Delets Submission data” and I can set it that way?

    • Michael Simpson
      December 12th, 2012 at 19:08 | #28

      I would have to change code in the plugin to make it read additional roles.
      The role names map to WP “capabilities”:
      ‘Administrator': ‘manage_options’
      ‘Editor': ‘publish_pages’
      ‘Author':’publish_posts’
      ‘Contributor':’edit_posts’
      ‘Subscriber': ‘read’
      ‘Anyone': ‘read’

Comments are closed.  Go To Support Forum