comment-new.html

<h3>Respond to this</h3>
<form action="/fake" method="post" id="commentform" class="form-horizontal">
  <fieldset id="commentfields">
    <input name="redirect" type="hidden" value="{{ site.url }}/thanks">
    <input name="post_id" type="hidden" value="{{ slug }}">
    <input name="comment-site" type="hidden" value="{{ site.url }}">
    <textarea name="message" id="message" placeholder="Continue the discussion."></textarea>

    <label for="name">Name/alias <span>(Required, displayed)</span></label>
    <input type="text" name="name" id="name" placeholder="Name" />

    <label for="email">Email <span>(Required, not shown)</span></label>
    <input type="text" name="email" id="email" placeholder="myemail@somedomain.com" />

    <label for="url">Website <span>(Optional, displayed)</span></label>
    <input type="text" name="url" id="url" placeholder="https://mywebsite.com" />

    <button onclick="setupForm()" type="button" class="btn btn-primary" id="commentbutton">Leave response</button>
  </fieldset>
</form>
<script>
    function setupForm() {
      var status = document.getElementById('commentstatus')
      status.innerText = ''

      var requiredIds = [ 'message', 'email', 'name']
      var missing = requiredIds.filter(id => document.getElementById(id).value.length < 3)
      if (missing.length > 0) {
        status.innerText = 'Some required fields are missing - (' + missing.join(', ') + ')'
        return
      }

      var button = document.getElementById('commentbutton')
      if (button.innerText != 'Confirm comment') {
        button.innerText = 'Confirm comment'
        return
      }

      var form = document.getElementById('commentform')
      form.action = '{{ site.comments.receiver }}'
      button.innerText = 'Posting...'
      button.disabled = true
      form.submit()
      var fields = document.getElementById('commentfields')                                         
      fields.disabled = true
    }
  </script>
<div id="commentstatus" style="clear:both" class="status"></div>