Formatting template overrides are not overriding defaults

[benjaminkohl]

What happened?

I am in the process of upgrading Freeform to v5 and am having to rework how we previously handled our custom formatting template work. I chose to use the method described in the documentation here where the overrides are defined when rendering the form:

https://docs.solspace.com/craft/freeform/v5/templates/formatting/#formatting-template-with-form-render

I have some Twig variables set with a list of classes and I am attempting to override the text input styles like so:

"@text": {
    attributes: {
        input: {
            class: myClassesVariable,
        },
        label: {
            class: myLabelClassesVariable,
        },
    }
 },

When the form renders, I do see the classes I provided but they are mixed in (re-sorted?) with other conflicting Tailwind classes that I did not provide. This results in the form not having the desired styles.

As a precaution, I even overrode the @global class attribute to be empty just in case it was global defaults being inserted into each field type as well. That didn't solve the issue.

"@global": {
    attributes: {
        class: '',
        label: {
            class: standardLabelsClasses,
        },
    },
},

For the record, the default formatting template is set to Tailwind-3. How do I go about removing the unwanted classes from our form inputs, labels, containers, etc?

Errors and Stack Trace (if available)

How can we reproduce this?

1. I guess just do what I did.

Freeform Edition

Pro

Freeform Version

5.12.0

Craft Version

4.14.15

When did this issue start?

• Unsure
• Fresh install of Freeform
• After upgrading from older Freeform version
• After upgrading from older Craft version
• After a change to hosting configuration

Previous Freeform Version

4.1.25

[kjmartens]

Hi @benjaminkohl,

You will want to have a look at the Behavior Syntax part of the documentation:
https://docs.solspace.com/craft/freeform/v5/templates/formatting/#behavior-syntax

You can control the behavior of attributes by specifying a +, -, or = symbol before the attribute name and wrap it in quotes, e.g. "=class". If no behavior symbol is set, e.g. class: "my-class", the + behavior will apply.

This works for unknown attributes as well, e.g. "my-attribute": "whatever" can be written as "=my-attribute": "something else".

• The + prefix will add the specified values to existing values for the same attribute set elsewhere.
• The - prefix will remove the specified values from any existing values for the same attribute set elsewhere.
• The = prefix will replace all existing values of the same attribute set elsewhere with the ones set here.

Essentially, if you want to override classes from elsewhere, you should do something like this:

"@text": {
    attributes: {
        input: {
            "=class": myClassesVariable,
        },
        label: {
            "=class": myLabelClassesVariable,
        },
    }
 },

OR

"@global": {
    attributes: {
        class: '',
        label: {
            "=class": standardLabelsClasses,
        },
    },
},

Let me know if you have any further questions. 🙂

[benjaminkohl]

@kjmartens Oh, wow. Thanks! I guess I didn't make it that far down the page.

[kjmartens]

Yeah, there's a lot of functionality, so some stuff can get buried. 🙂