Submission Form

The {{ meerkat:form }} tag renders the submission form for the current thread.

#Minimum example

 1{{ meerkat:form }}
 2    {{ if success }}
 3        <p>Thanks! Your comment was submitted.</p>
 4    {{ /if }}
 5
 6    {{ if errors }}
 7        <ul>
 8            {{ errors }}
 9                <li>{{ value }}</li>
10            {{ /errors }}
11        </ul>
12    {{ /if }}
13
14    {{ fields }}
15        <div>
16            <label>{{ display }}</label>
17            {{ field }}
18        </div>
19    {{ /fields }}
20
21    <button type="submit">Submit</button>
22{{ /meerkat:form }}

 1<s-meerkat:form>
 2    @if ($success)
 3        <p>Thanks! Your comment was submitted.</p>
 4    @endif
 5
 6    @if (count($errors))
 7        <ul>
 8            @foreach ($errors as $error)
 9                <li>{{ $error }}</li>
10            @endforeach
11        </ul>
12    @endif
13
14    @foreach ($fields as $field)
15        <div>
16            <label>{{ $field['display'] }}</label>
17            {!! $field['field'] !!}
18        </div>
19    @endforeach
20
21    <button type="submit">Submit</button>
22</s-meerkat:form>

#Parameters

Additional key="value" parameters become HTML attributes on the form element. For example, class="my-form" novalidate becomes part of the element.

#Inside the tag

These variables are available in the loop:

• {{ fields }}: list of form fields that can be rendered.
  • {{ display }}: the field's display label
  • {{ field }}: the rendered HTML input (Statamic field type)
  • {{ handle }}: the field's handle
  • {{ value }}: the field's submitted value or configured default
  • {{ old }}: the previously submitted value after validation fails
  • {{ error }}: the field's first validation error
• {{ sections }}: blueprint sections, each with a fields collection.
• {{ honeypot }}: configured honeypot field name.
• {{ errors }}: flat list of error messages, plus a {{ error.fieldname }} map for per-field access.
• {{ success }}: translated success message after submission.

#Building the form yourself

Antlers templates should use the paired {{ meerkat:form }} tag. In Blade or PHP, call fetch() when you need to build the <form> element yourself.

 1@php
 2    $form = Statamic::tag('meerkat:form')
 3        ->param('from_thread', $id)
 4        ->fetch();
 5@endphp
 6
 7<form {{ new \Illuminate\View\ComponentAttributeBag($form['attrs']) }}>
 8    @foreach ($form['params'] as $name => $value)
 9        <input type="hidden" name="{{ $name }}" value="{{ $value }}">
10    @endforeach
11
12    <input type="hidden" name="meerkat_jump" value="comment:id">
13
14    @if ($form['success'])
15        <p>{{ $form['success'] }}</p>
16    @endif
17
18    @if ($form['errors'])
19        <ul>
20            @foreach ($form['errors'] as $error)
21                <li>{{ $error }}</li>
22            @endforeach
23        </ul>
24    @endif
25
26    @foreach ($form['fields'] as $field)
27        <div>
28            <label for="{{ $field['id'] }}">{{ $field['display'] }}</label>
29            {!! $field['field'] !!}
30
31            @if ($field['error'])
32                <p>{{ $field['error'] }}</p>
33            @endif
34        </div>
35    @endforeach
36
37    @if ($form['honeypot'])
38        <input
39            type="text"
40            name="{{ $form['honeypot'] }}"
41            tabindex="-1"
42            autocomplete="off"
43            style="position: absolute; left: -9999px;"
44        >
45    @endif
46
47    <button type="submit">Submit comment</button>
48</form>

Keep every value in attrs and params. They contain the submission URL, CSRF token, and signed thread context. The optional meerkat_jump input controls the redirect fragment after submission.

#Honeypot

Render a hidden field with the honeypot name:

1{{ meerkat:form }}
2    ...
3    <input type="text" name="{{ honeypot }}" tabindex="-1" autocomplete="off"
4           style="position:absolute;left:-9999px;">
5{{ /meerkat:form }}

1<s-meerkat:form>
2    ...
3    <input type="text" name="{{ $honeypot }}" tabindex="-1" autocomplete="off"
4           style="position:absolute;left:-9999px;">
5</s-meerkat:form>

The default honeypot name is username. Configure it with config('meerkat.form.honeypot').

#Replies

Replies submit their parent comment ID through the ids field. See Reply Forms for server-rendered and inline patterns.

#Authenticated users

Meerkat uses the authenticated user's name and email instead of submitted identity values. See Authenticated-Only Comments for form examples and permissions.