How to build a WordPress task management system using Gravity Forms and GravityView

Does your team suffer from a lack of collaboration, inefficient task execution, and missed deadlines? If so, it’s time to think about implementing a WordPress task management system!

After all, what better platform to use for task management than the world’s most popular CMS? In this post, we’re going to show you how to build a custom task and project management app using Gravity Forms and GravityView.

We’ll start by setting up a “task submission” form in Gravity Forms where we can add new tasks as they arise. Next, we’ll use GravityView to create a View that allows users to filter, sort, edit, and update tasks from the front end. Finally, we’ll show you how to display only tasks assigned to the currently logged-in user.

Let’s get started! 🙌

💡 Check out a live demo of the finished task management system and get your own free trial site preloaded with all GravityKit add-ons!

Sneak Peek

Here’s a preview of the finished task management system:

Why do task management in WordPress?

WordPress is a versatile content management system (CMS) that powers over 42% of all sites across the web. WordPress is popular due to its flexibility. There are thousands of themes and plugins for WordPress that allow you to build versatile websites and applications.

WordPress is the CMS of choice for many businesses because it’s open-source and easy to use. This provides the perfect platform on which to build a custom task and project management system!

Furthermore, turning WordPress into a task management app saves you from having to learn another set of tools. Why not have your website, task management, and team collaboration all in one?

Why use Gravity Forms and GravityView for task and project management?

Gravity Forms is the most popular form plugin for WordPress, allowing you to capture any kind of data on your website. GravityView compliments Gravity Forms by giving you the ability to display that data on the front end using different layouts! Gravity Forms with GravityView is a versatile solution for building all kinds of web apps on WordPress—including project management tools!

💡 Pro tip: See how Dan Muhlenkamp, founder of Arena Success Group, built a productivity and task-management app using Gravity Forms and GravityView.

Importance of task and project management tools

When it comes to getting things done and completing projects on time, having a task management system is crucial. 

Back in the day, people often used paper to-do lists and whiteboards for recording and keeping track of tasks. But today things have evolved and we’re lucky enough to have a selection of powerful productivity tools at our disposal. Here are some of the major benefits of using such tools.

Keep everything organized in one, central hub

Having a specific tool for managing your tasks and projects allows you to manage everything from one central hub instead of having notes and reminders in different places. This helps you to stay organized so that you don’t forget about important tasks.

Task prioritization

A task management system allows you to prioritize tasks and manage important deadlines. Many people spend time on low-priority tasks which end up delaying deadlines for bigger projects. Task management helps you to prioritize your to-dos so that you finish important projects on time.

Improve team collaboration

Task management tools allow anyone to create tasks and assign them to other members of the team. Moreover, having a central hub allows your entire team to see who’s working on what. This makes for more efficient work and better collaboration.

Creating the task form in Gravity Forms

The next thing we’re going to do is create a form in Gravity Forms that allows us to submit tasks. This is going to form the backbone of our Gravity Forms task management system.

To create a new form, we’ll hover over “Forms” and click “New Form”. Then we’ll give the form a name (“Add Task”) and click “Create Form”. Now we can start constructing our form using the Gravity Forms visual editor.

We’re creating a relatively basic task management app, so we’ll just add the following fields:

• Title (Single Line Text)
• Status (Dropdown)
• Priority (Dropdown)
• Due date (Date)
• Description (Paragraph)
• Notes (Single Line Text)
• Associated file (File Upload)

For the “Priority” dropdown field, we’ll add four options – “Critical”, “High”, “Medium”, and “Low”. For the “Status” dropdown we’ll add the following options:

• “Active” (for tasks that need attending to) 
• “Next Up” (for tasks that aren’t urgent) 
• “Completed” (for tasks that have been finished)

The “Description” and “Notes” fields are for us to describe the task in more detail or add extra, relevant information about the task. Finally, the “Associated file” field will allow us to upload files related to the task, such as a report or spreadsheet for example.

Okay, that’s it!

Now, all that’s left to do is update our form and embed it on a page or post. To do this, we’ll create a new page, add a “Gravity Forms” block and select our form from the dropdown menu.

Here’s what our completed form looks like on the front end:

Save time by downloading the task tracking form template now!

Now that our “Add Task” form is set up and ready, the next step is to create a View that lets us display and edit tasks on the front end.

Creating the View in GravityView

Now that we have a task submission form set up, we’re going to create a View in GravityView that allows us to display and edit those tasks on the front end. 

To create a new View, we’ll hover over “GravityKit” in the sidebar menu and click on “New View”.

Next, we need to select our form in Gravity Forms as the “Data Source”.

Finally, under “Choose a View Type”, we’ll select the “Table” View Type. This layout option allows us to display Gravity Forms entries in a table format. This will be perfect for listing our tasks!

After selecting a View type, we can start configuring our View by adding widgets and fields to the Multiple Entries page. The Multiple Entries page is where all the tasks will be displayed.

We can add fields to the “Entries Fields” section by clicking on the “Add Field” button and selecting the field we want to display. For this example, we’ll add the “Task”, “Status”, “Priority”, “Due Date”, and “Notes” fields. Each of these fields will be a column in our table.

Now we want to color-code the priority, based on its level of urgency. We can do this by using the gvlogic shortcode! This shortcode is added to WordPress by GravityView and allows us to display information based on conditions that we set.

Using the code below, we are adding a different CSS class to the “Priority” field based on whether it’s “Critical”, “High”, “Medium” or “Low”. These different classes will allow us to add different background colors.

Here’s an example:

Here’s the CSS code we’re using to achieve the above look:

<style>

.gk-priority { color: white; padding: 5px 15px; border-radius:5px; }

.gk-priority-critial { background-color: red; }

.gk-priority-high { background-color: orange; color: black; }

.gk-priority-medium { background-color: green; }

.gk-priority-low { background-color: blue; }
	
</style>

Adding a search bar (optional)

The View loads with a Search Bar widget at the top automatically. You can configure this to include different search inputs if you want to, or you can just delete it by clicking on the ‘x’ icon.

Configuring the Single Entry Layout

The Single Entry Layout page allows us to display more details about a specific task. Before we configure this layout, we’ll need to add a link to the Single Entry page from the Multiple Entries Layout.

Let’s make the Task title a clickable link that takes the user to the Single Entry layout for additional information about that task. To do this, we’ll click on the gear icon to open the field settings, and check the box that says ‘Link to single entry’.

To edit the Single Entry layout, we’ll click on the “Single Entry Layout” tab at the top. Here, we’ll ensure that all the fields are visible, including the Task Description.

Here’s what it looks like on the front end:

 Now let’s look at sorting and filtering tasks.

Sorting and filtering tasks

To sort tasks by a particular field, we’ll scroll down to the “View Settings” box and click on the “Filter & Sort” tab. Here we’ll sort tasks by Priority Ascending (ASC) so that the highest priority tasks show up at the top.

Okay, we’re almost done! The final step is to enable front-end editing so that team members can edit and update tasks from the front end.

Editing tasks from the front end

Our WordPress task management app would not be complete without the ability to update tasks from the front end. GravityView includes this functionality by default. To enable this feature, all you need to do is configure the Edit Entry layout!

We’ll start by adding a link to the Edit Entry Layout from the Single Entry Layout page. We can do this by clicking on the “Add Field” button and searching for the “Link to Edit Entry” field.

We can then configure the Edit Entry Layout by adding the fields that we want to be editable. If you leave this configuration blank (i.e., you don’t add any fields), then by default all the fields will be editable from the front end.

Front end editing using GravityEdit (optional)

Another way to edit tasks from the front end is by using the GravityEdit add-on. Why would you choose to use GravityEdit? Because GravityEdit allows you to edit entries faster and more efficiently, without having to click through to the Edit Entry page!

Here’s an example:

To install GravityEdit, we’ll hover over “GravityKit” and click “Manage Your Kit”, scroll down to “GravityEdit” and click “Install”. 

After activating the plugin, we’ll head back over to our View Settings and check the box that says “Enable Inline Edit”.

Now we’ll be able to edit tasks from the front end without having to click through to the Edit Entry page!

Filtering tasks by their status

You may want to filter tasks in your View by status, so you only show the active tasks, and not those that were already completed. We can do this using the GravityView Advanced Filtering Extension.

To add an Advanced Filter condition, go to the View settings, click on the “Filter & Sort” tab and add a new filtering condition for the “Status” field.

You may wish to create separate Views for each task status option. You can easily do this by duplicating the View and adjusting the filtering condition.

Putting together our task management system

To embed your View on the front end, all you need to do is add the “GravityView View” block to your View and select your View from the dropdown field. You can also embed Views using the embed shortcode!

For this example, we’ll add each View inside an “Accordion” module from the “Genesis Blocks” plugin.

Bonus: Assigning tasks to different users

Part of your task management process may involve assigning tasks to specific users. For this functionality, you’ll need to install the Populate Anything perk by Gravity Wiz. Populate Anything allows you to dynamically populate Gravity Forms field choices with users and other information.

You can then add a new Drop Down field to your form where each choice is a website user. You can then use this field to assign tasks to different users.

💡 Pro tip: Learn more about using Populate Anything to automatically recognize known users.

How to only display tasks assigned to the current user

If you’re using Populate Anything to assign tasks to different users, you may need a way to only display tasks assigned to the current user. We can do this by once again using the Advanced Filtering extension.

After activating the extension, we’ll head back over to our “View Settings” and click on the “Filter & Sort” tab. Now, under the “Advanced Filtering” section, we’ll add the following condition:

As you can see, we’re using the {user:ID} merge tag to only display tasks where the value of the “Assign to” field matches the ID of the currently logged-in user.

Now when one of our team members opens the task list, they will only see the tasks that are assigned to them.

Start building your project and task management app with GravityView

Using a task and project management system helps you prioritize your work, stay on track and ensure that important deadlines are always met. Moreover, task management apps are crucial for team collaboration and organization.

But why spend time (and money) on third-party tools when you can build your own task management app using WordPress? In this post, we showed you how to build a Gravity Forms project management tool using GravityView.

Did you find this post helpful? Check out some of our other tutorials showing you how to build a WordPress job board or create a custom issue tracker.