netlify-docs-feedback-form-remix

// This is an include file for my Jekyll site. You'll see curly braces where I send _config variables to send event data to Google Analytics (see line 53)  

<hr>
<div class="grid-container col-2">
    <div class="feedback">
        <h3>Did you find this note useful?</h3>
        <p>Your feedback helps me improve these notes.</p>
    </div>
    <div class="thumbs">
        <button onclick="upvote()" aria-label="upvote" id="upvote">👍</button>
        <button onclick="downvote()" aria-label="downvote" id="downvote">👎</button>
    </div>
</div>

<form method="POST" action="" class="feedback-message" id="form-feedback" name="form-feedback" style="display: none;">
    <input id="feedback" name="feedback" type="text" placeholder="What did you like about this doc?" required>
    <input id="vote" name="vote" type="text" style="display: none;">
    <input id="page_path" name="page_path" type="text" style="display: none;">
    <input id="last_name" name="last_name" type="hidden" style="display: none;" autocomplete="off">
    <input type="submit" value="Submit" class="btn btn-primary">
</form>

<h3 id="thank-you" class="form-bg" style="display: none;">🎉 I appreciate your feedback!</h3>

<hr>

<script>
    function upvote() {
        var form_feedback = document.getElementById('form-feedback');
        form_feedback.style.display = "block";
        document.getElementById('feedback').setAttribute("placeholder","What did you like about this note?");
        document.getElementById("vote").value = "upvote";
    }
    function downvote() {
        var form_feedback = document.getElementById('form-feedback');
        form_feedback.style.display = "block";
        document.getElementById('feedback').setAttribute("placeholder","What can I improve in this note?");
        document.getElementById("vote").value = "downvote";
    }

    const scriptURL = '[ENTER_YOUR_GOOGLE_APP_SCRIPT_URL_HERE]';
    const form = document.forms['form-feedback'];
    
    var vote = document.getElementById('vote');
    vote.value = document.getElementById('vote').value;

    var page_path = document.getElementById('page_path');
    page_path.value = window.location.pathname;

    form.addEventListener('submit', e => {
      document.getElementById('thank-you').style.display = "block";
      document.getElementById('form-feedback').style.display = "none";
      ga('create', '{{ site.ua_id }}', 'auto');
      ga('send', {
        hitType: 'event',
         eventCategory: 'Feedback',
         eventAction: 'Submission',
         eventLabel: vote.value
      });
      e.preventDefault();
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => console.log('Success!', response))
        .catch(error => console.error('Error!', error.message))
    });
</script>