Craft 3 / Sprout Forms Bootstrap field classes

Question

How can I add a css class directly to the INPUT tag generated by {{ input|raw }} from the accessible template of the sprout form plugin? I do not wish to add the class to a surrounding div.

I ended up looping through the form fields, which works almost but lacks the field types:

This is my field.html. It seems I cant get the field.type thus it defaults to text for all fields.

{%- do craft.sproutForms.addFieldVariables(_context) -%}

{%- set label            = field.name ?? null %}
{%- set name             = field.handle ?? null %}
{%- set type             = field.type ?? 'text' %}
{%- set required         = field.required is defined and field.required ? true : false %}

{%- set id               = renderingOptions.id ?? name %}
{%- set class            = renderingOptions.class ?? name %}
{%- set value            = entry is not empty ? entry.getFieldValue(name) : null %}
{%- set errors           = entry is not empty ? entry.getErrors(name) : null %}


{%- namespace field.getNamespace() -%}
    {%- if field.isPlainInput() -%}

        {{ input|raw }}

    {%- else %}

        {% if label -%}
            <div class="heading">
                {% if label -%}

                        <label{% if name %} for="{{ name }}"{% endif %}>
                            {{- label|raw|t('sprout-forms') -}}
                        </label>

                {%- endif -%}

            </div>
        {% endif -%}

        <div class="row">
            <div class="col-md-4">
                <input type="{{type}}" name="{{name}}" class="{{class}}" {%- if required %} required{% endif -%}>
            </div>
        </div>
        {% include "errors" with {
            errors: errors,
            name: name
        } %}

    {%- endif -%}
{%- endnamespace -%}

In the tab.html which calls uses the field.html:

{%- for tab in tabs -%}

    {%- set layoutFields = tab.getFields() %}

    <section class="tab">

    {% set fieldOptions = {  
        "class": "form-control",
        "errorClass": "has-error",
        "data": {
            "hidden": "false",
        }
    } %}

    {% for field in layoutFields -%}
        {{- craft.sproutForms.displayField(form, field, fieldOptions) }}
    {%- endfor %}

    </section>
{%- endfor -%}

This is all based on the default "accessible" template from the plugin. While I know I could put the fields manually in the template, I would prefer to learn how this is actually done "nicely". Thanks!

Answer 1

In Craft 3, you can do this by overriding the field inputs directly, and you shouldn't have to add any logic to the form, tab, or fields templates. We're still working on getting the docs updated to properly show this.

Custom Form Templates

To override field inputs in Sprout Forms, you can enable Form Overrides in your settings.

Sprout Forms->Settings->General->Default Form Templates->Custom

Here you can define an override folder in your front-end templates. Let's say you set your default templates to _forms. This means your override templates will exist in templates/_forms.

Once you have that in place, you can place a fields folder within that folder that contains a field override:

templates/_forms/fields/dropdown/input.html
templates/_forms/fields/email/input.html

You can do this for all the fields where you wish to modify the base input HTML.

A good place to start may be to copy the code for the specific field you wish to override from Sprout Forms itself:

https://github.com/barrelstrength/craft-sprout-forms/tree/v3/src/templates/_formtemplates/fields

---

Making Your Form Templates into a Plugin

If you like the templates you've created and wish to reuse them on more than one project, you can take what you've done above and wrap it in a plugin.

Creating a Form Template integration will display your Form Templates in the dropdown list of Templates to choose from. The template files themselves would then be managed in your plugin instead of in your project.

You can see an example of how to create an integration in Sprout Forms with the AccessibleTemplates Form Templates:

https://github.com/barrelstrength/craft-sprout-forms/blob/v3/src/integrations/sproutforms/formtemplates/AccessibleTemplates.php

The integration is really just a way to tell Sprout Forms where your form templates are and makes it easier for content editors to select in the Craft UI.