{% extends "demo/_layout" %}

{% set pageTitle = "Returning Success to Same Page | Extras" %}

{# Replace 'freeformSuccessSamePage' with your form handle #}
{% set demoFormHandle = "freeformSuccessSamePage" %}

{% block content %}

    {% set form = freeform.form(demoFormHandle, { formattingTemplate: pageTemplateFile }) %}

    <div class="freeform-page-heading">
        <h2>Returning Success to Same Page</h2>
        <p>The following example shows how to have a successful submit return to the same page with a success query in the URL. There are other ways to do this, including using AJAX.</p>
    </div>

    {% if form and form.settings.ajax is empty %}
    
        {# Detect the query in the URI and display success message #}
        {% if craft.app.request.getQueryParam('success') == 1 %}
            <div class="freeform-success{{ colorMode == "dark" ? " freeform-notice-dark" }}">
                <h4>Thank you!</h4>
                <p>Your submission was successful!</p>
            </div>
        {% endif %}

        {{ form.render({
            returnUrl: "demo/extras/success-same-page/?success=1",
        }) }}

    {% else %}

        <div class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            <p>You must rename your form handle to <code>{{ demoFormHandle }}</code> and disable the <b>Enable AJAX</b> checkbox in the form builder for this part of the demo to work.</p>
        </div>

    {% endif %}

    {# Instructions to get this page working correctly #}
    <div class="extras-instructions">
        <h4>This page will not display correctly until...</h4>
        <p>
            In order to view this page live, you'll need to make some adjustments to this template or on your test from:
            <ol>
                <li>Rename your test form handle to <code>{{ demoFormHandle }}</code> or adjust the form handle name inside this template to match your test form.</li>
                <li>Be sure to disable the <b>Enable AJAX</b> setting inside the form builder for this form.</li>
            </ol>
        </p>
    </div>

{% endblock %}