dev.metalisp.sbt/docs/pattern/survey-examples/behavioral-survey.html

110 lines
No EOL
3.9 KiB
HTML

<!DOCTYPE html>
<html lang=en data-bs-theme=dark>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Product Experience Survey</title>
<link rel=stylesheet type=text/css
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
</head>
<body>
<h1 class=visually-hidden>Product Experience Survey</h1>
<main class=container>
<form class=py-5 action=/submit method=post>
<fieldset>
<legend>How often do you use our software?</legend>
<ol>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-useage"
for=group-beh-useage-daily>
<input class=form-check-input type=radio name=group-beh-useage
value=daily id=group-beh-useage-daily> Daily</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-useage"
for=group-beh-useage-weekly>
<input class=form-check-input type=radio name=group-beh-useage
value=weekly id=group-beh-useage-weekly> Weekly</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-useage"
for=group-beh-useage-monthly>
<input class=form-check-input type=radio name=group-beh-useage
value=monthly id=group-beh-useage-monthly> Monthly</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-useage"
for=group-beh-useage-lessfrequently>
<input class=form-check-input type=radio name=group-beh-useage
value=less-frequently id=group-beh-useage-lessfrequently> Less frequently</label>
</div>
</ol>
<hr class=my-4>
</fieldset>
<fieldset>
<legend>What features do you use the most?</legend>
<ol>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-feature"
for=group-beh-feature-bookmarks>
<input class=form-check-input type=checkbox name=group-beh-feature
value=bookmarks id=group-beh-feature-bookmarks> Bookmarks</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-feature"
for=group-beh-feature-kpi>
<input class=form-check-input type=checkbox name=group-beh-feature
value=kpi id=group-beh-feature-kpi> KPI</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-feature"
for=group-beh-feature-contacts>
<input class=form-check-input type=checkbox name=group-beh-feature
value=contacts id=group-beh-feature-contacts> Contacts</label>
</div>
</ol>
<hr class=my-4>
</fieldset>
<fieldset>
<legend>Have you used our software for along period of time?</legend>
<ol>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-longuse"
for=group-beh-longuse-yes>
<input class=form-check-input type=radio name=group-beh-longuse
value=yes id=group-beh-longuse-yes> Yes</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-beh-longuse"
for=group-beh-longuse-no>
<input class=form-check-input type=radio name=group-beh-longuse
value=no id=group-beh-longuse-no> No</label>
</div>
</ol>
<hr class=my-4>
</fieldset>
<button class="btn btn-primary" type=submit>Submit</button>
</form>
</main>
<script
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
</body>
</html>