<p>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.</p>

<h3>Custom Form Templates</h3>

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

<blockquote>
  <p>Sprout Forms->Settings->General->Default Form Templates->Custom</p>
</blockquote>

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

<p>Once you have that in place, you can place a <code>fields</code> folder within that folder that contains a field override:</p>

<pre><code>templates/_forms/fields/dropdown/input.html
templates/_forms/fields/email/input.html
</code></pre>

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

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

<p><a href="https://github.com/barrelstrength/craft-sprout-forms/tree/v3/src/templates/_formtemplates/fields" rel="nofollow noreferrer">https://github.com/barrelstrength/craft-sprout-forms/tree/v3/src/templates/_formtemplates/fields</a></p>

<hr>

<h3>Making Your Form Templates into a Plugin</h3>

<p>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. </p>

<p>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.</p>

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

<p><a href="https://github.com/barrelstrength/craft-sprout-forms/blob/v3/src/integrations/sproutforms/formtemplates/AccessibleTemplates.php" rel="nofollow noreferrer">https://github.com/barrelstrength/craft-sprout-forms/blob/v3/src/integrations/sproutforms/formtemplates/AccessibleTemplates.php</a></p>

<p>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.</p>

CC BY-SA 4.0
2018-05-15T19:53:16.017Z
2018-05-15T20:01:39.677Z
2018-05-15T20:01:39.677Z
Ben Parizek
<p>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.</p>

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

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

<pre><code>{%- 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 -%}
            &lt;div class="heading"&gt;
                {% if label -%}

                        &lt;label{% if name %} for="{{ name }}"{% endif %}&gt;
                            {{- label|raw|t('sprout-forms') -}}
                        &lt;/label&gt;

                {%- endif -%}

            &lt;/div&gt;
        {% endif -%}

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

    {%- endif -%}
{%- endnamespace -%}
</code></pre>

<p>In the tab.html which calls uses the field.html:</p>

<pre><code>{%- for tab in tabs -%}

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

    &lt;section class="tab"&gt;

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

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

    &lt;/section&gt;
{%- endfor -%}
</code></pre>

<p>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!</p>

<templating><craft3><plugin-sproutforms>
Craft 3 / Sprout Forms Bootstrap field classes
# Craft 3 / Sprout Forms Bootstrap field classes

(Asked by: username_0 on 2018-05-15)

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 -%}
            
                {% if label -%}

                        
                            {{- label|raw|t('sprout-forms') -}}
                        

                {%- endif -%}

            
        {% endif -%}

        
            
                
            
        
        {% 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() %}

    

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

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

    
{%- 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!

**Tags:** templating, craft3, plugin-sproutforms


---

## 1 answers

### Answer by username_1 on 2018-05-15. Score: 2 | Accepted answer

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.


---

