Comment Form Recipes
#A minimum guest form
1{{ meerkat:form }}
2 {{ if success }}
3 <p class="meerkat-success">Thanks! Your comment was submitted.</p>
4 {{ /if }}
5
6 {{ if errors }}
7 <ul class="meerkat-errors">
8 {{ errors }}
9 <li>{{ value }}</li>
10 {{ /errors }}
11 </ul>
12 {{ /if }}
13
14 <p>
15 <label>Name <input type="text" name="name" value="{{ old:name }}" required></label>
16 </p>
17 <p>
18 <label>Email <input type="email" name="email" value="{{ old:email }}" required></label>
19 </p>
20 <p>
21 <label>Comment
22 <textarea name="comment" required>{{ old:comment }}</textarea>
23 </label>
24 </p>
25
26 <input type="text" name="{{ honeypot }}" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px;">
27
28 <button type="submit">Post comment</button>
29{{ /meerkat:form }}
1<s-meerkat:form>
2 @if ($success)
3 <p class="meerkat-success">Thanks! Your comment was submitted.</p>
4 @endif
5
6 @if (count($errors))
7 <ul class="meerkat-errors">
8 @foreach ($errors as $error)
9 <li>{{ $error }}</li>
10 @endforeach
11 </ul>
12 @endif
13
14 <p>
15 <label>Name <input type="text" name="name" value="{{ $old['name'] ?? '' }}" required></label>
16 </p>
17 <p>
18 <label>Email <input type="email" name="email" value="{{ $old['email'] ?? '' }}" required></label>
19 </p>
20 <p>
21 <label>Comment
22 <textarea name="comment" required>{{ $old['comment'] ?? '' }}</textarea>
23 </label>
24 </p>
25
26 <input type="text" name="{{ $honeypot }}" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px;">
27
28 <button type="submit">Post comment</button>
29</s-meerkat:form>
{{ old:field }} restores submitted values, {{ errors }} lists validation errors, and {{ honeypot }} adds a basic spam trap.
For signed-in user forms, see Authenticated-Only Comments.
#Hide the form when comments are closed
Use {{ meerkat:comments_enabled }} to render the form only while the current thread accepts comments:
1{{ if {meerkat:comments_enabled} }}
2 {{ meerkat:form }}
3 ...
4 <button type="submit">Post comment</button>
5 {{ /meerkat:form }}
6{{ else }}
7 <p class="comments-closed">Comments are closed for this post.</p>
8{{ /if }}
1@php($enabled = Statamic::tag('meerkat:comments_enabled')->params(['thread' => $id])->fetch())
2@if ($enabled)
3 <s-meerkat:form>
4 ...
5 <button type="submit">Post comment</button>
6 </s-meerkat:form>
7@else
8 <p class="comments-closed">Comments are closed for this post.</p>
9@endif
#Submitting with fetch (AJAX)
Use {{ meerkat:form }} for the markup, then submit it with fetch:
1{{ meerkat:form }}
2 <input type="text" name="name" value="{{ old:name }}" required>
3 <input type="email" name="email" value="{{ old:email }}" required>
4 <textarea name="comment" required>{{ old:comment }}</textarea>
5 <button type="submit">Post</button>
6{{ /meerkat:form }}
1<s-meerkat:form>
2 <input type="text" name="name" value="{{ $old['name'] ?? '' }}" required>
3 <input type="email" name="email" value="{{ $old['email'] ?? '' }}" required>
4 <textarea name="comment" required>{{ $old['comment'] ?? '' }}</textarea>
5 <button type="submit">Post</button>
6</s-meerkat:form>
1document.querySelector('[data-meerkat-form="comment-form"]').addEventListener('submit', async (event) => {
2 event.preventDefault();
3 const form = event.currentTarget;
4
5 const response = await fetch(form.action, {
6 method: 'POST',
7 headers: {
8 'Accept': 'application/json',
9 'X-Requested-With': 'XMLHttpRequest',
10 },
11 body: new FormData(form),
12 });
13
14 const result = await response.json();
15
16 if (response.ok && result.comment_created) {
17 form.reset();
18 }
19});
Responses include success, comment_created, and comment_id. Show a success message only when comment_created is true; spam or security checks can reject a submission without exposing the reason.