A General Approach on Building an Approval Process Workflow

Last Update: 

Create an approval process in Jotform. Different companies or businesses will always have their approval process. Surely, we can’t cover all of them so this guide will be leaning more towards discussing general guidelines on how to come up with a workflow that fits your requirements.

First off, what’s an approval process? You may already have one in place and want to incorporate it with your forms. In layman’s terms, this process is just a way to have someone approve or deny a submission, entry, registration, or request.

Note that every approval flow starts with a form so go ahead and create your first web form with Joform.

How to Create an Approval Flow

You can build an approval flow easily with Jotform Approvals. Without any coding, you can turn your online forms into custom automated approval flows. Just drag and drop to add approvers, emails, conditional branches, and more to your approval process. To create an approval flow…

  1. Go to the Settings tab in the Form Builder.
  2. Click Approval Flows on the left.
  3. Next, click the Create an approval flow button.
form-builder-create-approval-flow-min

This will redirect you to the Approval Flow builder. By default, the basic flow is created automatically.

approvals-default-flow-min

Here’s a demo form to try out a basic approval process with Jotform Approvals.

To learn more about creating an approval flow, visit our guide on “How to Create an Approval Flow in Jotform”.

The Old Method for Creating an Approval Process Workflow

The information below is our old method for creating an approval process workflow. We aim to merge this method in our new Jotform Approvals, but in some cases, this may still come in handy.

We’d like to showcase some key features and options we have that you can take advantage of, how to utilize them properly, and combine them to come up with an alternative approval process on your own.

Here’s a typical use case to give you an idea of how it works:

  1. The customer submits a form.
  2. Manager A receives it via email and reviews the entry.
  3. Manager A confirms and approves it by editing the submission and re-submitting it.
  4. Manager B (or someone else) receives another email after Manager A’s approval.
  5. The customer receives an email whether he’s approved or denied.

With the scenario above, one key ingredient would be the emails. Regardless of how long the approval process is (e.g. if two or more managers need to check and review the submission), it all boils down to notifying the intended recipient before or after a submission gets approved or denied.

So, in theory, these are all the features you need to make this work:

  • A hidden field – will serve as the approval status. Our recommendation is to use a drop-down menu. This will simplify the process by only allowing someone to pick from 2 different options – either Approved or Denied.
  • Email Notifications – will be used to send emails to managers, staff, or anyone needed in the approval process.
  • Autoresponders – will be used to send emails to your customers. You may create different Autoresponder templates for approved or denied customers.
  • Widgets – you need the Get Form Page URL widget which will be used in conjunction with Conditions and a Signature Field as a part of the approval process if necessary.
  • Edit Link – the submission’s edit link which will be used with Conditional Logic to trigger an action based on the URL where the form is being filled out.
  • Conditional Logic – will be the core of the entire workflow and there are plenty of reasons why we need conditions, all of which will be discussed later.

So, let’s get started:

  1. Build your form or if you already have one, use that.
  2. Add a Dropdown element to your form with Approved and Denied options.
form-builder-dropdown-approval-status-min
  1. Let’s move on to emails. Set up your Email Notifications and Autoresponders at your discretion. If you need different email templates when someone reviews a submission, approves it, denies it, etc, it’s all up to you. These templates will then be used later on with your Conditional Logic.
form-builder-edit-email-notification-autoresponder-min

One important feature that needs to be enabled on your Autoresponders is the Send on Edit option. Ensure that this is enabled so your customers will receive the Autoresponder upon editing their submission.

form-builder-autoresponder-send-email-on-edit-min
  1. Add the submission’s Edit Link to the email template that would be sent to the person in charge of deciding the approval.
form-builder-autoresponder-edit-link-min
  1. If your approval process requires an e-signature from the boss or manager who approves the submission, then add the Signature element to your form.
form-builder-signature-element-min

You can also use any of the signature widgets.

  1. Next, add the Get Form Page URL widget.
form-builder-get-form-page-url-min
  1. Lastly, set up your Conditional Logic. Since this part highly depends on how you want the process to work, we’ll lay down some possible scenarios and the needed Conditions to make them happen:

To send the Autoresponder template to the customer if he has been approved, add a Change E-Mail Recipient condition:

form-builder-approved-condition-min
If the Approval Status field’s value is equal to “Approved”, then send the Approved email template to the respondent.

To send the Autoresponder template to the customer if he has been denied, add a Change E-Mail Recipient condition:

form-builder-denied-condition-min
If the Approval Status field’s value is equal to “Denied”, then send the Denied email template to the respondent.

To show the hidden Approval Status and Signature fields once the Manager views the entry through the Edit Submission Link, add a Show/Hide Field condition:

form-builder-show-approval-status-signature-min
If the Get Page URL widget’s value contains the word “edit”, then show the Approval Status and Signature fields.

This would also cause the Approval Status and Signature fields to be hidden by default, and will only be shown once the form is being viewed from the submission’s Edit Link.

And that should be the bare minimum to make this work. Here’s the completed form: https://www.jotform.com/213264898439975

The demo form above has the following:

  • 1 Email Notification – this is for the initial email alert sent to the approver or reviewer.
  • 2 Autoresponders – one for an Approved email and another for a Denied email both of which triggered after editing the submission.
  • 4 Condition Logic – to show the hidden fields on edit, to send out the initial Email Notification on the first submission, to send the Approved email alert, and to send Denied email alert.
form-builder-approval-condition-set-min

Since this is a fairly advanced topic, it’s recommended that you’re familiar with how Conditions work. To better understand, we strongly suggest you clone the demo form.

Comments and suggestions are welcome below. If you have a question, post it in our Support Forum so we can assist you.

Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • MRC Accommodation - Profile picture
  • HFGUS - Profile picture
  • Jennifer Dexheimer - Profile picture
  • Jazmine Vargas - Profile picture
  • Rich Harvey - Profile picture
  • Nguyen Tuan Hai - Profile picture
  • Teacher Siti  - Profile picture
  • nyruralschools - Profile picture
  • danielyang - Profile picture
  • David_davidrodriguez - Profile picture
  • Esty Sharkawi - Profile picture
  • Mustapha_cms - Profile picture
  • cole.zrostlik - Profile picture
  • ppintang - Profile picture
  • deanborst - Profile picture
  • scott313 - Profile picture
  • judith Browder - Profile picture
  • Ezmi Carrizales - Profile picture
  • lev.z - Profile picture
  • jasonck74 - Profile picture
  • HuttonSafetyGroup - Profile picture
  • Matthieu McClintock - Profile picture
  • michael.laurent - Profile picture
  • cjadeltas1975 - Profile picture
  • ctpartnerscn - Profile picture
  • timeoff.theramart - Profile picture
  • TitanIND - Profile picture
  • lafarge - Profile picture
  • Jeff - Profile picture
  • kaambhari - Profile picture
  • BrysonLawFirmLLC - Profile picture
  • ITDirect - Profile picture
  • Ketan_bhavsar - Profile picture
  • mvloft - Profile picture
  • Matthieu McClintock - Profile picture
  • nrhspLaura - Profile picture
  • nshah1 - Profile picture
  • balogen - Profile picture
  • sstaffordwtec - Profile picture
  • CityofPalmSprings - Profile picture