Verbb

Formie 1.5

Verbb Team Verbb Team Dec 2021 8 min read

We're stoked to announce Formie 1.5 (opens new window) is available today! We're labelling this as our "New Stuff" release, and we've saved up a bunch of goodies. Just in time for Christmas 🎁

​
Formie 1.4.x#

Before we dive into 1.5, let's take a look back at all the new features added in 1.4.x (opens new window).

With 27 feature requests filled, 107 New features, 53 Improvements and 276 Bug fixes, there's plenty to cover.

​
CSS Variables#

Formie generates pretty nice-looking forms (if we say so) out of the box with its default theme. One thing we do on pretty much every site is tweak this to ensure styles are appropriate to the brand of the site. For example, setting the submit button colours to the brand colour, or font attributes for inputs.

Until now, you'd needed to use CSS and lots of !important rules in your CSS to override what Formie does. This is now much simpler, using CSS variables.

Read more about CSS variables and how you can use them to style your forms.

​
Integrations and Email Notifications#

One feature we've been keen to get implemented is being able to re-trigger integrations and email notifications for a submission. Fortunately, you can re-send both of these whenever you need to!

Re-trigger your email notifications or integrations in a snap.

​
Creating Submissions#

You can also create brand-new submissions directly from the control panel. Neat!

​
...and lots more!#

Here's some of our personal highlights.

  • Added Pardot CRM Integration.
  • Added "Show Structure" field setting for Categories fields, to display a "-" character when outputting categories in a - to denote its hierarchy
  • Added "Structure" as a order by option for Categories fields.
  • Added "Root Category" field setting for Categories field, to control which descendant category to start from during output.
  • Added better validation for submissions to protect against spam bots.
  • Added CORS handling for submissions, when developers want to use JS to make submissions.
  • Added new formie/forms/refresh-tokens endpoint to allow captchas to work properly for statically-cached sites.
  • Added support for Hidden fields to have their "Custom Value" set to other fields or special variables.
  • Added date picker options field settings for Date fields.
  • Added support for UI elements for Form Template fields.
  • Added support for user photo uploading (via File Upload fields), for User element integrations.
  • Added support for more error message details for failed email notifications (for Craft 3.7 only).

​
Formie 1.5#

With that in mind, let's jump through to Formie 1.5 (opens new window) which has filled over 34 feature requests. Check out the GitHub Milestone (opens new window) for the details on each item.

​
Calculations Field#

The Calculations is a read-only field that allows you to create a "formula" for what you'd like the content to be. The formula is then evaluated at real-time and rendered for the user to see. This content can be a combination of arithmetic, bitwise, comparison, logic, string, array, numeric and ternary operators.

For example, let's say you wanted to add some numbers together, or output a logic operation.

Pop quiz! What will the output be?

While using static content is fine, the real power comes from being able to use other fields in your formula. We can even combine arithmetic operations, logic operations, or even concatenation.

Concatenating two different field values.
Performing arithmetic operators on field values.
A complex example using fields, logic and ternary operators.

As you might've guessed, this can be a pretty powerful field type.

​
Signature Field#

Being able to digitally sign documents these days is pretty common. You might also need this functionality when filling out legal-based forms, or as a means to confirm users understand and accept certain policies for forms.

You can now add a Signature field, allowing users to draw their signature with a mouse, or for mobile devices their finger or stylus.

The signature field, mobile-ready!

The actual signature is stored in the database as a base64-encoded string, so it won't take up any space as an asset or image separate to your submission content.

​
Password Field#

While you've been able to achieve having a password field using input attributes up until now, we've added a dedicated Password field. The value entered into the field is immediately hashed, so the plain text content is never stored anywhere. It'll be pretty useful for user-registration forms!

​
Summary Field#

Sometimes, you might want to show your users a summary of the form before they submit the form. This is particularly useful for long multi-page forms, where a lot of content has been added by the user. It also helps with confirming all the details are correct, which is always a good idea for customer service.

The summary field, often placed at the end of your form - but can be anywhere

The default look of the Summary field is quite boring, but fortunately you have complete control over it, with template overrides.

It'll also auto-update the content whenever the content in your form changes!

​
Matching Field Values#

If you've ever needed a "confirm" type field, you can now enable a setting on fields that its value must match that of another. Perfect for a "confirm email" or "confirm password" field.

Supports Text, Number, Password and Email fields.

Selecting a field that must have an identical value to another field.

​
Form Import/Export#

One of the biggest gripes with have with working in a multi-environment setup is dealing with forms across environments. Because forms are considered content (much like entries) they aren't stored in Project Config, or in your project files. Instead, they're stored in the database.

In practice, this means any form you might create on a staging or development environment is next to impossible to migrate to production. This is particularly painful if you've spent hours crafting a large multi-page form, for you to have to manually create it again on production.

Fortunately, we've introduced Import and Export functionality for forms!

Select the form you want to export

Start by exporting the form you've created. It'll create a JSON file containing your form, pages, rows, fields, email notifications and even form/email/pdf templates.

Configure your import to determine how any existing forms should be treated

Then, on the destination install, upload this export. If an existing form is found, Formie will let you know and prompt you on what action to take. You can either completely replace the existing form, overwriting the form and settings, or create a new one.

We think it'll be a massive improvement working across environments. Not only that, but you'll be able to re-use your forms across entirely different projects too!

​
New Support Requests#

Support is our bread and butter at Verbb, and we're always looking for ways to make it easier to get help when you need it. Usually, there's a multitude of factors that can affect a bug appearing, from a legitimate bug, a mis-configuration, template overrides, to environment and more. To properly diagnose issues, we often need to know everything about your form's settings, what fields you're using, if you're using custom templates, and lots more.

For this reason, we've added a dedicated Support section for you to get assistance with. You can select the form you're having an issue with, add some detail on the issue and it'll send the Verbb team a support request with your form settings, and a few other vital bits of information.

While it may not be the most exciting feature for regular users, we hope that it'll greatly help with diagnosing issues and getting the information we need to help you.

The Formie support area

​
PDF Templates#

You can now attach a PDF to your email notifications. The content if this PDF template can be whatever you require, from a copy of the email content itself, an additional document or any sort of custom template.

Attaching a PDF template to an email notification

​
Conditional Recipients#

While you've been able to use sending conditions for email notifications, we've also added the ability to set recipients based on conditions. Where this feature really shines is if you want to include additional recipients, based on certain fields being selected, or containing certain content.

For example, say your form has a dropdown for "Department" for the user to select where a contact enquiry should be sent. You might want all emails to be delivered to a support@ email, but if they select "Accounts" as the department, to add in accounts@ as a recipient, while still ensuring your email also goes to support@.

While you could achieve the same thing with sending conditions, you'd need to create a new email notification for every possible condition, which we think is a bit of a waste of time!

Defining different recipients, depending on the values of submissions

​
New Integrations#

We've also added a few new integrations:

  • CRM
    • Klaviyo
    • Maximizer
    • Microsoft Dynamics 365
    • SharpSpring (SharpSpring Form)
    • SugarCRM
  • Email Marketing
    • Adestra
    • EmailOctopus
    • Klaviyo
  • Miscellaneous
    • Recruitee
  • Captchas
    • reCAPTCHA Enterprise
    • hCaptcha
    • Snaptcha plugin
  • Address Providers
    • Loqate

​
Wrapping Up#

There's also a few other highlights worth quickly going over:

  • Feed Me support for submissions. Easily import content as form submissions
  • Added a time-only option to the Date/Time field
  • Sent Notifications now have a status, and are created earlier. This will make it easier to diagnose issues on why something may not have sent.
  • Google Tag Manager support for all buttons, within the form builder.
  • Submission snapshots now permanently store anything set via setFieldSettings() in your templates. No more validation issues for changing Dropdown field options.
  • Element fields can now have their values pre-populated via query string.
  • "Use my location" setting for Address fields with the Google Places address provider integration. This will ask the user permission to use their current address automatically.
  • You can now pick any assets system-wide to be attached to an email notification.
  • Added better link support for rich text fields.
  • Added indicator in the form builder to show fields configured with conditions to make it easier to pick them out from other fields.
  • For developers - revamped the field content classes by introducing the following functions:
    • getValueAsString() - To get a string-representation of a field's value.
    • getValueAsJson() - To get a JSON-representation of a field's value.
    • getValueForExport() - To get an export-ready representation of a field's value.
    • getValueForIntegration() - To get an integration-ready representation of a field's value.
    • getValueForSummary() - To get a field's value for use in the Summary field.

​
That's a wrap#

We hope you like the new features in Formie 1.5. If you're already chomping at the bit for the next release, take a look at what we have planned for 1.5.x (opens new window) and 1.6 (opens new window) in our GitHub milestones.

Until next time!