Formie 1.4

Verbb Team Verbb Team Apr 2021 3 min read

Today we're releasing Formie 1.4 (opens new window) which (finally) adds support for one of the most requested features - conditional fields, pages and buttons! Plus a few other goodies, of course.

Conditions for all#

You can now conditionally hide (or show) other fields in your form, depending on what values users pick - similar to email notifications.

Creating conditions for fields

Not only fields, but the same conditions functionality is built into pages. This means you can conditionally show, or skip pages entirely, depending on your rules. Formie is also smart enough to know when there are no more visible pages, to submit and finalise your submission.

You can also show or hide the "next" buttons as well. Check out the docs.

New page manager#

We've also given the page manager a revamp, so it'll be a little easier to manage. Previously, this was a table field, which while fine, limited the sorts of content we could store against a page. We'll be looking to expand the sorts of settings available on pages in the coming versions.

The new page manager UI

Cross-browser date picker#

Formie utilised the native browser's date picker for your date fields. However, some browsers (Safari, but believe it or not, IE 😱) don't support them. So, thanks to flatpickr.js (opens new window), you can now have a cross-browser date picker for your forms.

Of course, if you want to live precariously you can opt-out of this behaviour, or roll your own custom date picker.

Formie's new front-end date picker

Encrypt field data#

You can now ensure your submission content is encrypted, by opting into content encryption on any form. This will ensure the raw values from submissions can't be seen in the database. Maybe you have sensitive data captured in forms, but want to ensure it can't be exposed to parties.

Field Visibility#

Field visibility allows you to set any field to be hidden or disabled. A hidden field will still be shown in the HTML source, but hidden from users. You might like to modify the values of this through JS or other means.

A disabled field on the other hand means that the field is still part of submission, but never rendered on the page in HTML. Why might this be useful you ask? Say you have a particular hard-coded value in your submissions, maybe for a competition. You don't want sneaky developers (who have the know-how) to edit the HTML of the submission to modify content.

But - you can still set a disabled fields' content using Field Population in your Twig templates.

Predefined options & bulk options#

For Dropdown, Checkboxes and Radio Button fields, you now have access to a whole collection of predefined options for all sorts of common data. You might like to include a dropdown for countries, but adding these by hand would take hours. Instead, you can pick from our collection.

You can even set the label and value of options independently, and of course, register your own predefined options.

You can also use this functionality to bulk add options, maybe from a CSV, spreadsheet, or email. Just enter one option per-line, and Formie will do the rest.

Select from predefined options, or bulk import options

Widgets!#

We've heard you like widgets, so Formie has a "Recent Submissions" widget, where you can select which forms to use, a date range, and select either a List, Pie or Line chart to show off your form submissions in a nice fashion.

Formie's Recent Submissions widget as a pie chart

Unique submissions#

Limit submissions to one-per-person (or, per email), by setting the email address field in a form to only allow submissions. You might like to only allow users to fill out a particular form once, with the same email.

Add element relations to submissions#

You can also relate any element you like to a submission. This achieves the same functionality as you would be creating an Entries field, and populating that value with an Entry on your choice in your Twig templates. The different here, is that this provides a much more read-only measure.

For example, say you wanted to have a feedback form on a Product, and you wanted to relate every submission made on that form to a product. Now you could use a Product element field, but this runs the risk of accidental removal of that product element when editing the submission.

You can also do cool things like reverse relations to see what submissions were related to an element. Check out the docs.

Until next time...#

There's plenty of upcoming changes we're excited to push out in the 1.4.x (opens new window) releases focusing on small improvements to workflow and minor features, leading up to our larger "New Stuff" 1.5 (opens new window) release where we're focusing on brand new features. Be sure to keep an eye on our milestones (opens new window) in Github for the latest developments on the roadmap.