<p>The HTML of the <code>input</code> fields are managed by the Custom Field, not within Sprout Forms, so Sprout Forms does not have easy access to that code to give you control over it. There are a few input types where we have to make assumptions about the HTML and the checkboxes field is one of them.</p>

<p>We're looking into ways to give better control here. Right now, the best option if you want an upgrade-safe way to modify that HTML would be to create a [Custom Front-end Field integration](<a href="https://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/custom-front-end-fields" rel="nofollow noreferrer">https://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/custom-front-end-fields</a>
) for the fields you wish to update the <code>input</code>. </p>

<p>Using this approach, you would create a separate plugin and add front-end support for whatever fields you need to modify the <code>input</code> HTML for and your new field would display in the field dropdown when creating a form. As a starting point, you could copy just about everything from the Sprout Forms checkboxes integration which is located in <code>sproutforms/integrations/sproutforms/fields/SproutFormsCheckboxesField.php</code>. Aside from wrapping the Custom Front-end Field in a new plugin, the main things you will need to change is the name of the field so you can identify it in your dropdown and the <code>input</code> HTML in the front-end field template file.</p>

CC BY-SA 3.0
2017-01-25T16:59:52.627Z
"The HTML of the input fields are managed by the Custom Field, not within Sprout Forms" — I'm not sure I understand. I'm looking at templates/_components/checkbox/input.html in the sproutforms plugins. That's what I need to override. It would be great if the plugin could look in my overrides folder before looking at the plugin folder.
Charlie Triplett
CC BY-SA 3.0
2017-01-25T04:48:56.757Z
2017-01-25T04:48:56.757Z
Ben Parizek
<p>I want to restructure the output of the way Sprout Forms generates checkboxes and radio buttons from that of the input.html in templates/_components. I need the label to appear <em>after</em> the radio/checkbox input for styling/accessibility purposes.</p>

<p>But I'm not seeing the documentation to override  without editing the plugin (obviously not a sustainable plan). Can I just put them in the designated <em>Global custom form templates folder</em> and have SproutForms look for form_overrides/radiobutton/input.html first?</p>

<p><strong>Example of what I need to do:</strong></p>

<pre><code>&lt;input type="radio"
  {%- if id %} id="{{ id }}-{{ loop.index }}"{% endif %}
  {%- if name %} name="{{ name }}"{% endif %}
  {%- if value %} value="{{ value }}"{% endif %}
  {%- if checked is defined and checked %} checked{% endif %}
  {{- required -}}
  {{- dataAttributes|raw -}}
&gt;
    &lt;label {%- if id %} for="{{ id }}-{{ loop.index }}"{% endif %}&gt;
        {%- if label is defined %}{{ label|raw }}{% endif -%}
    &lt;/label&gt;
</code></pre>

<plugin-sproutforms>
Global override specific field templates in Sprout Forms Plugin
# Global override specific field templates in Sprout Forms Plugin

(Asked by: username_0 on 2017-01-25)

I want to restructure the output of the way Sprout Forms generates checkboxes and radio buttons from that of the input.html in templates/_components. I need the label to appear after the radio/checkbox input for styling/accessibility purposes.
But I'm not seeing the documentation to override  without editing the plugin (obviously not a sustainable plan). Can I just put them in the designated Global custom form templates folder and have SproutForms look for form_overrides/radiobutton/input.html first?
Example of what I need to do:

    
        {%- if label is defined %}{{ label|raw }}{% endif -%}

**Tags:** plugin-sproutforms


---

## 1 answers

### Answer by username_1 on 2017-01-25. Score: 1 | Accepted answer

The HTML of the `input` fields are managed by the Custom Field, not within Sprout Forms, so Sprout Forms does not have easy access to that code to give you control over it. There are a few input types where we have to make assumptions about the HTML and the checkboxes field is one of them.

We're looking into ways to give better control here. Right now, the best option if you want an upgrade-safe way to modify that HTML would be to create a [Custom Front-end Field integration](<https://sprout.barrelstrengthdesign.com/craft-plugins/forms/docs/customization/custom-front-end-fields>
) for the fields you wish to update the `input`.

Using this approach, you would create a separate plugin and add front-end support for whatever fields you need to modify the `input` HTML for and your new field would display in the field dropdown when creating a form. As a starting point, you could copy just about everything from the Sprout Forms checkboxes integration which is located in `sproutforms/integrations/sproutforms/fields/SproutFormsCheckboxesField.php`. Aside from wrapping the Custom Front-end Field in a new plugin, the main things you will need to change is the name of the field so you can identify it in your dropdown and the `input` HTML in the front-end field template file.

> **Comments:**
> **username_0**: "The HTML of the input fields are managed by the Custom Field, not within Sprout Forms" — I'm not sure I understand. I'm looking at templates/_components/checkbox/input.html in the sproutforms plugins. That's what I need to override. It would be great if the plugin could look in my overrides folder before looking at the plugin folder.  

---

