Basic LightImproved in 5.0+

The Basic Light 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. 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.

Preview

Video: Preview of Formatting Template Examples

Templates

/basic-light/

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

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

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

{# Render the opening form tag #}
{{ form.renderTag({
    attributes: {
        form: { class: "freeform-form", "data-freeform-basic-light": 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" },
            },
        },
    },
}) }}

{# 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-light/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).