wc-bootstrap/templates/layouts/form.html.twig

{#
 # Form Layout (Bootstrap 5 Override)
 #
 # Layout for registration and editing forms.
 # Uses a centered card layout with consistent Bootstrap 5 styling.
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% extends "wc-base.html.twig" %}

{% block content %}
    <div class="row justify-content-center">
        <div class="col-lg-8 col-xl-7">
            {% block form_header %}
                <header class="text-center mb-4">
                    <h1 class="mb-2">{{ page_title|esc_html }}</h1>

                    {% block form_description %}
                        {% if form_description is defined %}
                            <p class="lead text-body-secondary">{{ form_description|wp_kses_post }}</p>
                        {% endif %}
                    {% endblock %}
                </header>
            {% endblock %}

            {% block form_content %}
                <div class="card shadow-sm">
                    <div class="card-body p-4">
                        <form method="post" action="{{ form_action|default('') }}" enctype="multipart/form-data" novalidate>
                            {{ wp_nonce_field(nonce_action|default('form_nonce'), nonce_name|default('_wpnonce')) }}

                            {% if form_type is defined %}
                                <input type="hidden" name="form_type" value="{{ form_type|esc_attr }}">
                            {% endif %}

                            {% if post_id is defined %}
                                <input type="hidden" name="post_id" value="{{ post_id }}">
                            {% endif %}

                            {% block form_errors %}
                                {% if errors is defined and errors|length > 0 %}
                                    <div class="alert alert-danger" role="alert">
                                        <h2 class="alert-heading h6">{{ __('Please correct the following errors:') }}</h2>
                                        <ul class="mb-0">
                                            {% for error in errors %}
                                                <li>{{ error|esc_html }}</li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% endif %}
                            {% endblock %}

                            {% block form_fields %}{% endblock %}

                            {% block form_actions %}
                                <div class="d-grid gap-2 mt-4">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        {{ submit_label|default(__('Submit')) }}
                                    </button>

                                    {% if cancel_url is defined %}
                                        <a href="{{ cancel_url|esc_url }}" class="btn btn-outline-secondary btn-lg">
                                            {{ __('Cancel') }}
                                        </a>
                                    {% endif %}
                                </div>
                            {% endblock %}
                        </form>
                    </div>

                    {% block form_footer %}{% endblock %}
                </div>
            {% endblock %}

            {% block form_sidebar %}{% endblock %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ parent() }}
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function(e) {
                var submitBtn = form.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>' + submitBtn.textContent;
                }
            });
        }
    });
    </script>
{% endblock %}