From 65fbc8101bae0c4b8506f6c8abc01af33f1c5869 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 4 Nov 2024 14:29:38 -0600
Subject: [PATCH] Website: update talk to us form (#23500)

Closes: #23317

Changes:
- Changed the select input for the "What will you be using Fleet for?"
question into a radio input on the Talk to us" contact form.
---
 website/assets/styles/pages/contact.less | 58 ++++++++++++++++++++++++
 website/views/pages/contact.ejs          | 30 +++++++-----
 2 files changed, 76 insertions(+), 12 deletions(-)

diff --git a/website/assets/styles/pages/contact.less b/website/assets/styles/pages/contact.less
index be452264a8..487c58d3a3 100644
--- a/website/assets/styles/pages/contact.less
+++ b/website/assets/styles/pages/contact.less
@@ -27,6 +27,64 @@
     color: #515774;
     font-size: 14px;
   }
+  [purpose='form-option'] {
+    user-select: none;
+    cursor: pointer;
+    width: fit-content;
+    padding: 8px 16px 8px 0px;
+    margin-bottom: 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 7px;
+    border: none;
+    color: #515774;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 150%;
+    white-space: nowrap;
+    height: fit-content;
+    input {
+      cursor: pointer;
+      margin-right: 8px;
+      display: none;
+    }
+    [purpose='custom-radio'] {
+      margin-right: 8px;
+      display: flex;
+      min-width: 18px;
+      min-height: 18px;
+      border-radius: 50%;
+      border: 1px solid #E2E4EA;
+      justify-content: center;
+      align-items: center;
+      [purpose='custom-radio-selected'] {
+        min-width: 10px;
+        min-height: 10px;
+        border-radius: 50%;
+        background-color: #0587FF;
+        transform: scale(0);
+        transition: 180ms transform ease-in-out;
+      }
+    }
+    input[type='radio']:checked + [purpose='custom-radio'] {
+      [purpose='custom-radio-selected'] {
+        transform: scale(1);
+      }
+    }
+    .form-control {
+      height: 40px;
+    }
+  }
+  .form-group.is-invalid {
+    color: @core-vibrant-red;
+    .form-control {
+      color: @core-vibrant-red;
+    }
+    .invalid-feedback {
+      display: block;
+    }
+  }
   [purpose='submit-button'] {
     display: flex;
     padding: 16px 32px;
diff --git a/website/views/pages/contact.ejs b/website/views/pages/contact.ejs
index bbe4f5235e..eb46a150d9 100644
--- a/website/views/pages/contact.ejs
+++ b/website/views/pages/contact.ejs
@@ -76,18 +76,24 @@
             <input class="form-control" id="organization" name="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" autocomplete="email">
             <div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
           </div>
-          <div class="form-group">
-            <label for="primaryBuyingSituation">What will you be using Fleet for? *</label>
-            <div class="selectbox">
-            <select class="form-control" id="primaryBuyingSituation" name="primaryBuyingSituation" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" v-model="formData.primaryBuyingSituation">
-              <option disabled hidden value="undefined">Choose an option</option>
-              <option value="mdm">Device management (MDM)</option>
-              <option value="eo-it">IT engineering</option>
-              <option value="eo-security">Security engineering</option>
-              <!-- <option value="vm">Vulnerability management</option> -->
-            </select>
-            </div>
-            <div class="d-block invalid-feedback" v-if="formErrors.topic">Please select an option.</div>
+          <div class="form-group" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" >
+            <label class="mb-3"><strong>What will you be using Fleet for? *</strong></label>
+            <label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'mdm' ? 'selected' : '']">
+              <input type="radio" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" v-model.trim="formData.primaryBuyingSituation" value="mdm">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              Device management (MDM)
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'eo-it' ? 'selected' : '']">
+              <input type="radio" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" v-model.trim="formData.primaryBuyingSituation" value="eo-it">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              IT engineering
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'eo-security' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData.primaryBuyingSituation" value="eo-security">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              Security engineering
+            </label>
+            <div class="invalid-feedback" v-if="formErrors.primaryBuyingSituation">Please select an option</div>
           </div>
          <div class="form-group">
            <label for="number-of-hosts">How many <%= primaryBuyingSituation === 'mdm' ? 'devices' : 'hosts' %> do you have? *</label>