How to setup your first workflow with Gravity Flow step-by-step

Objective: How to setup your first workflow with Gravity Flow step-by-step. In this guide we will setup a simple workflow that allows a person to submit a request for vacation that is then approved or rejected by a manager and if approved, HR will be able to add notes such as the number of remaining days that the submitter has left.

All of this will take place through WordPress using emails and the front end on WordPress Pages. This guide utilizes many of the most commonly used Gravity Flow features. You will see many additional options as you move through this guide but our goal here is simplicity to get your started.

Requirements: Must have Gravity Forms and Gravity Flow installed.

Planning is a very important first step  prior to creating any workflow. Some workflows can be complex. Attempting to do so with all of the steps in your head can be tricky. Documenting a process flow will make execution a snap. For the purpose of this guide, we created a visual workflow of what we want to do.

gravityflow-Custom-Car-Quote-Workflow
Figure 1
  1. First we are going to create a Vacation Request form with Gravity Forms.
  2. You can import an existing vacation form that we have prepared for you by following Gravity Flow instructions here. When you reach step #4, use the form that we have created for you here (You may need to right click on the link and save it to your computer).
  3. Once you reach the end of Gravity Flow instructions, click the “Edit form” link and you should see your newly imported vacation request form. See Figure 2.

      Figure 2

    Note: The fields highlighted in green are only viewable by the “Approver” and the “HR Processing” role as WordPress “Administrators” and wont show to the submitter on the front end. See Figure 2. Although this is already cared for in the imported form on your behalf, note that the "Visibility" settings are set to “Administrative”. 

    Note - Visibility

    Note: You can also click “Forms” in the admin menu and look for your newly imported form in the list. See Figure 3.
    Note: All Gravity Forms “confirmation” and “notification” settings seen in Figure 1 have also been imported. This does not include the Gravity Flow (workflow) notifications. We will create those later.

    gravityflow-Custom-Car-Quote-Workflow
    Figure 3
  4. Now we are going to setup the appropriate pages so that the workflow can be used on the front end. Create three WordPress pages named, “Inbox”, “Status”, and “Submit”. On each of the pages, use the matching Gravity Flow shortcode. All of the shortcodes can be found here. For example your page named “Inbox” should have the shortcode “[gravityflow page=”inbox”]” present, etc.
    • Note: You can visit these pages at anytime after you publish them or after you start using the workflows to view the workflow “Inbox”, “Status”, and “Submit” pages of Gravity Flow from the front-end or WordPress.
  5. Now we are going to setup three Gravity Flow workflow steps. One for “Manager Approval”, One for “Modification by Submitter”, and one for “HR Processing”. From the same location shown in Figure 3, find your vacation form and mouse over the “Settings” option beneath the title and select “Workflow”.
    gravityflow-Custom-Car-Quote-Workflow-6
    Figure 4
  6. Click the “Add New” button OR the “create one” link.
    Figure 5
  7. Add a title and description (optional) and click the “Step Type”, “Approval” option. We used the name “Manager Approval” in this example.
    Figure 6
  8. In the “Approval” section, select the username of the person who is the approver (Manager in Figure 1) of the vacation request. In this example we used the username “Approver”. Figure 7.
    Figure 7
    • Note: The selected “Users” will move from the left box to the right box when clicked.
  9. Next we are going to create our email notifications as seen in Figure 7. One for “Approver” named “Assignee Email”, one for “submitter” in the case of rejections named “Rejection Email” and one for the “submitter” in the case of approval named “Approval Email”.
    Figure 8
  10. In the “Emails” section, place a check mark in the box in the “Assignee Email” tab and completed the fields as desired.
    Figure 9
    • Note: The grey icons to the right of each field contain merge tags which are used to dynamically populate submitted field values and other common dynamic information for your convenience. This logic is applicable to each of the email tabs.
  11. We inserted the following merge tags; “{all_fields}” which is a Gravity Forms Merge Tag that will display all of the submitted forms fields and “{workflow_approve_link}” which will allow the approvers to approve or reject an entry directly from an email.
    Figure 10
  12. In the next two steps we are going to basically repeat steps 10-12 for the “Rejection” and “Approval” emails.
  13. Complete the “Rejection” email. Message content containing a merge tag will be inserted by default.
    Figure 11
    • Note: If you don’t see the User (Created by) field you’ll need to make sure that you have the “Require user to be logged in” setting enabled in the Form Settings.
    • Note: The selected “Fields” will move from the left box to the right box when clicked.
  14. Complete the “Approval” email. Message content containing a merge tag will be inserted by default.
    Figure 12
    • Note: The selected “Fields” will move from the left box to the right box when clicked.
    • Note: If you don’t see the User (Created by) field you’ll need to make sure that you have the “Require user to be logged in” setting enabled in the Gravity Form settings for this form.
      Note 14
  15. Be sure that your “Next step if Rejected” is set to “Workflow Complete” and “Next step if Approved” is set to “Modification by submitter”. Click the “Update Step Settings” button and you should be done with this workflow.
    Example for 15
  16. Next we are going to create our second Gravity Flow workflow step “Modification by Submitter”. Repeat the steps you took in steps #6 and #7 except, you will use the “Step Type”, “User Input”.
    Figure 13
  17. Complete the “User Input” section. In the “Select Assignees” section, select the “User (Created by)” option and in the “Editable Fields” section, select the “Date From” and “Date To” fields.
    Figure 14
    • Note: The selected “Fields” will move from the left box to the right box when clicked.
  18. Changes to the email section are optional depending upon your needs but not required.
    Example for 18
    • Note: “Message” content should have been inserted for you by default. We also added the “Merge Tag” “{workflow_entry_url}” so that the submitter can click a link from the email and be taken directly to the front end “Inbox” page to review and make adjustments.
  19. Be sure that the “Next Step” option is set to “Manager Approval”. Click the “Update Step Settings” button and you should be done with this workflow setup.
    Figure 16
    • Note: This is the name of the workflow step that you created in step #7.
  20. Next we are going to create our third and final Gravity Flow workflow step “HR Processing”. Repeat the steps you took in step #16. Make sure not to repeat step #17 because it is slightly different and reflected in the next step #21.
    Figure 17
  21. Complete the “User Input” section. In the “Select Assignees” section, select the “HR Processor” option and in the “Editable Fields” section, select the “HR Comments” field.
    Figure 18
  22. Changes to the email section are optional depending upon your needs but not required.
    Figure 19
    • Note: “Message” content should have been inserted for you by default. We also added the “Merge Tag” “{workflow_entry_url}” so that the HR Processor can click a link from the email and be taken directly to the front end “Inbox” page to review and add comments.
  23. Be sure that the “Next Step” option is set to “Next Step in list”. Click the “Update Step Settings” button and you should be done with this workflow setup.
    Figure 20
  24. At this point, you should be able to publish this Gravity Form to a post or page and begin using the workflow. You can also use the Gravity Forms “preview” feature to test (recommended) prior to publishing.
  25. If you have any issues, please review each step in this guide and try again. If that does not work reference the step where you are having the issue and contact support.
  26. End.

Other valuable information:

  • Each of this users in this guide; the “Submitter”, “Approve”, and “HR Processor” will see results based on their own individual WordPress login. While testing, you should be signed in as each of these user for accurate replication of the experience for each role.

Still need help? Contact Support Contact Support