Do you want to create a Toggl project form in WordPress? With WPForms, you can easily make a form on your website that automatically creates a project in Toggl when the form is submitted.
In this article, we’ll show you step-by-step how to integrate Toggl with WordPress
What Is a Toggl Project?
A Toggl project is an area in the Toggl workspace where you can track time for different tasks. You can assign each project to a different client so that everything’s organized, then simply click the timer to start tracking time.
For example, a web designer might create a project for a new client website. By splitting the project into tasks, they can accurately track time against each step.
Tracking time in Toggl projects is useful if you want to:
- Measure project activity in your company or team
- Create timesheets for your clients
- Track the time you spend working in tools like GitHub or Basecamp by integrating them with Toggl.
So now we understand a little more, let’s create a WordPress form to integrate Toggl with our website.
How to Create a Toggl Project from a WordPress Form
In this example, we’re using to create a Volunteer Recruitment Form in WordPress. When a volunteer signs up, we’re going to create a new Toggl project automatically so that we can organize their training.
Here’s a table of contents to help you follow along:
- Install the WPForms Plugin
- Create Your WordPress Form
- Add Your Toggl Project Form to WordPress
- Connect WPForms to Zapier
- Connect Toggl to Zapier
- Create Your Toggl Project
Before you start, it’s a good idea to set up your organization and clients in Toggl. If you don’t need to assign projects to clients, just use your own name as the client for now.
Step 1: Install the WPForms Plugin
Start by installing the WPForms plugin.
If you need help with this step, see our guide on how to install a plugin in WordPress.
Once you’ve activated WPForms, you can move on to the next step.
Step 2: Create Your WordPress Form
Next, create a new form in WPForms by going to WPForms » Add New. Type a name for your form at the top.
Let’s use a template to make this really easy. Search the form templates for Volunteer Form and click the template to open it.
It’s really easy to customize the form. Just drag and drop fields from the left-hand pane to the right-hand pane.
For example, if you need to know the age of your volunteers, you can add a number field like this:
And if you need to change some of the answer choices, just click the field to edit them.
You can also use the form builder to:
- Drag fields up and down to reorder them
- Mark fields as Required
- Remove fields you don’t need
- Duplicate fields
- Add a GDPR agreement field to your form.
The form we created in this example has a lot of questions. If you want to learn how to split long forms into pages, read this guide on how to create a multi-step form in WordPress.
Click Save when your form is complete.
Now it’s time to add it to WordPress.
Step 3: Add Your Toggl Project Form to WordPress
Adding your form to WordPress is super easy. You don’t need to copy and paste any code.
You can add forms to any page or post on your website, or place them in the sidebar.
We’re going to create a new page in this example.
First, click the plus icon in the block editor to add a new block. In the window that pops up, search for WPForms.
Now click the WPForms icon to add the widget to your page.
In the dropdown, select the Toggl project form you created in Step 2.
The last step is to Publish or Update your page by clicking the blue button at the top-right.
Now your form is live and ready to collect entries.
Finally, we need to submit a test entry so that Zapier can pull in that data during testing.
Now it’s time to work some magic in Zapier.
Step 4: Connect WPForms to Zapier
Head to Zapier and click Make a Zap.
Now search for WPForms and click the icon.
Next, click Continue.
Zapier will prompt you to log in to your WPForms account. To do this, you’ll need to grab the WPForms API key.
You’ll find this in WPForms » Settings » Integrations. Click the Zapier icon to reveal your key.
Go ahead and copy the key, then paste it into the Zapier connection window with your site URL, like this:
When you’re connected, the window will close.
Zapier will show you a list of all of the forms you created. Be sure to select the right form from the dropdown:
Now, the final step. Click Test Trigger. Zapier will connect to WPForms and pull in the test entry we created in step 3.
If you get an error message here, try submitting another form entry and then testing your trigger again.
When everything’s working, click Continue.
In the next step, we’re going to repeat the process to connect Zapier to our Toggl project.
Step 5: Connect Toggl to Zapier
Zapier will ask you which service you want to connect to. Search for Toggl and click the icon.
Now, Zapier will ask what you want to do when your WordPress form is submitted. There are lots of awesome things you can do. For this example, we want to click Create Project.
Next, Zapier will ask you to sign in to Toggl. You’ll need to grab your Toggl API key now.
In Toggl, click your name to open your profile page:
Click Profile Settings, then scroll all the way down to API Token.
Now you can copy the key and paste it into the Zapier connection window.
All done? Click Yes, Continue.
Now click Continue to move on to the fun part.
It’s time to tell Zapier what your Toggl project should look like. Use the dropdowns and fields to get everything mapped the way you want it.
In this example, we customized the name of the Toggl project to include the name of the person who submitted the form. This will make it really easy to see who each project is for.
Step 6: Create Your Toggl Project
Now we’re going to tell Zapier to create a Toggl project from our test data.
Once you have everything set up the way you want it, click Test and Continue.
Zapier will copy all of the data from your WordPress form into a Toggl project.
Let’s check everything to make sure it worked.
In Toggl, navigate to Projects.
Great! We have a new Toggl project containing all of the information we submitted in WordPress.
Now we can track the time it takes to onboard our new volunteer.
And that’s it! Now you know how to create a Toggl project automatically from a WordPress form.
If you’d like to send an email confirmation to each volunteer, check out this article on how to send confirmation emails to users. You could also send them a Slack auto invite so they can meet the rest of your team.
You can make tons of cool integrations with Zapier and WPForms that will help you to save time when managing your team.
If you’re looking for more project management tips, here’s a really neat way to add a Kanban board in WordPress.
Ready to build your Toggl project form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes free customizable templates and offers a 14-day money-back guarantee.