Commits: 1
Refine market research page
index b9fb806..a251b55 100644
--- a/content/market-research/_index.md
+++ b/content/market-research/_index.md
@@ -2,9 +2,9 @@
=title: Tad Market Research
=---
=
-Hi! We are Tad and Fana, two IT professionals from Hilversum, the Netherlands. We want to start a new business. In order to understand the demand, we are conducting this market research. If you are in a position to fill this form, it would help us immensely.
+Hi 👋 We are Tad and Fana, two IT professionals from Hilversum, the Netherlands. We want to help businesses and organizations get more control over their digital tools and data.
=
-Thank you :-)
+In order to understand the demand, we are conducting this market research. If you are in a position to do so, please fill this form. Thank you :-)
=
=# Data Sovereignty Market Research
=index adcafca..7aadfe2 100644
--- a/content/market-research/form.html
+++ b/content/market-research/form.html
@@ -1,20 +1,4 @@
=<style type="text/css">
- /* form {
-
- --range-border-color: linear-gradient(
- 90deg,
- okcl,
- rgba(87, 199, 133, 1) 50%,
- rgba(237, 221, 83, 1) 100%
- );
- }
-
- [type="range"] {
- &::-moz-range-track, &::-webkit-slider-runnable-track {
- background: var(--range-border-color);
- }
- } */
-
= label:has(input:not([type="checkbox"]):not([type="radio"])[required]),
= label:has(textarea[required]),
= .required {
@@ -42,39 +26,50 @@
= color: var(--muted-color);
= }
= }
+
+ [data-fold-container] {
+ [data-fold-target] {
+ height: 0;
+ overflow: hidden;
+ }
+
+ &:has([data-fold-toggle]:checked) [data-fold-target] {
+ height: unset;
+ }
+ }
+
+ label[role="button"]:has(input[type="radio"]) {
+ display: block;
+
+ @media (min-width: 992px) {
+ display: inline-block;
+ }
+
+ &:has(input:not(:checked)) {
+ background: none;
+ color: var(--primary);
+ }
+
+ input[type="radio"] {
+ display: none;
+ }
+ }
=</style>
=
=
=<form method="POST" action="https://use.formtomail.eu/submit/tad-market-research">
=
- <label for="organization-name">
- What is the name of your business / organization?
- <input type="text" name="organization-name" id="organization-name" value="" required />
- </label>
-
- <div class="grid">
- <label for="respondent-name">
- What is your name?
- <input type="text" name="respondent-name" id="respondent-name" value="" required />
- </label>
-
- <label for="respondent-role">
- What is your role?
- <input type="text" name="respondent-role" id="respondent-role" value="" />
- </label>
- </div>
+ <fieldset data-fold-container>
+ <legend class="required">
+ Are you worried about the reliance of your organization on the big technology providers from USA?
+ </legend>
=
- <label for="big-tech-concern">
- Are you worried about the reliance of your organization on the big technology providers from USA?
- <div class="grid">
- <small>Not at all</small>
- <small style="text-align: center">Somewhat</small>
- <small style="text-align: end">A lot</small>
- </div>
- <input type="range" name="big-tech-concern" id="big-tech-concern" min=0 max=100 value=50 required />
- </label>
+ <label role="button" ><input type="radio" name="big-tech-concern" value="Not at all" required data-fold-toggle/>Not at all</label>
+ <label role="button" ><input type="radio" name="big-tech-concern" value="Somewhat worried" required data-fold-toggle/>I'm somewhat worried</label>
+ <label role="button" ><input type="radio" name="big-tech-concern" value="I worry about it a lot" required data-fold-toggle/>I worry about it a lot</label>
+ </fieldset>
=
- <fieldset>
+ <fieldset data-fold-container>
= <legend class="optional">What are your main concerns?</legend>
=
= <div class="grid">
@@ -101,21 +96,26 @@
= <label><input type="checkbox" name="main-concerns" value="Customer support" />Customer support</label>
= <label><input type="checkbox" name="main-concerns" value="Alignment with European digital sovereignty goals" />Alignment with European digital sovereignty goals</label>
= </div>
+
+ <label><input type="checkbox" name="main-concerns" value="Something else" data-fold-toggle />Something else...</label>
+
+ <div data-fold-target>
+ <textarea name="other-concerns" id="other-concerns" rows="3" placeholder="I'm also concerned about..."></textarea>
+ </div>
= </fieldset>
=
- <label for="other-concerns">
- Anything else that concerns you?
- <textarea name="other-concerns" id="other-concerns" rows="6" placeholder="I'm also concerned about..."></textarea>
- </label>
=
- <fieldset>
+ <fieldset data-fold-container>
= <legend class="required">Have you taken steps to reduce this reliance?</legend>
=
- <div class="grid">
- <label><input type="radio" name="taken-steps" value="yes" required />Yes</label>
- <label><input type="radio" name="taken-steps" value="yes" required />No</label>
- <label><input type="radio" name="taken-steps" value="yes" required />Not yet</label>
- </div>
+ <label role="button"><input type="radio" name="taken-steps" value="yes" required data-fold-toggle/>Yes, we did</label>
+ <label role="button"><input type="radio" name="taken-steps" value="no" required data-fold-toggle/>No, we won't</label>
+ <label role="button"><input type="radio" name="taken-steps" value="not yet" required data-fold-toggle/>Not yet</label>
+
+ <label for="steps-comment" data-fold-target>
+ Would you care to elaborate?
+ <textarea name="steps-comment" id="steps-comment" rows="6" placeholder="What's holding us back is..."></textarea>
+ </label>
= </fieldset>
=
=
@@ -139,27 +139,38 @@
= <label><input type="checkbox" name="want-help" value="Security and compliance monitoring"/>Security and compliance monitoring</label>
= </fieldset>
=
- <label for="biggest-hurdles">
- Briefly describe your biggest hurdle in moving away from USA providers:
- <textarea name="biggest-hurdles" id="biggest-hurdles" rows="6" placeholder="What's holding us back is..."></textarea>
- </label>
+ <div class="grid">
+ <label for="organization-name">
+ Your business / organization name
+ <input type="text" name="organization-name" id="organization-name" value="" required />
+ </label>
+ <label for="respondent-role">
+ What is your role?
+ <input type="text" name="respondent-role" id="respondent-role" value="" />
+ </label>
+ </div>
+
+ <div class="grid">
+ <label for="respondent-name">
+ Your name?
+ <input type="text" name="respondent-name" id="respondent-name" value="" required />
+ </label>
=
- <fieldset>
- <legend class="optional">Can we contact you about this form?</legend>
- <label><input type="checkbox" name="ok-to-contact" value="ok" />Yes, that's OK</label>
- </fieldset>
+ <label for="sender">
+ Your email address:
+ <input type="email" name="email" required/>
+ </label>
+ </div>
=
- <label for="sender">
- Your email address:
- <input type="email" name="email" required/>
- </label>
=
-
- <label for="preferred-contact-method">
- What's the best way to contact you?
- <textarea name="preferred-contact-method" id="preferred-contact-method" rows="3" placeholder="You can call me at +31 ... between ... and ..."></textarea>
- </label>
-
+ <fieldset data-fold-container>
+ <legend class="optional">Can we contact you about this form?</legend>
+ <label><input type="checkbox" name="ok-to-contact" value="ok" data-fold-toggle />Yes, that's OK</label>
+ <label for="preferred-contact-method" data-fold-target>
+ What's the best way to contact you?
+ <textarea name="preferred-contact-method" id="preferred-contact-method" rows="3" placeholder="Would you rather be called on a phone or meet in person? What times work for you? Any other comments?"></textarea>
+ </label>
+ </fieldset>
=
= <fieldset>
= <legend class="required">Data processing</legend>