Release v2.6.0

Since version 2.5.3, these changes have been made:

• Fieldset Legends For the list field types (e.g., checkbox list, radio button list), they are now using a legend field within a fieldset in order to label the group of fields (rather than a label). This should improve accessibility.

The build process was also improved (by updating to a newer version of node-sass) to work better with Node 12.

Here is an example of a few fields using fieldset legends:

This makes it clear that the text is a label for the entire group of fields.

Release v3.3.6

Since version 3.3.5, these changes have been made:

• Fix IsServerSideOnly fields rendering There was a bug (#177) that prevented forms from rendering if a IsServerSideOnly field (e.g. Text Constants) was included in the list of fields to render. This was highly likely if an autopopulate layout was used.

Release v3.3.5

Since version 3.3.4, these changes have been made:

• Fix Submission Deletion There was a bug that prevented form submissions from being deleted when you clicked the "Delete" button next to a submission. This has been fixed. Thanks to Enrique Capellan for reporting this issue.

Release v3.3.4

Since version 3.2.1, these changes have been made:

• Duplicate Forms It is now possible to duplicate an existing form (nifty if you want to create a similar form with slight modifications). Thanks to ⭐@antonio-calatayud⭐ for implementing this!
• Formulate Pro Preparation A few changes were made to facilitate features implemented in Formulate Pro (e.g., it's now easier to derive from the email form submission handler, and the form designer has some improved styles): https://www.formulate.rocks/pro/
• Query String Prepopulation The plain JavaScript template can now prepopulate field values via querystrings matching the field alias (e.g., "?firstname=Nick").
• Disambiguate FieldDefinition In the AngularJS template, this class would conflict with another class built into the core of Umbraco 8. An alias was added to disambiguate between the two.
• Date Fix The date field in the plain JavaScript template will no longer throw an error in IE11.

Release v2.5.3

Since version 2.5.2, these changes have been made:

• Query String Prepopulation The plain JavaScript template can now prepopulate field values via querystrings matching the field alias (e.g., "?firstname=Nick").
• Date Fix The date field will no longer throw an error in IE11.

Release v2.5.2

Since version 2.5.1, these changes have been made:

• Fix Blacklist The web.config will now be transformed on install to ensure the email blacklist configuration file is referenced from the web.config.

Release v2.5.1

Since version 2.5.0, these changes have been made:

• Configuration Changes Building upon the previous release, additional changes were made to facilitate subclassing DefaultConfigurationManager, which allows you to customize portions of Formulate's configuration.

Release v2.5.0

Since version 2.4.9, these changes have been made:

• Blacklist Emails In addition to whitelisting, you can now blacklist email addresses (by full address or by domain) in the send email handler.
• Virtual Configuration Made a few class members virtual to make custom configuration via subclassing easier. This is useful if you want to load configuration in some other way than from the default configuration files.

Release v2.4.9

Since version 2.4.8, these changes have been made:

• Email Message Whitespace You can now have trailing whitespace after your email message when using the send email handler. This allows for a bit of space to separate your message and the field values.
• HTML Field Values You can now send emails containing field values that contain HTML. One use case would be to generate an anchor tag for a link to a file that is clickable in the email.

Release v3.2.1

This is a big release with one breaking change (the label order has changed, as explained below).

Since version 3.1.0, these changes have been made:

• Multi-Step Forms Formulate now natively supports multi-step forms (i.e., a form in which you have a next/previous button on some steps, and then submit the form in the last step).
• Reverse Label Order Field labels now appear after input fields. This is to more easily facilitate the increasingly common scenario in which labels are used as a placeholder until a field is focused (you use a focus selector and sibling selector to transition the label between its roles).
• Disable Email Whitelist The default is no longer to prevent emails that aren't whitelisted. You can still use the whitelist feature, but you must enable it in the config file.
• Hid AngularJS Template Since the plain JavaScript template will be the primary template going forward, the AngularJS template has been hidden by default. It can still be used if you enable it in the config file. This is intended to more clearly convey that the plain JavaScript template should be your first choice.
• Clearer Validations The AJAX submission API now returns more detailed information about fields when they fail validations (such as the particular validation that failed). This can help with troubleshooting (e.g., for the Recaptacha field).
• Validation CSS Classes Added a CSS class for each validation on a field. Useful, for example, if you want to append an asterisk after any required field.
• Cleaner Config The Formulate configuration JSON file is now stored with indents to make it easier to read.
• Upgrade Fix Formulate would sometimes think it was being upgraded when it wasn't, which meant it updated files when it didn't need to. This has been fixed.

Label Order

To restore the previous behavior of labels appearing before input fields, add this JavaScript before the Formulate JavaScript:

<script>
    window.labelAfterTextInput = false;
</script>

If you instead want to reverse the order with CSS so that the label appears before the field, you can do something like this:

.formulate__field {
    display: flex;
    flex-direction: column;
    /* This just makes sure the inputs don't take the full width of the screen. */
    align-items: flex-start;
}
.formulate__field input + .formulate__field__label,
.formulate__field select + .formulate__field__label,
.formulate__field textarea + .formulate__field__label{
    order: -1;
}

That uses flexbox to change the appearance of the order of the elements, which you can read about here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Mult-Step Forms

Refer to this page for updated JavaScript for multi-step forms: http://www.formulate.rocks/plain-javascript/render-form

Refer to this page for updated CSS for multi-step forms: http://www.formulate.rocks/plain-javascript/styles

To create a multi-step form in the layout editor, first click "Edit Rows", then click "Add Step", as shown here:

Be sure you have buttons with the kind set to "Previous" or "Next":

Validation CSS Classes

Here's an example of the markup for a text field that has two validations on it (a regex validation and a required validation):

<div class="formulate__field formulate__field--text formulate__validation-type--regex formulate__validation-type--required">
    <input type="text" aria-label="First  Name" placeholder="First  Name" id="formulate-field-1">
    <label for="formulate-field-1" class="formulate__field__label">First  Name</label>
</div>

Note the "formulate__validation-type--required" CSS class, which you could use to append a "*" after the label, like this:

.formulate__validation-type--required .formulate__field__label:after {
    content: "*";
    display: inline-block;
    color: red;
    margin-left: 5px;
}

EDIT: The validation CSS classes feature may have a bug (it seems to be applying the CSS classes to every element, even if they don't have those validations). That shouldn't impact most users, and you should expect a fix in a future release.