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.
Last Updated: 2/17/2023, 3:30:22 PM