Go further with the MainCross FormBuilder to create complex multi-step flows

The #FormBuilder is our graphical drag and drop form editor to use for data collection. It was first released in Beta in July 2021 and has come a long way since then. Quoting from my previous article:

This is just the start. There's a lot more planned in terms of data collection forms. The tools will undergo revisions and enhancements. More form fields will get added. The data viewing will allow for visualizations and charting, and all these will be made available as part of the MC license.

The next major update will allow for forms to be created and managed at a network level via the Pro Dashboard, and allow such forms to be used as part of workflows, eg signup processes etc.

So what did we achieve since then?

1. Tools will undergo revisions and enhancements ✅
2. More form fields will get added ✅
3. Forms to be used as part of workflows, eg signup processes ✅

Today I'm delighted to talk about 2 upgrades to the FormBuilder:

1. Form WorkFlows
2. Save/submit system

Form WorkFlows

WorkFlows are a major upgrade to the FormBuilder, they allow a workflow to be attached to a form, which is triggered when the form is submitted by the user, and is based on a pivotal field.

Instead of just a simple data collection exercise, a workflow attached to a form allows one to build branching logic, ie IFTT (If This Then That) easily.

A workflow allows conditional post-submission flows to be enabled for each choice of the pivotal field. Enabling the post-submission flow, allows for multiple actions to enabled for each flow, for each choice.

Possible actions per flow:

1. Send mail to user
2. Show important information
3. Redirect to URL
4. Call webhook

IFTT (If This Then That)

This is best illustrated with some examples:

1. If the user filled the pivotal field, then send a confirmation mail to the user with further details etc.
2. Single choice example 1
3. If the user selected choice A of the pivotal field, then send a confirmation mail to the user with further details.
4. Else if the user selected choice B of the pivotal field, then send a confirmation mail to the user with a payment link.
5. Single choice example 2
6. If the user selected choice A of the pivotal field, then show an alert message "We are excited that you have applied for this role and someone will look through this and schedule a follow up call."
7. Else if the user selected choice B of the pivotal field, then show an alert message "We are not currently hiring for these skills, however we will keep your application in the database".
8. Single choice example 3
9. If the user selected choice A of the pivotal field, then show an alert message "Now take the next step by signing up for an account!" and show a Call To Action button which redirects the user to the signup page.
10. Else if the user selected choice B of the pivotal field, then show an alert message "Please make the payment. It will automatically sign you up for an account." and show a Call To Action button which redirects the user to the payment page.
11. Multiple choice example 1
12. If the user selected choice A of the pivotal field, then send a confirmation mail to the user with further details.
13. Else if the user selected choice B of the pivotal field, then send a confirmation mail to the user with a payment link.
14. Else if the user selected both choice A and choice B of the pivotal field, then send a confirmation mail to the user with merged info from both choices - further details and payment link.

Daisy chaining forms, pages, payment etc

The conditional branching also enables for complex multi-step flows to be created. Again this is best illustrated with a real example:

A consulting firm wants to allow its corporate clients to nominate employees for awards. Nomination requires payment of some fees which is dependent on the size of the organization.

1. A base form is created with a pivotal field "How large is your organization" having the following single choices:
2. <50 employees
3. 50 - 100 employees
4. 100 - 1000 employees
5. >1000 employees
6. Each choice of the pivotal field is set up to show an info alert like "Please make the payment of $100 in the next step." or "Please make the payment of $200 in the next step.", and is set up to redirect to a different payment page, with a different price.
7. When the corporate HR manager fills the base form, they are prompted to make the payment based on their choice of how large their organization is. They click and move to the next step, where they make the payment.
8. The MainCross Collect Payments block on the payment page is set up to redirect upon successful payment.
9. Once a payment is made, it automatically takes the user to the pre-nomination form.
10. The pre-nomination form is created with a pivotal field "Which award(s) do you want to nominate for" having the following multiple choices:
11. Award A
12. Award B
13. Award C
14. Award D
15. The corporate HR manager now selects Award B and Award C.
16. Upon submitting the pre-nomination form, they receive an email with links to the actual nomination form for Award A and Award C.

Read more in the help page.

Save/submit system

Normally forms can only be submitted upon being filled, and later can be edited as desired.

Optionally, for long forms, it may be desirable to allow the respondent to periodically save the progress, and finally submit when ready. In this case, editing is allowed as long as the form has not been submitted. During save no form field validation is done - so even fields which are required can be left blank while saving.

Form field validation is done upon submit as normal.

So instead of a single CTA "Submit response", 2 CTAs are presented and the user can select between them: