Craft 2 - Adding custom CSS classes to Sprout Form fields on a global basis

Question

I'm reading the docs for the Sprout Form plugin and looking at how I can custom classes to the actual form elements i.e. <input>, <select> etc. I can see that there is the rendering options route, but I was hoping to achieve this on a global basis, rather than having to reference individual field handles due to multiple forms. I can add some custom classes through the custom template method, but it still doesn't give you full access to the actual form elements themselves.

I have form styling already, but it relies on CSS classes on the relative form elements, I can add CSS rules that also target the Sprout Forms HTML but I'd rather keep the class stuff consistent.

Would I need to write my own plugin for this? I've looked at the API and while it shows how to hook into the various field types. All seem to require using $renderingOptions. It looks like I could achieve this if I was outputting each field with displayField() manually, but I'm attempting to make this as user friendly as possible and trying to keep it in templates.

Because its Craft 2, I don't believe I can individually override any of the field types with my templates/_sproutforms/ folder, though in Craft 3 this does appear possible.

If I was just to write my own plugin that hooked into the various fields such as SproutFormsPlainTextField and added my own CSS class(es), would this be the best way? Testing this out, I modified the SproutFormsPlainTextField.php within the integrations folder at sproutforms\integrations\sproutforms\fields and added my own array for the class and it does work, but I'd imagine I'd need to do this as my own plugin, rather than modifying sproutforms directly. What's the best way to achieve this?

<?php
namespace Craft;

/**
 * Class SproutFormsPlainTextField
 *
 * @package Craft
 */
class SproutFormsPlainTextField extends SproutFormsBaseField
{
    /**
     * @return string
     */
    public function getType()
    {
        return 'PlainText';
    }

    /**
     * @param FieldModel $field
     * @param mixed      $value
     * @param array      $settings
     * @param array      $renderingOptions
     *
     * @return \Twig_Markup
     */
    public function getInputHtml($field, $value, $settings, array $renderingOptions = null)
    {
        // My own CSS classes required for CSS styling
        $renderingOptions = array(
            'class' => 'input text'
        );

        $this->beginRendering();

        $rendered = craft()->templates->render(
            'plaintext/input',
            array(
                'name'             => $field->handle,
                'value'            => $value,
                'field'            => $field,
                'settings'         => $settings,
                'renderingOptions' => $renderingOptions
            )
        );

        $this->endRendering();

        return TemplateHelper::getRaw($rendered);
    }

    /**
     * @return string
     */
    public function getTemplatesPath()
    {
        return craft()->path->getPluginsPath() . 'sproutforms/templates/_components/fields/';
    }
}

Would this be the best way?

Answer 1

You are correct. This is quite easy now in Sprout Forms for Craft 3 but is more of a challenge in Craft 2 because we can't easily give you access to the input html.

Your options in Craft 2 include:

1. Use Sprout Forms to override the field wrapper in the field.html file and then update your CSS to target input fields within the parent tag (i.e. div.my-class input instead of input.my-class. This will be the most maintainable option.

2. Target each individual field you wish to add a custom class to using rendering options. As you mentioned, the limitation here is that it's not very maintainable for multiple forms.

3. While I can't recommend it, if you are planning to upgrade to Craft 3 and choose to hack the core while you remain on Craft 2, the easiest place to do so may be right in the template files (instead of in the PHP classes). You can find the Sprout Forms input field template files in sproutforms/templates/_components/fields/*. You would need to update each individual template file with the classes you want. This option would be maintainable with the caveat that you'd need to remember that each time you update Sprout Forms you may overwrite your changes. If you go this route, it's probably best to manage your project in a git repository so you can recover any changes you might overwrite during an update.

4. If you did want to do this as your own plugin, you would not be able to modify the existing fields. You would need to create a new custom field to replace each existing custom field, and you would see both your custom fields and the default custom fields in the dropdown. This is maintainable in a general sense, but creates a lot of overhead for creating the duplicate fields with slightly different classes and will make the user interface feel like it has twice as many fields in the UI.

5. I expect you've considered this option, but updating to Craft 3 will have many benefits on top of greater control in Sprout Forms.