A newer version of

Freeform

is available.

Try Freeform 5 now →

Formatting Templates

# 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.

# 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.

• Grid
• Flexbox

# Popular Frameworks

Formatting templates that are set up to automatically work well with popular frameworks.

# Basic

• Bootstrap 5
• Bootstrap 4
• Bootstrap 3
• Foundation 6
• Tailwind 3
• Materialize

# 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.

# Live Demo

The demo below is a live demo site that shows most of what the Demo Templates include (some sections and data has been limited).