{% extends "demo/_layout" %} {% set pageTitle = "Formatting Directly Inside Regular Template | Extras" %} {# Replace 'freeformInsideTemplate' with your form handle #} {% set demoFormHandle = "freeformInsideTemplate" %} {% block content %} {% set form = craft.freeform.form(demoFormHandle, { formattingTemplate: pageTemplateFile }) %}

Formatting Directly Inside Regular Template

This example shows how you can add formatting code directly inside a regular template.

{% if form %}
{{ form.renderTag }}
{% if not form.ajaxEnabled and form.submittedSuccessfully %}

{{ form.successMessage | t('freeform') }}

{% endif %} {% if form.hasErrors %}

{{ form.errorMessage | t('freeform') }}

{% if form.errors|length %}
    {% for error in form.errors %}
  • {{ error }}
    • {% endfor %}
{% endif %}
{% endif %}
{% if form.pages|length > 1 %} {% endif %} {% for row in form %}
{% for field in row %} {% set width = (12 / (row|length)) %} {% set columnClass = "freeform-col-" ~ width %} {% set columnClass = columnClass ~ form.customAttributes.columnClass %} {% if field.type == "submit" or field.type == "save" %} {% set columnClass = columnClass ~ " freeform-column-content-align-" ~ field.position %} {% endif %}
{% if field.type in ["checkbox", "mailing_list"] %} {{ field.renderInput({ class: "freeform-input" ~ (field.hasErrors ? " is-invalid") }) -}} {{- field.renderLabel({ labelClass: "freeform-label" ~ (field.inputOnly ? " freeform-input-only-label" : "") ~ (field.required ? " freeform-required" : "") }) }} {{ field.renderInstructions({ instructionsClass: "freeform-instructions" }) }} {{ field.renderErrors({ errorClass: "freeform-errors" }) }} {% else %} {{ field.render({ class: field.type not in ["submit", "save", "signature"] ? "freeform-input" : "", labelClass: "freeform-label" ~ (field.inputOnly ? " freeform-input-only-label" : "") ~ (field.required ? " freeform-required" : ""), errorClass: "freeform-errors", instructionsClass: "freeform-instructions", }) }} {# FOR FREEFORM PAYMENTS #} {% if field.layoutRows is defined %} {% for layoutRow in field.layoutRows %}
{% for layoutField in layoutRow %} {% set layoutWidth = (12 / (layoutRow|length)) %} {% set paymentColumnClass = "freeform-col-" ~ layoutWidth %}
{{ layoutField.render({ class: "freeform-input", labelClass: "freeform-label" ~ (layoutField.inputOnly ? " freeform-input-only-label" : "") ~ (layoutField.required ? " freeform-required" : ""), errorClass: "freeform-errors", instructionsClass: "freeform-instructions", }) }}
{% endfor %}
{% endfor %} {% endif %} {% endif %}
{% endfor %}
{% endfor %} {{ form.renderClosingTag }}
{% else %}

You must rename your form handle to {{ demoFormHandle }} for this part of the demo to work.

{% endif %} {# Instructions to get this page working correctly #}

This page will not display correctly until...

In order to view this page live, you'll need to make some adjustments to this template or your test form:

  1. Rename your test form handle to {{ demoFormHandle }} or adjust the form handle name inside this template to match your test form.

{% endblock %}