Formatting Template Examples
Freeform includes several 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 (ex: foundation-6.twig) and paste it into your Formatting Templates directory in the specified Craft Templates directory (ex: /templates/freeform/), and rename it to whatever you like.
Basic
- Grid
- Starter template using the CSS Grid Layout.
- Flexbox
- Starter template using the CSS Flexbox Layout.
Frameworks
- Bootstrap 5
- A formatting template that is set up to automatically work well with Bootstrap 5.
- Bootstrap 4
- A formatting template that is set up to automatically work well with Bootstrap 4.
- Bootstrap 3
- A formatting template that is set up to automatically work well with Bootstrap 3.
- Foundation 6
- A formatting template that is set up to automatically work well with Foundation 6.
- Tailwind 3
- A formatting template that is set up to automatically work well with Tailwind CSS 3.
- Materialize
- A formatting template that is set up to automatically work well with Materialize.
Advanced
- Dark Mode (Bootstrap 5)
- A formatting template that is set up as a dark theme for Bootstrap 5.
- Floating Labels (Bootstrap 5)
- A formatting template that is set up to use the floating labels feature in Bootstrap 5.
- Conversational (no framework)
- A formatting template that 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.
- Multipage All Fields (Bootstrap 5)
- A formatting template that displays ALL fields for a multipage form for the purpose of reviewing/previewing fields on other pages.