Skip to content

Commit

Permalink
🎉 Add custom config support to Feedback Widget [WIP] #14
Browse files Browse the repository at this point in the history
  • Loading branch information
@colinwilson
colinwilson committed Aug 14, 2023
1 parent d85c131 commit 7925381
Showing 1 changed file with 34 additions and 80 deletions.
114 changes: 34 additions & 80 deletions layouts/partials/docs/footer/feedback.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,89 +21,43 @@
</div>

<div id="feedback-form-pos" data-type="positive" class="feedback-form justify-content-md-start justify-content-sm-center">
<p class="fw-bold fs-5">What did you like?</p>
<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="accurate" id="accurate">
<label class="form-check-label" for="accurate">
Accurate
<p class="feedback-radio-desc fw-normal mb-0">Accurately describes the option or feature.</p>
</label>
</div>
<div id="accurateTextContainer" class="feedback-textarea-container"></div>

<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="solved" id="solved">
<label class="form-check-label" for="solved">
Solved my problem
<p class="feedback-radio-desc fw-normal mb-0">Helped me resolve an issue.</p>
</label>
</div>
<div id="solvedTextContainer" class="feedback-textarea-container"></div>

<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="easy" id="easy">
<label class="form-check-label" for="easy">
Easy to understand
<p class="feedback-radio-desc fw-normal mb-0">Easy to follow and comprehend.</p>
</label>
</div>
<div id="easyTextContainer" class="feedback-textarea-container"></div>
<p class="fw-bold fs-5">{{ .Site.Params.feedback.positiveFormTitle | default "What did you like?" }}</p>

{{ range $index, $value := .Site.Params.feedback.positiveForm }}
{{ $rating := (index (.) 0) }}
{{ $description := (index (.) 1) }}
<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="{{ $rating | lower }}" id="radio{{ $index }}">
<label class="form-check-label" for="radio{{ $index }}">
{{ $rating }}
{{ if $description }}
<p class="feedback-radio-desc fw-normal mb-0">{{ $description }}</p>
{{ end }}
</label>
</div>
<div id="radio{{ $index }}TextContainer" class="feedback-textarea-container"></div>
{{ end }}

<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="other" id="otherPos">
<label class="form-check-label" for="otherPos">
Something else
</label>
</div>
<div id="otherPosTextContainer" class="feedback-textarea-container"></div>
</div>

<div id="feedback-form-neg" data-type="negative" class="feedback-form justify-content-sm-center">
<p class="fw-bold fs-5">What went wrong?</p>

<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="inaccurate" id="inaccurate">
<label class="form-check-label" for="inaccurate">
Inaccurate
<p class="feedback-radio-desc fw-normal mb-0">Doesn't accurately describe the product or feature.</p>
</label>
</div>
<div id="inaccurateTextContainer" class="feedback-textarea-container"></div>
<p class="fw-bold fs-5">{{ .Site.Params.feedback.negativeFormTitle | default "What went wrong?" }}</p>

{{ range $index, $value := .Site.Params.feedback.negativeForm }}
{{ $rating := (index (.) 0) }}
{{ $description := (index (.) 1) }}
<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="{{ $rating | lower }}" id="radio{{ $index }}">
<label class="form-check-label" for="radio{{ $index }}">
{{ $rating }}
{{ if $description }}
<p class="feedback-radio-desc fw-normal mb-0">{{ $description }}</p>
{{ end }}
</label>
</div>
<div id="radio{{ $index }}TextContainer" class="feedback-textarea-container"></div>
{{ end }}

<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="missing" id="missing">
<label class="form-check-label" for="missing">
Couldn't find what I was looking for
<p class="feedback-radio-desc fw-normal mb-0">Missing important information.</p>
</label>
</div>
<div id="missingTextContainer" class="feedback-textarea-container"></div>

<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="hard" id="hard">
<label class="form-check-label" for="hard">
Hard to understand
<p class="feedback-radio-desc fw-normal mb-0">Too complicated or unclear.</p>
</label>
</div>
<div id="hardTextContainer" class="feedback-textarea-container"></div>

<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="errors" id="errors">
<label class="form-check-label" for="errors">
Code sample errors
<p class="feedback-radio-desc fw-normal mb-0">One or more code samples are incorrect.</p>
</label>
</div>
<div id="errorsTextContainer" class="feedback-textarea-container"></div>

<div class="form-check pb-1">
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="other" id="otherNeg">
<label class="form-check-label" for="otherNeg">
Something else
</label>
</div>
<div id="otherNegTextContainer" class="feedback-textarea-container"></div>
</div>

<div id="feedback-submit-container">
Expand Down Expand Up @@ -183,7 +137,7 @@
}
try {
if (formType == "positive") {
plausible('Positive Feedback',
plausible('{{ .Site.Params.feedback.positiveEventName | default "Positive Feedback" }}',
{
callback: success,
props:
Expand All @@ -194,7 +148,7 @@
}
)
} else if (formType == "negative") {
plausible('Negative Feedback',
plausible('{{ .Site.Params.feedback.negativeEventName | default "Negative Feedback" }}',
{
callback: success,
props:
Expand Down

0 comments on commit 7925381

Please sign in to comment.