Blog

Introducing Formie

Formie social card

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 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 in person and showing them the Melbourne sights.
  • DotAll 2020 postponed 😔 — let's see how 2021 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 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

Formie Icon

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 other established forms 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, 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

Formie Field Builder
Formie's drag-and-drop 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.

Easy to see dropzones, so users know where fields can be placed

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.

Native draggable element covers dropzones
Formie ensures it doesn't get in the way

For those interested, the form builder interface is built using Vue.js, 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.

Formie Fields
Some of Formie's fields with plain terminology

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.

Formie Start
Creating a new form hides the handle from user view

There's also the simple act of moving handles to an "Advanced" tab for fields, which helps with the cognitive load for creating fields.

Formie Field Handle
Moving handles away from labels

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.

Formie's handle generation is aware of your other fields and forms

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.

Re-generating handles from the field's label is a single click!

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.

How the variable tag field can do-away with user-facing Twig

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.

Formie Form Behaviour
Manage the success action on forms with ease

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.

Formie Stencils
Starting a new form from a stencil makes creating forms super-quick

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.

Formie Existing Fields
Select existing fields from other 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 the needing the ability to add more of the same fields.

Formie Repeater Field
The front-end for an example Repeater field

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.

Solspace Freeform & Sprout Forms Migration to Formie
The migration assistant for Solspace Freeform and Sprout 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.

We also have an informal roadmap for upcoming planned features and improvements.

A special thanks 🥳

Jayden Smith
Jayden Smith — the real 10x developer

We'd also like to extend a special thanks to Jayden Smith, the Senior Web Developer at S. Group 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!

That's a wrap for now, we hope you enjoy Formie!