Bootstrap 5 with Floating LabelsImproved in 5.0+
This example makes use of Bootstrap's Floating Labels feature. The following example assumes you're including necessary Bootstrap 5 JS and CSS. You can place the additional CSS and JS inside the formatting template or add to your site's CSS / JS files.
Preview
Video: Preview of Formatting Template Examples
Templates
/bootstrap-5-floating-labels/
{# CSS overrides #}
{% set cssPath = view.assetManager.publishedUrl('@freeform-formatting-templates/bootstrap-5-floating-labels/_main.css', true) %}
{% do view.registerCssFile(cssPath) %}
{# JS overrides #}
{% set jsPath = view.assetManager.publishedUrl('@freeform-formatting-templates/bootstrap-5-floating-labels/_main.js', true) %}
{% do view.registerJsFile(jsPath) %}
{% import "freeform/_templates/formatting/bootstrap-5-floating-labels/_row.twig" as rowMacro %}
{# Render the opening form tag #}
{{ form.renderTag({
attributes: {
form: { class: "freeform-form", "data-freeform-bootstrap-floating-labels": true },
row: { class: "row" },
success: { class: "alert alert-success" },
errors: { class: "alert alert-danger" },
novalidate: true,
},
buttons: {
attributes: {
submit: { class: "btn btn-primary" },
back: { class: "btn btn-secondary" },
save: { class: "btn btn-primary" },
},
},
fields: {
"@global": {
attributes: {
container: { class: "mb-3 col-12" },
input: {
class: "form-control"
},
label: { class: "mb-1" },
instructions: { class: "form-text text-muted mt-1" },
error: { class: "list-unstyled m-0 fst-italic text-danger" },
},
},
":required": {
attributes: {
label: { "+class": "required" },
},
},
":errors": {
attributes: {
input: { "+class": "is-invalid" },
},
},
"@text, @textarea, @email, @website, @confirm, @regex, @phone, @datetime, @dropdown, @multiple-select, @number, @password, @file-dnd, @signature": {
attributes: {
container: { "+class": "form-floating" },
},
},
"@group": {
attributes: {
label: { "+class": "group-label" },
},
},
"@checkbox" : {
attributes: {
input: { "=class": "form-check-input checkbox" },
label: { "+class": "form-check-label" },
},
},
"@dropdown" : {
attributes: {
input: { "+class": "form-select" },
},
},
"@file" : {
attributes: {
input: { "+class": "form-control-file" },
},
},
"@signature": {
attributes: {
input: {
"-class": "form-control",
"+class": "btn btn-light"
},
},
},
"@stripe": {
attributes: {
input: {
"-class": "form-control",
},
},
},
},
}) }}
{# Success and error message handling for non-AJAX forms #}
{% if not form.settings.ajax %}
{% if form.submittedSuccessfully %}
<div{{ form.attributes.success|raw }}>
<p>{{ form.settings.successMessage | t('freeform') }}</p>
</div>
{% endif %}
{% if form.hasErrors %}
<div{{ form.attributes.errors|raw }}>
<p>{{ form.settings.errorMessage | t('freeform') }}</p>
{% if form.errors|length %}
<ul class="mb-0">
{% for error in form.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endif %}
{% endif %}
{# Render page tabs if multi-page #}
{% if form.pages|length > 1 %}
<ul class="nav nav-tabs mb-4">
{% for page in form.pages %}
<li class="nav-item">
<span class="nav-link{{ form.currentPage.index == page.index ? ' fw-bold active' : ' disabled' }}">
{{ page.label }}
</span>
</li>
{% endfor %}
</ul>
{% endif %}
{# Display form field rows and columns #}
{{ rowMacro.render(form.rows, form) }}
{# Render the closing form tag #}
{{ form.renderClosingTag }}
/bootstrap-5-floating-labels/fields/
{{ field.render }}
CDN Links
The following CDN links for Bootstrap 5 are for v5.3.1, which may no longer be the latest version. Please see official Bootstrap 5 documentation for latest versions and CDN links.
<!-- Latest compiled and minified CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
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).