Formatting Template Examples
Freeform includes a large number of example formatting templates to choose from. You can use these as a starting point and adjust them to suit your needs, or simply create your own from scratch. The following formatting templates are located in the /vendor/solspace/craft-freeform/packages/plugin/src/templates/_defaultFormTemplates/ directory. If you wish to create your own modified version, just copy the code below, or the template file (e.g. bootstrap-5.twig) and paste it into your Formatting Templates directory in the specified Craft Templates directory (e.g. /templates/freeform/), and rename it to whatever you like.
User Guide:
Quick troubleshooting the most commonly reported issues with your form's appearance, behavior, or submission of the form on the front end.
Video: Preview of Formatting Template Examples
Framework Agnostic
Plug-and-play neatly styled basic formatting templates that don't require any frameworks or toolkits, etc.
- Basic Light
- Basic Dark
- Basic Floating Labels
- Displays labels in the center of the inputs and shrinks them to the top-right when clicked and/or contains a value.
- Conversational
- Displays 1 field at a time, and smoothly scroll down to the next question until complete. It behaves similarly to how Typeform displays forms, and is also a great choice for survey forms.
Barebones
Barebones starter templates that require additional CSS to complete the styling.
Popular Frameworks
Formatting templates that are set up to automatically work well with popular frameworks.
Basic
Advanced
- Bootstrap 5 Dark Mode
- Set up as a dark theme for Bootstrap 5.
- Bootstrap 5 Floating Labels
- Set up to use the floating labels feature in Bootstrap 5.
- Bootstrap 5 Multipage All Fields
- Displays ALL fields for a multipage form for the purpose of reviewing/previewing fields on other pages.