Tailor form fields: hidden: true rendered

Known Issues
#1

In new component for form submissions, there is probably problem with rendering for fields, when there is no type: hidden but it is just hidden: true … on frontend it may render input type hidden, right? but renders all

not working any of these


   competition:
        type: text
        label: Súťaž
        defaultFrom: this.page.title
        hiden: true
        hidden: true
        readOnly: true
        attributes:
            hidden: true

Update

When i checked component for submissioncomponent, there are multiple problems.

  1. properties from yaml are not sent to field
{
    "name":"competition",
    "label":"S\u00fa\u0165a\u017e",
    "type":"text",
    "htmlType":"text",
    "options":[],
    "required":false,
    "placeholder":"",
    "comment":"",
    "multiple":false
}

As you can see, there are missing hidden: … or any kind of settings from yaml, for example ‘hidden’, ‘readonly’ nor attributes are pushed into field …

wrong part is probably this config in cms\behaviors\FormComponent

            $fields[] = [
                'name' => $name,
                'label' => __($field['label'] ?? $name),
                'type' => $type,
                'htmlType' => $htmlType,
                'options' => $field['options'] ?? [],
                'required' => $isRequired,
                'placeholder' => __($field['placeholder'] ?? ''),
                'comment' => __($field['comment'] ?? ''),
                'multiple' => $htmlType === 'file' && (int) ($field['maxFiles'] ?? 0) !== 1,
            ];
  1. template for rendering has no check for existence of ‘hidden’ then when hidden is set, is ignored as well…

    {% if formSubmitted %}
        <div class="alert alert-success">
            {{ formSuccessMessage|default('Thank you for your submission!') }}
        </div>
    {% else %}
        {% for field in fields %}
            {% if field.htmlType == 'textarea' %}
....

there is no check for {% if field.hidden != true %} that will ‘skip’ whole rendering.

  1. trying to solve, where is defined formSuccessMessage because, always fallbacks to default …
    Tried to use {% component 'submission' formSuccessMessage=... %} not really affecting result, always shows default message. lookup inside whole codebase, there is no configuration for component that will fill-up this variable, or anything…
#2

Hi @snipi

Thanks for the detailed report, you were right on all three points. The fix will be in v4.4.14.

hidden: true

The submission form now handles hidden: true the same way backend forms do. The field isn’t rendered, and any value posted for it is ignored. That includes multi-step (wizard) submissions.

type: hidden

This now renders a real <input type="hidden">, with no label, holding the field’s default value:

competition:
    label: Competition
    type: hidden
    default: Summer Draw

Setting the value from the page title

defaultFrom won’t work for this. In backend forms it copies the value of another field, so it can’t read this.page.title. You have two options.

If the value matters (for example, which competition an entry belongs to), set it on the server so visitors can’t change it. Use hidden: true on the field and set the value in a plugin’s boot() method:

Event::listen('cms.form.beforeSubmit', function ($component, $model) {
    if ($component instanceof \Tailor\Components\SubmissionComponent) {
        $model->competition = $component->getController()->getPage()->title;
    }
});

If it doesn’t matter that visitors could edit it, use type: hidden, override the component partial, and output the value yourself:

<input type="hidden" name="competition" value="{{ this.page.title }}">

formSuccessMessage

Nothing ever set that variable, which is why you always got the fallback text. It has been removed. The success message and the submit button text are now translatable strings: Thank you for your submission! and Submit. You can translate them in your theme’s language file, for example lang/sk.json. If you need different wording or markup, override the partial by copying it to partials/submission/default.htm in your theme.

Let me know if you spot anything else that needs attention.

1 Like