Template Overrides

Sprout Forms gives you 100% control over your form output using the Template Overrides. If you wish to reuse your Template Overrides on multiple projects, you can create Custom Form Templates.

# Customizing Templates

Once you have enabled Template Overrides, you can override one or all of the following template files:

File Notes
form.html
tab.html
field.html Also requires tab.html and errors.html
errors.html
fields/* See Customizing Fields below.

Your edits could be as small as adding a custom id to the <form> tag or reworking the entire HTML structure to work nicely with Foundation, Bootstrap, or your favorite front-end framework.

TIP

Enabling template overrides gives you full control over the underlying template code. If something stops working as expected, test your form using the default Form Templates to help determine if you may have unintentionally bumped something.

# Customizing Fields

All input fields can be overridden by placing an override template in the fields folder:

singleline/input.html
paragraph/input.html
phone/input.html

A field's folder name is the lowercase version of its field name without spaces and can be retrieved dynamically by calling field.getFieldInputFolder().

# Customizing Email

For customizing email notifications, see Email Templates.

# Getting Started

To get started, copy all of the default Sprout Forms templates to your Custom Template Overrides folder. You can find the templates in Sprout Forms here:

vendor/barrelstrength/sprout-forms/src/templates/_components/formtemplates/accessible

# Settings

# Global settings

Setup a Global Form Template override in the Sprout Forms settings and add the path to the template folder where you wish to place your overrides:

Sprout Forms → Settings → Default Form Templates → Add Custom

If you wish to customize Form Templates on a per-form basis, enable the setting:

Enable custom form templates on a per-form basis

TIP

Setting the Custom Template Folder value to _forms would allow you to place your override templates in the craft/templates/_forms folder.

# Per-form settings

When you Enable custom form templates on a per-form basis, you'll have to add the override folder in your form settings.

When creating a new form, in the Form Settings sidebar, select the Form Template or add the Form Template folder you wish to use for your overrides.