Plug-and-playImproved in 5.0+
Freeform includes sample formatting templates that are designed to be plug-and-play and not require any additional frameworks or CSS/JS added to the site or project. These templates are ready to go and require no extra styling unless you want to customize it. You can include the CSS and JavaScript in the template or add them to your site's files. While the templates may not work for all sites out of the box, they provide a solid starting point for building your own.
The following are available:
Previews
Basic Light
The Basic Light template is a simple, pre-styled formatting template that works without any frameworks or toolkits.
Basic Dark
The Basic Dark template is a simple, pre-styled formatting template that works without any frameworks or toolkits.
Basic Floating Labels
The Basic Floating Labels template is a simple, pre-styled formatting template that works without any frameworks or toolkits. It displays labels in the center of the inputs and shrinks them to the top-left when clicked and/or contains a value.
Conversational
The Conversational template is a simple, pre-styled formatting template that works without any frameworks or toolkits. It will display one field at a time, and smoothly scroll down to the next question until complete, similarly to how Typeform displays forms. This is a great choice for survey forms.
Please note that this formatting template example has some expectations and limitations:
- You should typically only place 1 field per row. Multiple fields in the same row will otherwise appear stacked on the same page (which may be okay in some cases).
- Groups, Credit Card/Payments, and Save & Continue Later fields/buttons currently are not accounted for in this example. They can of course be added if you put in the work to support it.
- Multipage forms are not recommended to be used with this formatting template example.
Multipage All Fields
The Multipage All Fields template is a simple, pre-styled formatting template that works without any frameworks or toolkits.
If you'd like to display ALL fields for a multipage form for the purpose of reviewing/previewing fields on other pages, it is
possible by additionally iterating over {% for page in form.pages %} and then {% for row in page %} instead of
{% for row in form %}.
Customization Guide
You can easily customize any sample formatting template by using it as a starting point and adjusting it to fit your needs. For step-by-step instructions, check out the Custom Formatting Template guide.
View Complete Guide