UPDATED - March 2017
Hi All,
Last year i wrote a guide on how to create a form & dynamic view that could be shared between multiple users (you can see the original article HERE. Since then i’ve developed the solution further so i’ve updated this guide with the new information and some updated screenshots.
The Problem
We needed to build a form & view using Formidable Pro that could be accessed by multiple people in a team. Our clients work in teams of 2 - 6 people and required the ability for person A to log in and start completing a form, potentially save a draft or submit the form, and then for person B (or C, D etc) to log in (with their own login details), access the shared form entry and continue where their colleague left off.
All users need to be able to access the form at whatever stage it was last at (Saved or Submitted) and either continue where the last person left off, or update the submitted entry.
The Solution
The solution was actually quite simple. We created a new field in each users profile that was common across teams and used this to filter the form entries within the view. This allowed multiple people users to be able to access the same view & form and therefore achieve the functionality we require.
The set-up
Before we start building the form we need to make sure that each user has a field in their profile that is common across teams. We use the WP-Client Plugin to manage our clients which allows us to add custom fields to user profiles but you could use the default ‘Nickname’ field.
We created a field called ‘Client Business Name’ and added the name of the client to this field.
E.g. Company A, Company B, Company C etc. Each user from that company has to have the same company name in this field.
The Form
The form itself is quite straightforward (other than it’s HUGE, spans several pages and contains hundreds of fields with conditional logic - hence the need to save it and return later to continue where you left off).
The first part of the form is the user details section and the majority of these fields use placeholders to save the user time and ensure that the information captured is accurate.
In the ‘Customer Name’ field we use the following placeholder (but you could use [display_name] if you’re using the ‘Nickname’ field and have the display name set to display this option etc):
[wpc_client_business_name]
Note: You could also set this is a hidden field or as ‘read-only’ to stop the client changing it and messing up the functionality.
Then just carry on and build your form.
The View
The view settings can be seen in the attached screenshot and will be:
Basic Settings
- Use Entries from = the form you just created
- View Format = Both (Dynamic)
Advanced Settings
- Filter Entries = Customer Name > Is Equal to > [wpc_client_business_name]
- No entries message = “No saved entries found - Please contact us if you think this is incorrect”
Then we can start setting up the Listing Page & Details Page settings.
Listing Page
The listing page will contain some basic details about the entry including who created it, when it was created, who updated it last and who updated it last. This is quite important for the client to be able to see and creates the accountability that should be required when allowing multiple people to entry a single entry.
It also contains some conditional logic messages based on the status of the entry and a slight work around as there’s no convenient way yet to show if an entry is ‘Draft’ or not.
NOTES: It’s probably also worth mentioning that we have a required field at the end of our form that asks people to confirm that the details they have entered are correct to the best of their knowledge and to agree to our T’s & C’s which must be ticked immediately before they click ‘Submit’. We use this field in our listing section to determine whether or not the entry is ‘Draft’. We also have the ‘Disable visual editor for this view’ option ticked as we’re working with a combination of basic HTML and short-codes so it stops WordPress stripping this out.
Here is the view code:
<h4><strong>County, Unitary & Parish Elections 2017</strong></h4> <ul> <li><span style="color: #333333;">Created: [created-at]</span></li> <li><span style="color: #333333;">Created By: [3419] [3420]</span></li> <li><span style="color: #333333;">Last Updated: [updated-at]</span></li> <li><span style="color: #333333;">Updated By: [updated-by]</span></li> <li>Status: [if 3580 equals=""]<span style="color: tomato;"><strong>Draft</strong></span>[/if 3580][if 3580 not_equal=""]<span style="color: green;"><strong>Complete</strong></span>[/if 3580]</li> </ul> [dt_gap height="20" /] [if 3580 equals=""]<span class="vc_btn3-container wpb_animate_when_almost_visible wpb_appear vc_btn3-inline wpb_start_animation">[editlink class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-outline vc_btn3-color-inverse" location="front" label="Continue This Order" page_id=15738]</span> <span class="vc_btn3-container wpb_animate_when_almost_visible wpb_appear vc_btn3-inline wpb_start_animation">[deletelink class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-outline vc_btn3-color-inverse deleteLink" label="Delete This Order"]</span>[/if 3580] [if 3580 not_equal=""]<span class="vc_btn3-container wpb_animate_when_almost_visible wpb_appear vc_btn3-inline wpb_start_animation"><a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-outline vc_btn3-icon-left vc_btn3-color-inverse" title="" href="[detaillink]" target="_self"><i class="vc_btn3-icon fa fa-search"></i> View This Entry</a></span> <span class="vc_btn3-container wpb_animate_when_almost_visible wpb_appear vc_btn3-inline wpb_start_animation">[editlink class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-outline vc_btn3-color-inverse" location="front" label="Edit This Entry" page_id=15738]</span>[/if 3580] [dt_gap height="20" /] <div id="himail" class="b-divider b-divider-section"> <div class="b-divider-inner"></div> </div> [if 3580 equals=""] <p style="text-align: justify;">This is your current <strong>DRAFT</strong> entry of the County, Unitary & Parish Election 2017 Questionnaire. You can continue where you left off with a saved entry by clicking <strong>Continue This Order</strong> button above. To submit this as a completed order click on the 'Continue This Order' button above and follow the order all the way to end and click <strong>SUBMIT</strong>.</p> <p style="text-align: justify;">If there are no entries displayed here it means that you either did not save your form correctly or there may be another problem with your saved entry. You can contact <a href="https://support.fdmplc.com" target="_blank">FDM Technical Support</a> for help.</p> [/if 3580] [if 3580 not_equal=""] <p style="text-align: justify;">This is your <strong>COMPLETED</strong> entry of the County, Unitary & Parish Election 2017 Questionnaire. You can still make changes to a completed entry by clicking on the <strong>Edit This Entry</strong> button or to view your order click on the <strong>View This Entry</strong> button.</p> [/if 3580]
*Field 3580 is our ‘I agree to the T’c & C’s’ field.
We use the conditionals [if 3580 equals=“"] and [if 3580 not_equal=“"] to display different messages to the user (This is your current DRAFT entry or This is your COMPLETED entry etc) and to display 2 different sets of buttons to the user.
If the DRAFT message is displayed then the user has a ‘Continue This Order’ button displayed and if the COMPLETE message is displayed then a ‘View This Entry’ and ‘Edit This Entry’ buttons.
NOTE: If the DRAFT message is displayed there is also additional button which allows the user to delete the saved entry and start again from scratch if required.
Details Page
The details page is much more straight forward and essentially just displays the entry and then 2 buttons to easily allow the user to edit the entry if required.
The code for this page is:
<h3>Submission details</h3> <ul> <li><span style="color: #333333;">Created: [created-at]</span></li> <li><span style="color: #333333;">Created By: [3419] [3420]</span></li> <li><span style="color: #333333;">Last Updated: [updated-at]</span></li> <li>Updated By: [updated-by]</li> </ul> [dt_gap height="20" /] [frm-show-entry id=[id]] [dt_gap height="20" /] <span class="vc_btn3-container wpb_animate_when_almost_visible wpb_appear vc_btn3-inline wpb_start_animation"><a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-outline vc_btn3-icon-left vc_btn3-color-inverse" title="" href="https://www.fdmplc.com/elections-2017-county-local-parish/your-entries/" target="_self"><i class="vc_btn3-icon fa icon-back"></i> Go Back</a></span> <span class="vc_btn3-container wpb_animate_when_almost_visible wpb_appear vc_btn3-inline wpb_start_animation">[editlink class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-outline vc_btn3-color-inverse" location="front" label="Edit This Entry" page_id=15738]</span>
And that is pretty much it. The screenshots below will show you what all of this looks like on the front end and the overall functionality is very useful.
I also applied the same system to my Invoicing System which you can see HERE
Enjoy
Chris