Showing progress

A multi-step form is a form split into multiple steps, where each part is submitted to the server as a distinct step before the next step is shown. 

A multi-page form is a form where the parts of the form are spread across multiple pages and, in effect, multiple forms.

When users are completing either kind of multi-part form, it is usually good to provide a feed back of progress. What has been completed and what remains to be completed.

To supplement messages returned by the form processing pipeline, Form Reform Display provides two blocks for showing progress through multi-part forms.

  • The Form State Percentage Progress block
  • The Completion List block

Form State Percentage Progress

The Form State Percentage Progress block, provided by Form Reform Display, enables progress to be shown based on the current form state.

This block is configurable to show form states as a percentage width of a progress bar with options for adding labels or percentages for each state or combination of states. It is only concerned with the form state and does not look at form results.

Whilst it can be used with any form and page to illustrate progress, the main use is for multi-step forms such as Example - Multi Step Forms.

The block reacts dynamically to form state, so will update progress following AJAX submission of multi-step forms.

A typical scenario would be a number of form steps followed by success after the final submission of the form.

In our example below, we show the progress bar in 3 steps:

  1. Step 1 - the bar is 30% wide with the text "Get ready". The bar is styled with the Bootstrap Primary/Subtle light blue.
     
  2. Step 2 - The bar is 70% wide with the text "Just this step and you are done". The bar is styled with the Bootstrap Primary dark blue and animated to hint the form is in progress.
     
  3. Success - The bar is 100% wide with the text "That's it. The progress bar now shows the form is completed". The bar is now styled with Bootstrap green for success.

The dialogue allows levels of progress to be added, removed, sorted and designed.

When used with a multi-page form there could be one block on each page of the form, pre-configured to illustrate that page's place in the overall form process.

A live Progress Bar

Configured to show only form step 1, so whilst it is live, nothing will happen! See Example - Multi-step forms for a really live demonstration.

Completion List

The Completion List block provides a summary based on which forms have been completed.

The edit dialogue enables a list of forms to be configured by picking the pages on which the forms are located.

The block then looks for results from these forms for the current user and summarises status as a table and a percentage progress.

As such the Completion List block is best suited for multi-page forms or a site with multiple independent forms. You can see an example of the Completion List block on the main page for Form Reform Display and at Example - Summary of Form Submissions, where the Completion List block is used to summarise which example forms you have completed on this site. We also show that live completion list below.

A live Completion List - your progress through forms on this site.

If you don't see any form results listed, it will be because these form results are held in your session. Go to one of our example forms, submit a form, and come back here to see it displayed.

Your progress through example forms

0%
Form Status
Example - Getting Started - Your first form   ToDo
Example - Tabbed Forms   ToDo
Example - Multi Step Forms   ToDo
Example - AJAX Forms   ToDo
Example - Picking Images   ToDo
Example - Picking Data   ToDo
Example - Signing Forms   ToDo
Example - Sending Email   ToDo
Example - Repeatable Groups   ToDo

Additional Pages

Reform the way you add new input controls

If you need a specialized template or a custom input element, you can design new templates  or new block types for form elements as you would any block type.

Blocks are easy for third party addition or extension. Block templates and are the first thing any Concrete CMS developer learns to code. They are one of the easiest things to code. The underlying mechanisms are well established and reliable.

Reform what you can do with form data

Form handlers are built about the same extensible plugin system as many of my other addons (Universal Content Puller, Omni Gallery, Extreme Clean ...).

The whole system is aimed at easy extension within Form Reform, by third party addons, by agencies and by site building developers.

Handlers can be easily added to do whatever you want with the form data.

Reform where you can save form data

Saving form data with Form Reform is simply a handler in the processing pipeline. You can save to multiple locations or just one location.

If you need to save data elsewhere, such as to a dedicated table, a table provided through another addon, to another database, send it to an API, forward it to another server, or anywhere you can imagine, you can adapt or develop a form handler to do so.

The complexity of the code depends on where you are saving or sending the data, but wrapping that into a form handler plugin for Form Reform is straight forward.

The Form Reform handler plugin system is designed for easy extension.

Form Reform

Reform the way forms are built. Build a form out of blocks. Take control of how form submissions are processed and how the submitted data is stored. Easy to extend. Easy to reconfigure. Tangible data. Easy to add your own integrations.

Form Reform Display

Provides blocks and dashboard utilities to List, display, summarize, generate reports and analyze form submissions from Form Reform. Additionally supports integration with Universal Content Puller.

Form Reform UTM

Not just Form Reform and not just UTM! Capture and hold incoming UTM (or other) tags and make the tag values available to Form Reform and/or Conditional Redirect as {{place_holders}}. You don't need Form Reform to use this.

Form Reform Dynamics

Form handlers for querying Microsoft Dynamics, forwarding and updating form data to Microsoft Dynamics.

Snapshot

A suite of advanced image capture and upload tools. Enhanced drag and drop file uploading. Make screengrabs from within Concrete CMS. Capture images directly from device webcams. Edit images before uploading.

Form Reform Attributes, Express and Users

Save submitted forms to Express objects and user attributes. Add and remove users from groups.

Form Reform Image Picker

Form Reform Image Picker provides an image picking input block for Form Reform. The Image Picker Input is preconfigured to connect to most Omni Gallery gallery and slider display widgets, the core gallery block, and thumbnail showing templates for the core page list block. Advanced settings allow the Image Picker Input to be configured to pick images from other galleries and sliders.

Form Reform Data Picker

Form Reform Data Picker provides data picking input blocks for Form Reform. The Table Picker Input is preconfigured to connect to Universal Content Puller table display widgets. Advanced settings allow the Table Picker Input to be configured to pick data from other HTML tables.

Form Reform Macros

Extends Form Reform with form handler macros. Provides a new dashboard page at System & Settings > Form Reform > Form Reform Macros to manage macros, and form handlers to run macros.

Form Reform Developer

A growing suite of resources to assist those developing blocks, handlers and more complex forms for Form Reform.

Learn with a simple form

While you may have plans to implement some much more complex forms using Form Reform, we strongly recommend you start with a simple form such as our contact form example in order to review the basic principles of using Form Reform before you move onto anything bigger.

  1. Start by submitting the form at Getting Started - Your First Form a few times, even making some deliberate mistakes.
  2. Watch our Getting Started with Form Reform video to see how the form is built.
  3. Read through the rest of Getting Started - Your First Form for more details of how this form is built.
  4. Create a test page on your site to build your own version of Getting Started - Your First Form and experiment.
  5. Develop your test page with some of the concepts introduced by our further examples and experiment with some of the other form inputs.