Customize the field.html file for Sprout Forms

Question

I've set up a Spout Form, and I can customize the form.html file after copying it and moving it to my own templates/_form/formHandle folder. But when I want to customize the field.html file (I do the exact same thing as with the form.html file) nothing happens. Does anyone know what I'm doing wrong? I only want to add some custom classes, nothing fancy :-).

Thanks!

Answer 1

To override field.html you will also have to provide an override for tab.html and errors.html.

The field.html template is a bit more complex and the Twig code to get it to work depends on a few other files to work properly.

I've updated the documentation to better reflect this requirement: Template Overrides

---

If you only need to update the classes, you may also want to consider Rendering Options.

Rendering options would let you dynamically pass the class names to the underlying form code. Depending on how predictable your field names are, it could work like this:

{% set options = {
    "class": "form-class form-class-customized",
    "errorClass": "form-has-error",
    "fields": {
        "fieldHandle": {
            "class": "my-fancy-class",
            "errorClass": "field-has-error",            }
    }
} %}

{{ craft.sproutForms.displayForm("formHandle", options) }}