Controlling What Happens After a User Submits a Comment

Front End
Version 1.5.0+
4 min read

You are viewing the documentation for Meerkat version 1 for Statamic 2. The latest version is Meerkat 2 for Statamic 3.

Read v2 docs

When a user submits a comment on your website without AJAX, the default behavior is to have the user redirected back to the page that the comment was left on. Due to the way that most browsers implement these redirects, the user will again be presented with the top of the page, and not where they left their comment. Starting with version 1.5.0, you can now specify a region of the page to jump back to after a user has submitted a comment.

As an example, if you wanted to return the user to the comments form, simply add a named anchor above that section of the page like so:

<a name="comments"></a>

Now, within the Meerkat form, you can add a hidden input field named meerkat_jump and specify that the user should be jumped to some element using the to directive in the input's value:

<input type="hidden" name="meerkat_jump" value="to:#comments" />

Now, after the user submits a comment, the value #comments will be appended to the redirect URL. If a matching named anchor exists, the browser will automatically scroll the page to the anchor's location.

A complete example might look like this:

<a name="comments"></a>

{{ meerkat:create }}
<input type="hidden" name="meerkat_jump" value="to:#comments" />

<input type="text" placeholder="Name" id="name" name="name" value="{{ old:name }}" />
<input type="text" placeholder="Email" id="email" name="email" value="{{ old:email }}" />

<textarea placeholder="Comment" id="comment" name="comment">{{ old:comment }}</textarea>

<button type="submit">Submit your comment</button>

{{ /meerkat:create }}

Jumping to a Specific Comment

Depending on your comment feed template was implemented, it is possible that you have a named anchor for each comment that is displayed on your site. If you would like the page to automatically scroll to the user's new comment, you can use the comment:id value instead of the to directive:

<input type="hidden" name="meerkat_jump" value="comment:id" />

Now, once the user submits their comment and is redirected, if a named anchor exists matching the new comment's ID, the page will automatically scroll to their new content. If there was an error when submitting the comment, the element might not yet exist on the page (the name/ID format Meerkat expects to see is comment-<ID>), the user's browser will not scroll and they will be left at the top of the page.

Luckily, you can specify a fallback to use if there were any issues submitting a comment.

Jumping to a Specific Comment With Fallback

You can specify a fallback named anchor to jump to if there was an error submitting and storing the comment. This is accomplished by separating the fallback selector from the comment's ID selector by using the pipe | character like so:

<input type="hidden" name="meerkat_jump" value="comment:id|#comments" />

In the previous example, if the comment was left successfully, something like #comment-232132 would be appended to end of the URL redirect. If there was a failure, the URL redirect would have #comments appended to it instead.