84 lines
2.6 KiB
Markdown
84 lines
2.6 KiB
Markdown
# Comment Form (aka: never gather Metadata)
|
|
Add a form, which allows your visitors to easily write comments.
|
|
|
|
But more importantly, on submit the form generates a mailto-link.
|
|
The resulting email contains a valid markdown block. Now you only have to copy this block in a new file. And therefore there is no need to gather the metadata (like date, author, replyto) yourself.
|
|
|
|
#### Reply button
|
|
Add this in the "comment for loop" in your article theme, so your visitors can reply to a comment.
|
|
|
|
```html
|
|
<button onclick="reply('{{comment.id | urlencode}}');">Reply</button>
|
|
```
|
|
|
|
#### Form
|
|
A basic form so your visitors can write comments.
|
|
|
|
```html
|
|
<form role="form" id="commentForm" action="#">
|
|
<input name="Name" type="text" id="commentForm_inputName" placeholder="Enter your name or synonym">
|
|
<textarea name="Text" id="commentForm_inputText" rows="10" style="resize:vertical;" placeholder="Your comment"></textarea>
|
|
<button type="submit" id="commentForm_button">Post via email</button>
|
|
<input name="replyto" type="hidden" id="commentForm_replyto">
|
|
</form>
|
|
```
|
|
You may want to add a button to reset the `replyto` field.
|
|
|
|
#### Javascript
|
|
To generate the mailto-Link and set the `replyto` field there is some javascript required.
|
|
|
|
```javascript
|
|
<script type="text/javascript">
|
|
function reply(id)
|
|
{
|
|
id = decodeURIComponent(id);
|
|
$('#commentForm_replyto').val(id);
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
function generateMailToLink()
|
|
{
|
|
var user = 'your_user_name'; //user@domain = your email address
|
|
var domain = 'your_email_provider';
|
|
var subject = 'Comment for \'{{ article.slug }}\'' ;
|
|
|
|
var d = new Date();
|
|
var body = ''
|
|
+ 'Hey,\nI posted a new comment on ' + document.URL + '\n\nGreetings ' + $("#commentForm_inputName").val() + '\n\n\n'
|
|
+ 'Raw comment data:\n'
|
|
+ '----------------------------------------\n'
|
|
+ 'date: ' + d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + '\n'
|
|
+ 'author: ' + $("#commentForm_inputName").val() + '\n';
|
|
|
|
var replyto = $('#commentForm_replyto').val();
|
|
if (replyto.length != 0)
|
|
{
|
|
body += 'replyto: ' + replyto + '\n'
|
|
}
|
|
|
|
body += '\n'
|
|
+ $("#commentForm_inputText").val() + '\n'
|
|
+ '----------------------------------------\n';
|
|
|
|
var link = 'mailto:' + user + '@' + domain + '?subject='
|
|
+ encodeURIComponent(subject)
|
|
+ "&body="
|
|
+ encodeURIComponent(body);
|
|
return link;
|
|
}
|
|
|
|
|
|
$('#commentForm').on("submit",
|
|
function( event )
|
|
{
|
|
event.preventDefault();
|
|
$(location).attr('href', generateMailToLink());
|
|
}
|
|
);
|
|
});
|
|
</script>
|
|
```
|
|
(jQuery is required for this script)
|
|
|
|
Don't forget to set the Variables `user` and `domain`.
|