Basic Floating LabelsImproved in 5.0+

The Basic Floating Labels template is intended to be a neatly styled basic formatting template that is plug-and-play and doesn't require any frameworks or toolkits, etc. It displays labels in the center of the inputs and shrinks them to the top-right when clicked and/or contains a value. This formatting template is ready-to-go on "light" pages and does not require any additional styling unless you wish to do so. You can place the CSS and JS inside the formatting template or add to your site's CSS / JS files.

Video: Preview of Formatting Template Examples

/basic-floating-labels/

{# CSS overrides #}
{% set cssPath = view.assetManager.publishedUrl('@freeform-formatting-templates/basic-floating-labels/_main.css', true) %}
{% do view.registerCssFile(cssPath) %}

{# JS overrides #}
{% set jsPath = view.assetManager.publishedUrl('@freeform-formatting-templates/basic-floating-labels/_main.js', true) %}
{% do view.registerJsFile(jsPath) %}

{% import "freeform/_templates/formatting/basic-floating-labels/_row.twig" as rowMacro %}

{# Render the opening form tag #}
{{ form.renderTag({
    attributes: {
        form: { class: "freeform-form", "data-freeform-basic-floating-labels": true },
        row: { class: "freeform-row" },
        success: { class: "freeform-form-success" },
        errors: { class: "freeform-form-errors" },
        novalidate: true,
    },
    fields: {
        "@global": {
            attributes: {
                input: {
                    class: "freeform-input",
                },
                label: { class: "freeform-label" },
                instructions: { class: "freeform-instructions" },
                error: { class: "freeform-errors" },
            }
        },
        ":required": {
            attributes: {
                label: { "+class": "freeform-required" },
            }
        },
        ":errors": {
            attributes: {
                input: { "+class": "is-invalid has-validation" },
            },
        },
        "@group": {
            attributes: {
                label: { "+class": "group-label" },
            }
        },
        "@signature": {
            attributes: {
                input: { "-class": "freeform-input" },
            },
        },
        "@text, @textarea, @email, @website, @confirm, @regex, @phone, @datetime, @file, @dropdown, @multiple-select, @number, @password, @file-dnd, @signature": {
            attributes: {
                container: { "+class": "floating" },
            },
        },
    },
}) }}

{# 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>
                    {% 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="freeform-pages">
        {% for page in form.pages %}
            <li {% if form.currentPage.index == page.index %}class="active"{% endif %}>
                {% if form.currentPage.index == page.index %}
                    <b>{{ page.label }}</b>
                {% else %}
                    {{ page.label }}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endif %}

{# Display form field rows and columns #}
{{ rowMacro.render(form.rows, form) }}

{# Render the closing form tag #}
{{ form.renderClosingTag }}

/basic-floating-labels/fields/

{{ field.render }}

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