G'day! It's been a while since our last blog post (over 12-months — oof), and boy has 2020 been a rollercoaster year.
- We attended DotOne 2020 (opens new window) in Melbourne, hosted by the Craft team. We had a ball meeting some old friends and making new ones. The highlight was meeting Brad Bell from Craft and Andrew Welch from nystudio107 (opens new window) in person and showing them the Melbourne sights.
- DotAll 2020 postponed (opens new window) 😔 — let's see how 2021 (opens new window) goes.
- Dealing with COVID-19.
While we won't dwell on it too much, there's no denying the COVID-19 pandemic has had a global impact on people's livelihoods, including the clients our plugins support. More-so, we've seen many of our friends and colleagues personally affected by it, and we sincerely hope each of you are not too affected by the changes and restrictions.
So, what's been happening?#
Since this time last year we've been tinkering away with new plugins, developing new ideas, ditching others and enjoying watching where Craft and Craft Commerce are heading. There's already some great things coming in Craft 3.5 (opens new window) soon. We'll have more details on new developments to show off later in the year.
But, something we'd like to announce today...
Introducing Formie#
Today, we're releasing a new plugin called Formie — a forms plugin for Craft. Why another forms plugin you might ask? We're well aware there are several (opens new window) other (opens new window) established forms (opens new window) plugins in the Craft plugin marketplace, and we've been using them for years.
So why create another one? The reason is simple — championing user experience.
Over the years and through extensive client feedback, we've been taking notes of how our clients have been using forms on their sites. Along with our friends at S. Group (opens new window), this data has identified what's worked, and what doesn't.
We wanted to build a plugin that puts non-developer users first, ditching developer-centric terminology, removing hard-to-use features and make building forms a fun and enjoyable experience.
Formie has been over 12 months in the making, and has gone through rigorous user testing and real-world usage. We're already using it on a number of production sites. We're really proud of what we've put together, but we'll let you be the judge.
Let's walk through some of the things we find important...
An intuitive form builder#
Creating an easy to use form-building experience was our first priority, and we've created a drag-and-drop, multi-page, column and row builder. We think it looks and works great at face level, but we've taken great care to provide a good user experience (UX) with small details.
Dedicated dropzones#
There's no doubt drag-and-drop functionality is an easy and intuitive way to interact with elements on a page, but it doesn't come without caveats. Often, it's difficult to know where elements should be dragged to, or even trying to "wiggle" an element in-between others, leading to a frustrating UX.
We wanted to make this crystal-clear when dragging fields into the form builder. Dropzones are shown as soon as you start to drag fields, and are highlighted when dragged over, so there's no guesswork.
Drag handles#
Speaking of drag-and-drop, it's often difficult to see what's underneath the element that you're dragging. Sometimes is a gamble over whether the element will be placed where you expect.
Instead, we've taken careful consideration to position the draggable elements so you can see where to drop elements. To illustrate, let's compare native dragging with our own dragging below.
For those interested, the form builder interface is built using Vue.js (opens new window), and is a pretty good demonstration of what can be achieved with Vue and Craft.
Getting naming right#
An important UX factor was to ensure things are named right. For fields, users may not understand what a "Select" or "Textarea" field is. As developers, it's second-nature, but we found users responded to "Dropdown" and "Multi-line Text" better. This applies to all aspects of the form builder.
Ease up on developer terminology#
One thing that users often ask us is what a "handle" is. It's honestly something they don't need to know about, but important for developers. We wanted to take that terminology and put it way in the background, out of the users mind.
For instance, creating a new form actually hides the form's handle on purpose, so there's very little to get in the way when creating a new form.
There's also the simple act of moving handles to an "Advanced" tab for fields, which helps with the cognitive load for creating fields.
Handle generation#
But — handles are still vitally important for forms and fields. Hiding these seems like a bad idea, right? Fortunately, Formie's handle generation is smart enough to determine if a handle is a reserved Craft handle, or if there's already a form or field that has this handle.
Similarly, after a field has been created, renaming the handle of a field needs to be done manually. For non-developers, this is a difficult task, as they're required to understand it needs to be camel-case, contain no spaces, etc. They also need to be aware that it has to be unique, and on, and on.
A user-friendly option for this is adding a refresh button on the handle field.
These combined measures make the process of managing handles a breeze.
No more Twig#
There's no denying Twig is powerful and flexible for developers, but expecting non-developers to write or interact with Twig is not a great solution. We've created a Variable Tag field, allowing users to pick from a list of dynamic variables to include in their content.
In practice, this means things like email notifications can easily reference Email fields used in the form, or global site settings from Craft in a manner that's easy for non-developers.
Redirection#
Often you'll want to ensure users see a success message when the form has been successfully submitted. It's also common to redirect to a page or entry. Managing these options can be a pain, and using static URLs are a maintenance nightmare.
We've made this simple with Form Behaviour settings.
Stencils#
Stencils are basically starter templates for your forms. Rather than starting a form from scratch every time, you can create a Stencil to save all your fields, form settings and email notifications. In fact, Formie provides a Contact Form stencil out of the box (which you can edit or remove).
This makes creating forms faster than ever, without the confusion of using "Save as a new form". It also works with Project Config, so you can use them across projects.
Existing Fields & Synced Fields#
You can also pick existing fields used on any other form to copy into a new form. But you can also create a "Synced" field — a field that synchronises its settings from one instance of the field to all others. This is super-useful for fields you use in several forms, rather than managing multiple, exact copies of the field across forms.
Repeater and Group Field#
The Repeater field allows fields to be grouped together, and made repeatable. A pretty common UI pattern when asking users to enter their details, but needing the ability to add more of the same fields.
A group field works in a similar way, but just without repeatable elements.
Migrating from Solspace Freeform or Sprout Forms#
We've provided some migration assistants to easily migrate your existing forms from Solspace Freeform and Sprout Forms. This will not only convert your forms, but also the submissions and email notifications related to forms.
...and so much more#
We're just scratching the surface of Formie's features — like 26 different fields, email notifications, submissions, spam protection, reCAPTCHA v2/v3, Ajax/POST submissions, client-side validation, custom templates for emails and fields, single-line forms, and more.
Check out the full list of features for Formie, explore the docs or give Formie a trial on the plugin store (opens new window).
We also have an informal roadmap (opens new window) for upcoming planned features and improvements.
A special thanks 🥳#
We'd also like to extend a special thanks to Jayden Smith (opens new window), the Senior Web Developer at S. Group (opens new window) for all his hard work on Formie. Jayden's been passionately working with the team in developing Formie for months, and we couldn't have done it without him. His insight and development know-how have been critical in Formie's development.
Why not check out some of the guy's own Craft plugins (opens new window)!
That's a wrap for now, we hope you enjoy Formie!