In this article we are explaining how to create a employee timesheet using Formidable Forms, ideal for home or remote workers or anyone needing to record dates and times in an online form.

This article assumes that you are using the latest version of Formidable Pro and know how to add PHP snippets to your site. Along with a basic understanding of HTML and CSS.

The employee timesheet application consists of three key parts:

1. A form for entering the dates and times worked of employee.
2. A filter form for filtering the dates viewable (optional) & by staff members.
3. A view for displaying the employee logs.

We built this application using the following steps:

Step 1: Build the initial form for our staff timesheet

Firstly, we need to create the entry form. The entry form consists of:

1. A date field to capture the date being entered.
2. 2 time fields to capture the start and end times.
3. A text field to indicate the length of a lunch break. In this instance the time is fixed to one hour, so it’s safe to leave this as a read-only field but you can adjust as required.
4. A toggle field to switch the annual leave status.
5. A hidden field which will calculate the time worked for each entry.

Once we have the form we need to add a PHP snippet to our functions.php file, a custom plugin file or using the Code Snippets plugin.We have edited to the snippet provided by the Formidable Team (foundHERE) to include the lunch hour and remove this from the total hours worked:

add_filter('frm_validate_field_entry', 'calculate_worktime', 11, 3);
function calculate_worktime($errors, $field, $value){
  if($field->id == 1900){ //change 26 to the ID of the hidden or admin only field which will hold the calculation
	   $rep_section = $_POST['item_meta'][1904];
	
	    unset($rep_section["form"]);
	    unset($rep_section["row_ids"]);
	
	$x1 =   0;
	$x2 =   0;
	$totaltimes = array();
	$totaltime1 = array();
	   foreach($rep_section as $rep=> $val){
		 unset($rep[0]);
		 unset($rep[1899]);
		 $x1 = (strtotime($val[1895]));
		 $x2 = (strtotime($val[1896]));
		
		$start = $x1;
		$end =  $x2;
$lunch = (strtotime($_POST['item_meta'][1897])); //change 25 to the ID of the lunch hour field
    $totaltime = ($end - ($start + $lunch));
    $hours = intval($totaltime / 3600);   
    $seconds_remain = ($totaltime - ($hours * 3600)); 
    $minutes = intval($seconds_remain/ 60);
    //$seconds = ($seconds_remain - ($minutes * 60)); Uncomment this line if you want seconds calculated.
    $leading_zero_for_minutes = $minutes < 10 ? '0' : '';
    //$leading_zero_for_seconds = $seconds < 10 ? '0' : '';//Uncomment this line if you're including seconds.
    $totaltimes[] = $hours . ':' . $leading_zero_for_minutes . $minutes;
	  } 
		 
$totaltime = implode("
", $totaltimes);
  
      $value = $_POST['item_meta'][1900] = $totaltime; //change 26 to the ID of the hidden or admin only field which will hold the calculation

  	}
  return $errors;
}

The above code will execute when the form is submitted and add calculate the numbers of hours worked and save it to the hidden field. This could also be done on the fly using JS if required.

We then created a new form that will act as a search and filter for our view. This is a very basic form containing 2 fields:

• A date field for the start date
• A date field for the end date

In the form settings we set the following options:

1. Select “Do not store entries submitted from this form”
2. Change the ‘On Submit’ option to ‘Redirect to URL’
3. In the URL enter www.YourSite.com/YourView/?start_date=[551]&end_date=[552] and change 552 and 553 to the ID’s of your 2 date fields.

Now you can create your view which will display the hours worked. You may wish to create 2 views depending on your requirements as it may be useful to have 1 view for the employee to view their own hours and a 2nd view for Administrators to view everyone’s working hours.

In our view, under basic settings, we have selected Form 1 (our time sheet form) and ‘All Entries’ as the view type. Our view has been set up as an html table, but you may wish to build yours differently.

Adding a URL Parameter

We have also added an additional snippet to our functions.php file to allow us to use the ‘if_get_param’ variable and display page content based on a URL parameter. To do this please add the following script to your functions.php file, a custom plugin file or using the Code Snippets plugin.

/* Add Formidable Get-Param Shortcode */
add_shortcode('if_get_param', 'check_get_param_value');
function check_get_param_value( $atts, $content="" ) {
    if ( ! isset( $atts['name'] ) || ! isset( $atts['value'] ) || ! isset( $atts['type'] ) ) {
        return $content;
    }
    $type = $atts['type'];
    if ( $type == 'greater_than' ) {
        $type = '>';
    } else if ( $type == 'less_than' ) {
        $type = '<';
    } else if ( $type == 'equals' ) {
        $type = '==';
    } else if ( $type == 'not_equal' ) {
        $type = '!=';
    }
    $get_value = isset( $_GET[ $atts['name'] ] ) ? $_GET[ $atts['name'] ] : '';
    if ( ! FrmFieldsHelper::value_meets_condition( $get_value, $type, $atts['value'] ) ) {
        $content = '';
    }
    return do_shortcode( $content );
}

This will then allow you to use the following shortcode. For more information on this please click HERE:

[ if_get_param name="Whatever" type="not_equal" value="" ]Your Content Here[ /if_get_param ]

Adding a search filter to the view

Then, in the ‘Before Content’ section we have added the following code:

[ if_get_param name="start_date" type="not_equal" value="" ]
Filter: [ get param="start_date"] - [ get param="end_date"]Clear Filter
[ /if_get_param ]

This shortcode will display the content of the search filter and provide a ‘Clear Filter’ link to easily reset the filter. Change Clear Filter to the URL of your view.

The View
We will then add the following directly underneath in the Before Content section:

This step is obviously more down to personal preference and how you wish to display the information but in essence your page will need to contain: