How to build a project management system for team collaboration on WordPress (without code!)

Are you tired of bouncing between Trello boards, spreadsheets, and email threads? In this tutorial, I’ll show you how to build a fully interactive project management system right inside WordPress using Gravity Forms and GravityBoard. 

GravityBoard gives you drag-and-drop task management, team collaboration, file attachments, automated notifications, and more—all without writing a single line of code.

Let’s get started!

Sneak peek

Here’s a sneak peek at the finished project management board:

The board is fully interactive. Users can add new cards, shuffle lanes, and move cards to different lanes using drag-and-drop. When clicking on a card, it opens in a modal that enables users to view more information about that task, including any files that have been attached to it or any comments that have been added.

Users can also leave comments on individual tasks and mention one another to notify them and stay coordinated.

💡 Pro tip: You can see a live demo of the finished project management board here and clone the site to demo the plugin free for 7 days.

What you’ll need

Here are the plugins you’ll need to build a project management system like the one in this tutorial:

• Gravity Forms
• GravityBoard

Why use Gravity Forms and GravityBoard?

There are a range of tools out there for managing tasks and projects—Trello, Jira, ClickUp—so why choose GravityBoard?

Firstly, GravityBoard is a WordPress plugin, meaning that you host it yourself, on your own website! While SaaS tools (like the ones I mentioned above) essentially rent you their data and technology, GravityBoard is yours. You have full control over your own data, and full license to customize the experience as you see fit.

Secondly, GravityBoard leverages all of the powerful features that come with Gravity Forms. Things like data management, conditional logic, dynamic merge tags, email notifications, and more. This provides power and flexibility when designing workflows.

Finally, by using GravityBoard, you also benefit from the wider ecosystem of Gravity Forms tools. Not only can you tap into additional GravityKit add-ons, you can leverage features from the wider ecosystem of Certified Developer add-ons.

1. Create a form

The first step is to create a form that will house all of the tasks in our project management system. To do this, we’ll hover over “Forms” and click “New Form”. We’ll start from a blank template and build our task submission form using the Gravity Forms drag and drop builder.

Let’s add the following fields to our form:

• Task (Single Line Text field)
• Priority (Drop Down field)
• Description (Paragraph Text field)
• Due date (Date field)
• Status (Drop Down field)

The “Status” field is important as each option will correspond to a step in our workflow. You can either add your own workflow steps as options to the Drop Down field, or use one of GravityBoard’s predefined choices.

To see the list of predefined choices, open the field settings for any Drop Down or Radio Buttons field, click “Edit Choices” and then “Bulk Add / Predefined Choices”. 

That’s it! Now that our task submission form is set up, we can move to the next step: creating the project board using GravityBoard.

2. Create a new board

GravityBoard enables us to display Gravity Forms entries as cards on customizable kanban boards. Boards are attached to a form and created as a feed. To create a new board, we’ll go to the form settings, click on “GravityBoard” and click “Add New”.

Now we can start configuring our board. As you can see, options are split into five different tabs: 

1. Configure Board – mapping fields and enabling basic features.
2. Notifications – enabling notifications. 
3. Permissions – setting access controls. 
4. Appearance – modifying styles and branding. 
5. Advanced – setting up conditional logic.

Mapping important fields

Let’s start by mapping our fields. Most importantly, we need to choose a lane field. This field will determine the workflow steps as defined on our board. Lane fields can either be Drop Down or Radio Buttons fields. Here we’ll select our form’s “Status” field.

Next, we need to select which form fields to show on the individual cards. GravityBoard currently supports four fields: 

1. Card Title – The title of the task (we’ll map this to our form’s “Task” field).
2. Card Description – A short description of the task (we’ll map this to our form’s “Description” field).
3. Label – A small label that appears at the top of the card (we’ll map this to our form’s “Priority” field).
4. Due Date – The due date of the task (we’ll map this to our form’s “Due date” field).

After mapping our form fields, we can select which board features to enable. GravityBoard supports entry notes (comments and mentions on individual cards), assignees (assign users to cards), and attachments (upload file attachments to cards).

All of these features are useful for a project management system, so let’s enable all of them!

Configure email notifications

GravityBoard leverages the notification system that’s built into Gravity Forms by adding several new trigger events. Combined with dynamic merge tags, this enables you to send personalized email notifications to specific users when actions are performed on the board.

Let’s say we want to send a notification to all the users assigned to a task when that particular task’s status is updated. Here’s how we can set that up:

First, we’ll create a new notification in Gravity Forms. Next, we’ll give it a name and select “GravityBoard – Card Changed Lane” as the event. Finally, we’ll use the {gravityboard_assignees:email} merge tag to dynamically populate the “Send To” address with the assignee email addresses!

All that’s left to do is customize the subject line and email body. GravityBoard provides merge tags for us to use here as well.

💡 Pro tip: Check out this helpful article to learn more about merge tags in GravityBoard.

Restrict access and assign user permissions

The “Permissions” tab enables you to set restrictions on your board relating to which users can perform which actions. GravityBoard gives you granular control over these settings, allowing you to decide which users can view boards, edit cards and lanes, add assignees, leave entry notes, and upload file attachments.

You can restrict user actions based on their Gravity Forms capabilities, login status, or assigned WordPress user role.

Tweak the look and feel of your board

The “Appearance” tab includes options for adding a background color or image, modifying the lane colors, and setting a minimum height for the board.

Embed your board on a page

The final step is to embed our board on a page or post. While boards can be viewed directly within the WordPress admin dashboard, you’ll need to embed yours on a page/post if you want users to have frontend access. 

That’s it! Here’s what our finished project management board looks like on the frontend. As you can see, each entry is now displayed as a task on our board and we can drag and drop it to update its status.

3. Manage tasks and collaborate with team members

Now that we’ve configured our project management board and embedded it on a page, we can start managing our tasks and collaborating with team members.

To add a new task, we can click “Add a card” directly on our board. When creating or editing a card, we can assign it to one or more users by clicking on the plus icon.

If tasks have associated files, we can easily attach them to the card via drag and drop.

And finally, to coordinate with team members and align priorities, we can leave comments on individual cards and tag team members by name. 

As you can see, GravityBoard makes it easy to manage workflows and collaborate with team members—all in real-time! 

Manage your projects on WordPress

GravityBoard revolutionizes project management for WordPress by leveraging the power of Gravity Forms to enable seamless collaboration without requiring custom code.

If you’re looking to manage your workflows with a self-hosted solution, or need an easy way to coordinate team activity and stay organized, get GravityBoard today!