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.