3

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:

<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 -}}
>
    <label {%- if id %} for="{{ id }}-{{ loop.index }}"{% endif %}>
        {%- if label is defined %}{{ label|raw }}{% endif -%}
    </label>
1

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.

  • 1
    "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 Jan 25 '17 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.