{%- set demoArea = craft.app.request.segment(2) -%} {%- set pageTemplate = craft.app.request.segment(3)|default('basic-light') -%} {%- set pageTemplateFile = pageTemplate ~ '/index.twig' -%} {%- if demoArea == "templates" -%} {%- set formHandle = craft.app.request.segment(4) -%} {%- elseif demoArea in ["submissions", "custom"] -%} {%- set formHandle = craft.app.request.segment(3) -%} {%- set pageTemplateFile = null -%} {%- elseif demoArea == "extras" -%} {%- set formHandle = "" -%} {%- set pageTemplateFile = "basic-light/index.twig" -%} {%- elseif craft.app.request.segment(2) is empty -%} {%- set formHandle = "" -%} {%- set pageTemplate = "basic-dark" %} {%- endif -%} {%- if formHandle -%} {%- set form = freeform.form(formHandle, { formattingTemplate: pageTemplateFile, }) -%} {%- endif -%} {{ pageTitle ? "Freeform Demo | " ~ pageTitle : "Freeform Demo" }} {% if pageTemplate in ["basic-dark", "bootstrap-5-dark", "tailwind-3-dark", "tailwind-4-dark", "conversational"] %} {% set colorMode = "dark" %} {% else %} {% set colorMode = "light" %} {% endif %} {% if demoArea == "templates" and craft.app.request.segment(4) %} {% if pageTemplate in ["bootstrap-5", "bootstrap-5-dark", "bootstrap-5-floating-labels"] %} {% endif %} {% if pageTemplate == "foundation-6" %} {% endif %} {% if pageTemplate in ["tailwind-4-light", "tailwind-4-dark"] %} {% endif %} {% if pageTemplate in ["tailwind-3", "tailwind-3-dark"] %} {% endif %} {% endif %} {% block headerCss %}{% endblock %} {% macro pageTemplateItem(template, form) %} {% if template == "divider" %}

{% else %} {{ template|title|replace({'-':' '}) }} {% endif %} {% endmacro %} {% macro extrasItem(template, name) %} {% if template == "divider" %}

{% else %} {{ name }} {% endif %} {% endmacro %} {% set extrasTemplates = { 1: { "t": "current-user-data", "n": "Populate a form with Current User Data", "d": "This example shows you how to populate a form with some User account values from the currently logged in user.", }, 2: { "t": "craft-entry-data", "n": "Populate a form with Craft Entry Data", "d": "This example shows how to populate some of a form's fields with some data from a Craft Entry.", }, 3: { "t": "date-pickers", "n": "Adjustments to a Date Field Date/Time Picker", "d": "This example shows some ways to manipulate a Date & Time field type using Freeform's developer events.", }, 4: { "t": "suppress-edit-submissions", "n": "Suppress Notifications when Editing Submissions", "d": "This example shows how to suppress email notifications and other integrations from being triggered when editing an existing submission.", }, 5: { "t": "js-override", "n": "Overriding Freeform JS behavior", "d": "This example shows how to manually override Freeform's built-in JS behavior inside a template.", }, 6: { "t": "submission-limit", "n": "Setting Submission Limits", "d": "This example shows how to set a limit for the number of submissions a form can have.", }, 7: { "t": "submission-duplicate", "n": "Checking Submission Duplicates", "d": "This example shows how to check if the user has already submitted the form when using the Limit Form Submission Rate setting.", }, 8: { "t": "twig-cache", "n": "Twig Template Caching on Forms", "d": "This example will show how to refresh the CSRF token and other parts of Freeform when using Twig Caching on a template that contains a form.", }, 9: { "t": "formatting-inside-template", "n": "Formatting Directly Inside Regular Template", "d": "This example shows how you can add formatting code directly inside a regular template.", }, 10: { "t": "manual-form", "n": "Manual Rendering of Forms", "d": "This example shows how to manually template a basic form.", }, 11: { "t": "manual-multipage", "n": "Manual Multi-Page Forms", "d": "This example shows how to manually template multi-page forms.", }, 12: { "t": "multiple-forms", "n": "Multiple Forms in the Same Page", "d": "This example shows how you might have the same form (or 2 similar ones) more than once in the same template.", }, 13: { "t": "parsley", "n": "Form Validation with Parsley", "d": "This example will show you how to implement form validation for your Freeform forms with Parsley JS.", }, 14: { "t": "relating-submission", "n": "Relating Submissions to Elements", "d": "This example will relate the newly created submission to another element via the Freeform Submission relation element field type.", }, 15: { "t": "form-field-type", "n": "Freeform Form Element Field Type", "d": "This example will show how to display and adjust forms that are assigned to Craft Entries via the Freeform Form element field type.", }, 16: { "t": "ajax-div-success", "n": "Alternate Success Markup from Div after AJAX Submit", "d": "This example shows how to override the default AJAX success message and load a success message from a `div` instead.", }, 17: { "t": "ajax-template-success", "n": "Alternate Success from Template after AJAX Submit", "d": "This example shows how to override the default AJAX success message and load a success message from another template instead.", }, 18: { "t": "override-return-url", "n": "Overiding Success Return URL", "d": "This example shows how to manipulate a form to allow a user to override the Return URL for successful submits.", }, 19: { "t": "success-same-page", "n": "Returning Success to Same Page", "d": "This example shows how to have a successful submit return to the same page with a success query in the URL.", } } %}

Freeform Demo

{% if demoArea == "templates" or craft.app.request.segment(2) is empty %} This section {{ craft.app.request.segment(4) ? "has" : "will" }} automatically {{ craft.app.request.segment(4) ? "loaded" : "load" }} the formatting template for the form. {% elseif demoArea == "submissions" %} {{ craft.app.request.segment(3) ? "Viewing" : "View" }} submissions for the form. {% elseif demoArea == "custom" %} This section {{ craft.app.request.segment(3) ? "has" : "will" }} automatically {% if craft.app.request.segment(3) %}loaded the {{ form.settings.formattingTemplate }}{% else %}load the{% endif %} formatting template for the form. Consider forcing a instead. {% elseif demoArea == "extras" %} Try another extras demo: {% else %} {% endif %}

{% block content %}{% endblock %}

{% block footerJs %}{% endblock %} {% if demoArea == "extras" %} {% endif %}