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||Craft 3||Craft 2||Notes|
|field.html||✓||✓||Also requires tab.html and errors.html|
|email.html||✗||✓||Override using Email Templates in Craft 3|
|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.
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 in Craft 3 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 inputs in Craft 2 are managed via each individual field and only overridable at the field level. This makes it a bit harder to support some override behavior by default. If you need to override an input field in Craft 2, consider:
- Updating your CSS to target the field wrapper instead of the input field:
- Targeting the specific fields you need to update via
- Creating a
Custom Form Field
# 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:
# 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:
If you wish to customize Form Templates on a per-form basis, enable the setting:
Enable custom form templates on a per-form basis
Setting the Custom Template Folder value to
_forms would allow you to place your override templates in the
# 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.