Wrong custom template loaded when using back button

[stefexitable]

What happened?

I’m using a customized Bootstrap 5 template, which loads fine on initial page load. But when I go to a new form page, and then go back to the first form page, another incorrect template is used.

Correct template

Incorrect template

Errors and Stack Trace (if available)

No response

How can we reproduce this?

1. Create form two pages
2. Open the second page
3. Go back to the first page

Freeform Edition

Pro

Freeform Version

5.8.0

Craft Version

4.13.1.1

When did this issue start?

No response

Previous Freeform Version

No response

[kjmartens]

Hi @stefexitable,

Can you share a few things so I can help troubleshoot? 🙂

1. What does your template code look like (where you're calling the Freeform form)?
2. Can you attach or paste what your formatting template code looks like?
3. Can you also confirm which formatting template you have assigned the form inside the form builder? For example, if the form you wish for it to have assigned to it is my-custom-template, then that should also be assigned to it inside the form builder (I'm curious if there are any discrepancies between that and setting the formatting template at the template level).

Thanks!

[stefexitable]

Hi @kjmartens , sure!

1. What does your template code look like (where you're calling the Freeform form)?

I copied the templates from packages/plugin/src/templates/_templates/formatting/bootstrap-5 to my own template folder located at _base/freeform. I also updated the paths. From the page where I want to load a form I do something like this:

{% set form = freeform.form(formHandle) %}
{% include "_base/freeform/_templates/formatting/bootstrap-5/index.twig" %}

2. Can you attach or paste what your formatting template code looks like?

It’s copied from packages/plugin/src/templates/_templates/formatting/bootstrap-5 without modifications, and only the paths have been updated.

3. Can you also confirm which formatting template you have assigned [..]

I disabled the ”Formatting Template” option since I don’t want my end users to change templates. The default setting is set to "Basis dark". When I set it to "Bootstrap 5", and recreate my form (if I don’t recreate it, it looks like the default settings aren’t inherited) the form does look right after switching form pages! Although probably the default Bootstrap 5 form is loaded, and not my custom one. I might have missed the option to programmatically set the "Formatting Template" to my custom template.

Thanks for your help!

[kjmartens]

Thanks for the additional information, @stefexitable.

However, for the first item, I was hoping to see the template code where you call the form (where {{ freeform.form("myFormHandle").render() }} is) just in case you're doing something there that is causing this issue. 🙂

As for the third point, this could be an important piece of the puzzle. In the Form Builder settings, can you check and see if you have your desired default formatting template specified in the General -> Formatting Template setting?
https://yoursite.test/admin/freeform/settings/form-builder

If you've locked it, can you temporarily unlock it and update all of the existing forms to use the correct formatting template, resave, and then re-lock this setting and see if that makes any difference? 🙂

[stefexitable]

Hope this helps @kjmartens 🙂

My template where I’d like to show the form:

{% set form = freeform.form(formHandle) %}
{% include "_base/freeform/_templates/formatting/bootstrap-5/index.twig" %}

_base/freeform/_templates/formatting/bootstrap-5/index.twig:

{% import "_base/freeform/_templates/formatting/bootstrap-5/_row.twig" as rowMacro %}

{# Render the opening form tag #}
{{ form.renderTag({
    attributes: {
        form: { class: "freeform-form", "data-freeform-bootstrap": true },
        row: { class: "row" },
        success: { class: "alert alert-success" },
        errors: { class: "alert alert-danger" },
        novalidate: true,
    },
    buttons: {
        attributes: {
            submit: { class: "btn btn-primary" },
            back: { class: "btn btn-secondary" },
            save: { class: "btn btn-primary" },
        },
    },
    fields: {
        "@global": {
            attributes: {
                container: { class: "mb-3 col-12" },
                input: {
                    class: "form-control",
                },
                label: { class: "mb-1" },
                instructions: { class: "form-text text-muted mt-n1 mb-1" },
                error: { class: "list-unstyled m-0 fst-italic text-danger" },
            },
        },
        ":required": {
            attributes: {
                label: { "+class": "required" },
            },
        },
        ":errors": {
            attributes: {
                input: { "+class": "is-invalid" },
            },
        },
        "@group": {
            attributes: {
                label: { "+class": "group-label" },
            },
        },
        "@checkbox" : {
            attributes: {
                input: { "=class": "form-check-input checkbox" },
                label: { "+class": "form-check-label" },
            },
        },
        "@dropdown" : {
            attributes: {
                input: { "+class": "form-select" },
            },
        },
        "@file" : {
            attributes: {
                input: { "+class": "form-control-file" }
            },
        },
        "@signature": {
            attributes: {
                input: {
                    "-class": "form-control",
                    "+class": "btn btn-light"
                },
            },
        },
        "@stripe": {
            attributes: {
                input: {
                    "-class": "form-control",
                },
            },
        },
    },
}) }}

{# 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 class="mb-0">
                    {% 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="nav nav-tabs mb-4">
        {% for page in form.pages %}
            <li class="nav-item">
                <span class="nav-link{{ form.currentPage.index == page.index ? ' fw-bold active' : ' disabled' }}">
                    {{ page.label }}
                </span>
            </li>
        {% endfor %}
    </ul>
{% endif %}

{# Display form field rows and columns #}
{{ rowMacro.render(form.rows, form) }}

{# Render the closing form tag #}
{{ form.renderClosingTag }}

The Form Builder settings:

By switching to “Bootstrap 5” my issue is partly resolved since the form fields then get the Bootstrap classes, although my custom template is still not loaded. In the end I'm planning to customize the template to my needs.

[stefexitable]

My apologies, I totally missed the option to set the "Directory Path" in the template manager. After setting it to my custom path, the issue is resolved.

Thanks for your help @kjmartens!