Rendering Options

Rendering options allow you to customize form and field output without having to override the templates. Rendering options can be passed as a twig object to the displayForm, displayTab or displayField tags.

{% set options = {     "id": "my-form" } %}  {{ craft.sproutForms.displayForm("formHandle", options) }} 

Rendering Options may be handy to solve a specific situation, however, can become harder to maintain or reuse across multiple forms.

Note

For 100% control over your Form Templates, see Template Overrides.

Options

Sprout Forms supports the following rendering options.

Form tag options

The following options will modify the <form> tag.

Option	Type	Default	Description
id	string	formHandle-form	The id to assign to the form tag
class	string	formHandle-form	A space-separated list of classes to apply to the form tag
errorClass	string	errors	A space separated list of classes to apply to the form tag when errors are found

Field wrapper and input tag options

The following options will modify the <input> field and the wrapper <div> and related tags that surround each <input> field. (See the displayField() example below.)

Option	Type	Default	Description
id	string	fieldHandle-field	The id to assign to the input tag
class	string	fieldHandle-field	A space separated list of classes to apply to the input tag
errorClass	string	errors	A space separated list of classes to apply to theinput tag when errors are found
data	{}		An object (associative array) of data attributes to set on the form or input tag

Custom Fields

Custom Form Fields will need to add support for these options on their own. If you are using Rendering Options with a custom Form Field and they are not behaving as expected, you may need to reach out to the respective plugin developer.

Examples

Overriding values via the displayForm tag

The displayForm() accepts rendering options for the form tag and input fields. To provide rendering options for your fields, you must create a fields object and use the field handle to identify the fields that the containing rendering options should be applied to.

{% set options = {     "id": "myform",     "class": "form-class form-class-customized",     "errorClass": "form-has-error",     "fields": {         "fieldHandle": {             "id": "myfield",             "class": "my-fancy-class",             "errorClass": "field-has-error",             "data": {                 "hidden": "false",             }         }     } } %}  {{ craft.sproutForms.displayForm("formHandle", options) }} 

Rendered HTML

<form method="post" id="myform" class="form-class form-class-customized form-has-error">      {# The example assumes our field is a Single Line field #}     <div id="fields-myfield-field" class="field singleline field my-fancy-class required field-has-error">         <div class="heading">             <label for="fields-fieldHandle">Field Name</label>         </div>         <div class="input">             <input type="text" name="fields[fieldHandle]" id="fields-myfield" class="my-fancy-class" required data-hidden="false" />         </div>     </div>  </form> 

Field Prefixes

The ID you specific will be prefixed with field-. This prefix is added by the {% namespace %} tag in the Form Templates field.twig file and also adds the fields namespace around the fieldHandle on the Form Field input tags (i.e. name="fields[fieldHandle]").