Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 111

Website: update talk to us form (#23500)

Browse source 
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.
This commit is contained in:
Eric 2024-11-04 14:29:38 -06:00 committed by GitHub
parent 16e3161dd7
commit 65fbc8101b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 76 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
website/assets/styles/pages/contact.less vendored
View file

@ -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;

30
website/views/pages/contact.ejs vendored
View file

@ -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>