Quantcast
Channel: Tutorials Archives | Gravity Wiz
Viewing all articles
Browse latest Browse all 122

Very Simple Submission Approval for Gravity Forms

$
0
0
View this code snippet on GitHub.
Special thanks to Derek Leek for the original idea and commissioning this solution!

In this tutorial, we’re going to walk through the creation of a prayer request form. The user can submit a request for themselves or for a friend. If requesting for a friend, we will require that the friend approves the request. Here’s the basic flow:

  1. User submits prayer request form for a friend.
  2. Approval request notification is sent to the friend’s email address (provided in the form) which includes a link to form with the request form data loaded.
  3. The friend access the approval link, views the request, and approves it (or not).

So how does all of this work? Most of it is handled by Gravity Forms new Save and Continue functionality. It’s not exactly intended for use as an approval system but… we’re going to get some really good mileage out of it.

Before we go any further, I want to stress that this system is very basic. It’s a quick and easy way to do single-step approvals. If you need something more advanced, I’d recommend checking out Gravity Forms developer Steve Henty’s tutorial and upcoming plugin here.

The pros of this solution?

  • very simple making it easy to use and modify to fit your needs
  • only requires the approver’s email (does not have to be a user on your site)
  • primarily uses default Gravity Forms functionality (with some enhancements via custom code)

The cons?

  • very simple; if you need a more robust solution, this is not for you
  • there is no visibility of saved submissions that are never approved
  • there is no rejection of a saved submission; the approver either approves it or does nothing

Alright, let’s get started.

1. Setup our Fields

  1. gw-simple-approval-is-approval-field-advanced
    Add a Hidden field and set the dynamic population parameter to “is_approval”.
    • When the approver accesses the form via the Approval URL, this field will automatically be populated with a value of “1”. We will call this scenario “Approval Mode”.
    What is “Approval Mode”?

    The snippet (which you’ll be installing shortly) appends a new parameter is_approval to the Save and Continue URL. This URL is then sent to the approver’s email address. When the approver clicks this link, the parameter will be populated into a Hidden field on the form (you’re about to add that field shortly as well).

    We can then base conditional logic rules on the value of this field. If the Hidden field is “1”, we’re in “Approval Mode” and we can hide fields that should not visible to the approver.
  2. gw-simple-approval-conditional-field-advanced
    Add a Radio Buttons field to indicate whether the prayer request is for the submitting user or a friend.
    • User conditional logic to hide this field if the form is in Approval Mode.
  3. gw-simple-approval-email-field-advanced
    Add an Email field for the friend’s email address.
    • Use conditional logic to only show this field if the prayer request is for a friend and the form is not loaded in Approval Mode.
  4. gw-simple-approval-request-field-general
    Add a Paragraph Text field for the prayer request content.

2. Configure the Form Settings

  1. gw-simple-approval-form-settings
    Enable Conditional Logic on the Submit button. Show the Submit Button if:
    • The request is for the user submitting the form.
    • Or if the form is loaded in Approval mode.
  2. gw-simple-approval-form-settings
    Enable Save and Continue.
    • Update the “Link text” setting to read “Request Approval”.

3. Confirmations

The Confirmations are used to keep users informed that whatever action they have performed was completed successfully. A user submitting a request for themselves should see a confirmation stating that their submission was successful. A user submitting a request for a friend should see a confirmation stating that their friend has been notified of their pending request. A user approving a request should see a confirmation stating that the request was successfully approved.

gw-simple-approval-confirmations
  1. The Default Confirmation will be presented if no approval is required. In this case, that means the submitting user is making a prayer request for themselves.
  2. gw-simple-approval-save-and-continue-confirmation
    The “Save and Continue Confirmation” (which is added automatically when you enable Save and Continue) will be presented when approval is requested. This lets the submitting user know that the approving user has been notified.
  3. You can safely ignore the “Save and Continue Email Sent Confirmation”. This confirmation will not be used in our configuration.
  4. gw-simple-approval-request-approved-confirmation
    Create a new confirmation which will be presented when a request has been approved. This means the form has been submitted while in Approval Mode.
    • Make sure you enable conditional logic on this confirmation and set the condition such that this confirmation will only be used when Approval Mode is active.

4. Notifications

There is only a single notification required. This notification will be used to notify the approver that there is a request pending their approval and also provide them a link to that request.

gw-simple-approval-notifications
  1. You can safely ignore the “Save and Continue Email”. This notification will not be used in our configuration.
  2. gw-simple-approval-request-approval-notification
    Create a new notification which will be sent to the approver requesting approval and providing the approval link.
    • Set “Event” to “Form is saved”
    • Set the “Send To” setting to “Select a Field” and the “Send To Field” to the Email field we added in Step 3.3
    • The “Subject” and “Message” should indicate that approval is required.
    • The “Message” should include the {save_link} merge tag which will provide the Approval URL to the approving user.

5. Install the Snippet

The snippet is the glue that pulls all the pieces together and adds a little polish to the system to make it feel more intentional (you’ll find it at the top of the page. What does it do exactly?

  • Adds the “is_approval” query parameter to the Save and Continue link.
  • Populates the “is_approval” value into the designated field (set dynamic population parameter to “is_approval”) when the form is loaded in Approval mode.
  • Sets fields to “readonly” if option is enabled.
  • Updates Submit button label when the form is loaded in Approval mode.
  • Styles the “Save and Continue” link (which is our Request Approval link) as a submit button.
  • Handles hiding the Save and Continue link when the Submit Button is visible and vice versa.

Installation Instructions

  1. Make sure Gravity Forms is installed and active.
    Need a license? Buy Gravity Forms
  2. Copy and paste the entire snippet into your theme’s functions.php file.
    Having trouble installing the snippet?.
  3. At a minimum you will want to set the the “form_id” parameter to the ID of your form. There are a few other options as well.

Parameters

  • form_id (int) (required)

    Specify which form (by ID) to which this functionality should apply.

  • approve_button_label (string) (optional)

    Specify a label that will replace the default Submit button label when the form is loaded in Approval Mode. Defaults to 'Approve'.

  • approval_read_only (bool) (optional)

    If GP Read Only is active and this parameter is set to true, all fields will be read-only when the form is loaded in Approval Mode. A handy way to allow the user to see the submission but not modify it. Defaults to false.

Is this something you’ll use?

We hope so! As always, happy to answer questions in the comments and we absolutely love seeing examples of our snippets used in the wild.


Viewing all articles
Browse latest Browse all 122

Trending Articles