[RFC] The New Form Block

[elan-tbx]

How It Works

At the direction of MWPW-139077, a new Form block is on the way. This differs from FaaS in that it allows authors to quickly put up simple forms with automatic data collection, based on the Franklin Forms architecture. All that is required is an Excel (or Google Sheets) document with some specific sheets and tables, and you should be ready to go.

The helix-default sheet, describing what the form should look like:

The incoming sheet, where form submissions will be automatically collected (Note: the table here must be named intake_form. More details here:

The Form block in use. The second row is just the path to your Excel document, followed by a .json file extension. The bottom row allows for a URL to redirect to after a successful form submission, or a simple Thank You message.

The Form block on a page:

The currently supported field types are:

• text (and all subtypes)
• text-area
• checkbox/checkbox-group
• radio-group
• select
• submit and clear buttons
• heading (not a field, but allows for breaking up fields with text/attaching a header to the top of the form)

All form fields include a required option that is validated on submit. Beyond that, currently, default browser validation is used for the rest. Note that all fields are sanitized before submission.

There also exists a basic "Rules" system for showing/hiding fields based on certain criteria. In the Excel doc used above, the last field before the buttons will have a hidden class applied if favoriteNumber is over 10:

The operator strings used here are based on the Python operator function names standard math symbols. Supported comparisons currently are:

• Strings
  • = (equal)
  • != (not equal)
• Numbers and Dates
  • = (equal)
  • != (not equal)
  • > (greater than)
  • >= (greater than or equal to)
  • < (less than)
  • <= (less than or equal to)

Purpose of Discussion

While there is a PR up for this first version of the block, I anticipate there will be many ideas/suggestions on how we can improve on this with future work. Do we want to add background-color/image support to the block? Should we include more stylized error messages for each field? How can the "Rules" system be improved upon? Are there other form inputs we should support?

Any and all input is greatly appreciated. Thanks.

Roadmap

Some ideas have been brought up for new features to put in the next version of the block:

• Decoupling the source and target URLs of the block, as described by @honstar above. Allows for data to be sent to a second location.
• Adding a "required when visible" function for hidden fields - @saugatmalla
• Adding modal support for the Thank You field - @saugatmalla

I'll update this list as more feedback comes in

[auniverseaway]

This looks great. I know a lot of people will be happy about self-service forms.

Do we want to add background-color/image support to the block?

Just inherit from the parent section (metadata)?

Should we include more stylized error messages for each field?

I'd say no for now.

How can the "Rules" system be improved upon?

It's a touch nerdy, but I think it's fine. If an author needs engineer help to setup a form, that's probably OK since the intake will also need to be validated. There will not be a lot of forms made... I hope.

Are there other form inputs we should support?

I think this is an interesting one from a localization perspective. It calls out how we need DNT for rows / columns. I probably wouldn't do anything right now about this.

[honstar]

Thanks @elan-tbx , this looks great! Regarding the data collection part, I was wondering if you have considered the ability to post the collected data to an API endpoint instead? This would allow us to create RFI or trial forms where data needs to be ingested into external systems without us having to store the data whatsoever.

[honstar]

I like that idea, looks clean to me 👍

[honstar]

hi @elan-tbx , following up on this: I was wondering if there has been any development into this direction?

[elan-tbx]

@honstar not yet, but I can get started now that I have some available time. Do you want to write the ticket for this one since it was your idea originally?

[honstar]

Thanks for the offer 👍 Let me create a ticket.

[honstar]

Ticket created, thanks in advance for looking into this 👍

[elan-tbx]

Update

The decision has been made to change the operator symbols for rule comparisons to standard math symbols (e.g., =, !=, >, >=, etc.). I've updated the description to reflect that.

[elan-tbx]

Update

Two new operator symbols were added, inc and exc, relating to whether checkbox and radio groups include or exclude a value, respectively.