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?