Website: Add steps for users who deploy Fleet to /start questionnaire (#18661)

Changes: - Added two steps to the /start questionnaire for users who select "I want to deploy Fleet in my environment" on the "What did you think" question. - Updated save-questionnaire-progress to set psychologicalStage based on selected answers to the new questions
2026-05-24 09:28:54 +00:00 · 2024-05-01 18:22:47 -05:00 · 2024-05-01 18:22:47 -05:00 · 806c88f006
commit 806c88f006
parent 0322bbb822
3 changed files with 210 additions and 49 deletions
--- a/website/api/controllers/save-questionnaire-progress.js
+++ b/website/api/controllers/save-questionnaire-progress.js
@ -26,6 +26,8 @@ module.exports = {
        'deploy-fleet-in-your-environment',
        'managed-cloud-for-growing-deployments',
        'self-hosted-deploy',
+        'whats-left-to-get-you-set-up',
+        'how-was-your-deployment',
      ]
    },
    formData: {
@ -99,6 +101,18 @@ module.exports = {
    //  - deploy-fleet-in-environment » Stage 5
    //  - let-me-think-about-it »  Stage 2
    //  - host-fleet-for-me » N/A (currently not selectable, but should set the user's psychologicalStage to stage 5)
+    // 'how-was-your-deployment'
+    //  - up-and-running »  Stage 6
+    //  - kinda-stuck »  No change (Stage 5)
+    //  - havent-gotten-to-it » No change (Stage 5)
+    //  - changed-mind-want-managed-deployment » No change (Stage 5)
+    //  - decided-to-not-use-fleet » Stage 2
+    // 'whats-left-to-get-you-set-up'
+    //  - need-premium-license-key » No change (Stage 6)
+    //  - help-show-fleet-to-my-team » No change (Stage 6)
+    //  - procurement-wants-some-stuff » No change (Stage 6)
+    //  - nothing » No change (Stage 6)
+

    let psychologicalStage = userRecord.psychologicalStage;
    // Get the value of the submitted formData, we do this so we only need to check one variable, instead of (formData.attribute === 'foo');
@ -156,14 +170,19 @@ module.exports = {
          // FUTURE: check previous answers for other selected buying situations.
        }
      } else if(currentStep === 'what-did-you-think') {
-        // If the user is ready to deploy Fleet in their work environemnt, then they're ready to get buy-in from their team, so set their psyStage to 5.
-        if(valueFromFormData === 'deploy-fleet-in-environment') {
-          psychologicalStage = '5 - Personally confident';
-        } else if(valueFromFormData === 'let-me-think-about-it') {
-        // If the user selects "Let me think about it", their stage change to 2
+        // If the user selects "Let me think about it", set their psyStage to 2.
+        if(valueFromFormData === 'let-me-think-about-it') {
          psychologicalStage = '2 - Aware';
+        } else {// If the user is ready to deploy Fleet in their work environemnt, then they're ready to get buy-in from their team, so set their psyStage to 5.
+          psychologicalStage = '5 - Personally confident';
        }
        // If the user selects "I’d like you to host Fleet for me", the form is not submitted, and they are taken to the /contact page instead. FUTURE: set stage to stage 5.
+      } else if(currentStep === 'how-was-your-deployment') {
+        if(valueFromFormData === 'decided-to-not-use-fleet') {
+          psychologicalStage = '2 - Aware';
+        } else if(valueFromFormData === 'up-and-running'){
+          psychologicalStage = '6 - Has team buy-in';
+        }
      } else if(currentStep === 'how-many-hosts') {
        // If they have Fleet deployed, they have team buy-in
        psychologicalStage = '6 - Has team buy-in';
--- a/website/assets/js/pages/start.page.js
+++ b/website/assets/js/pages/start.page.js
@ -20,6 +20,9 @@ parasails.registerPage('start', {
      'what-do-you-manage-mdm': {},
      'is-it-any-good': {stepCompleted: true},
      'what-did-you-think': {},
+      'deploy-fleet-in-your-environment': {stepCompleted: true},
+      'how-was-your-deployment': {},
+      'whats-left-to-get-you-set-up': {},
    },
    // For tracking client-side validation errors in our form.
    // > Has property set to `true` for each invalid property in `formData`.
@ -56,6 +59,12 @@ parasails.registerPage('start', {
    endpointOpsSecurityWhatDidYouThinkFormRules: {
      whatDidYouThink: {required: true}
    },
+    howWasYourDeploymentFormRules: {
+      howWasYourDeployment: {required: true}
+    },
+    whatsLeftToGetYouSetUpFormRules: {
+      whatsLeftToGetSetUp: {required: true}
+    },
    previouslyAnsweredQuestions: {},

    // Server error state for the forms
@ -94,8 +103,12 @@ parasails.registerPage('start', {
        formData: formDataForThisStep,
      });
      this.previouslyAnsweredQuestions[this.currentStep] = getStartedProgress[this.currentStep];
-      this.syncing = false;
-      this.currentStep = nextStep;
+      if(_.startsWith(nextStep, '/')){
+        window.location = nextStep;
+      } else {
+        this.syncing = false;
+        this.currentStep = nextStep;
+      }
    },
    clickGoToPreviousStep: async function() {
      switch(this.currentStep) {
@ -150,6 +163,12 @@ parasails.registerPage('start', {
        case 'what-do-you-manage-mdm':
          this.currentStep = 'have-you-ever-used-fleet';
          break;
+        case 'how-was-your-deployment':
+          this.currentStep = 'deploy-fleet-in-your-environment';
+          break;
+        case 'whats-left-to-get-you-set-up':
+          this.currentStep = 'how-was-your-deployment';
+          break;
      }
    },
    getNextStep: function() {
@ -210,11 +229,36 @@ parasails.registerPage('start', {
          break;
        case 'what-did-you-think':
          if(this.formData['what-did-you-think'].whatDidYouThink === 'let-me-think-about-it'){
-            nextStepInForm = 'is-it-any-good';
+            nextStepInForm = '/announcements';
          } else {
            nextStepInForm = 'deploy-fleet-in-your-environment';
          }
          break;
+        case 'deploy-fleet-in-your-environment':
+          nextStepInForm = 'how-was-your-deployment';
+          break;
+        case 'how-was-your-deployment':
+          if(this.formData['how-was-your-deployment'].howWasYourDeployment === 'up-and-running') {
+            nextStepInForm = 'whats-left-to-get-you-set-up';
+          } else if(this.formData['how-was-your-deployment'].howWasYourDeployment === 'kinda-stuck'){
+            nextStepInForm = '/contact';
+          } else if(this.formData['how-was-your-deployment'].howWasYourDeployment === 'havent-gotten-to-it') {
+            nextStepInForm = 'deploy-fleet-in-your-environment';
+          } else if(this.formData['how-was-your-deployment'].howWasYourDeployment === 'changed-mind-want-managed-deployment'){
+            nextStepInForm = 'what-did-you-think';
+          } else if(this.formData['how-was-your-deployment'].howWasYourDeployment === 'decided-to-not-use-fleet'){
+            nextStepInForm = '/';
+          }
+          break;
+        case 'whats-left-to-get-you-set-up':
+          if(this.formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp === 'need-premium-license-key') {
+            nextStepInForm = '/new-license';
+          } else if(this.formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp === 'nothing'){
+            nextStepInForm = '/swag';
+          } else {
+            nextStepInForm = '/contact';
+          }
+          break;
      }
      return nextStepInForm;
    },
@ -235,6 +279,9 @@ parasails.registerPage('start', {
          this.formData[step] = this.previouslyAnsweredQuestions[step];
        }
        this.currentStep = this.getNextStep();
+        if(_.startsWith(this.currentStep, '/')){
+          this.currentStep = this.me.lastSubmittedGetStartedQuestionnaireStep;
+        }
      }
    },
  }
--- a/website/views/pages/start.ejs
+++ b/website/views/pages/start.ejs
@ -9,7 +9,7 @@
        <h2>Let’s get started</h2>
        <p>To see whether Fleet’s right for your team, let's have a look at your hosts and what you're trying to do.</p>
        <p>You can come back at any time and pick up where you left off.</p>
-        <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['start']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+        <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['start']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div purpose="form-buttons">
          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Start</ajax-button>
        </div>
@ -21,11 +21,11 @@
      //  └┴┘┴ ┴┴ ┴ ┴   ┴ ┴┴└─└─┘   ┴ └─┘└─┘  └─┘└─┘┴┘└┘└─┘  └  ┴─┘└─┘└─┘ ┴   └  └─┘┴└─%>
    <div v-if="currentStep === 'what-are-you-using-fleet-for'">
      <div purpose="progress-bar-container">
-        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 20%"></div></div>
+        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 10%"></div></div>
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
      <h2>What will you use Fleet for?</h2>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['what-are-you-using-fleet-for']" :form-rules="primaryBuyingSituationFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['what-are-you-using-fleet-for']" :form-rules="primaryBuyingSituationFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div class="form-group" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" >
          <label purpose="form-option" class="form-control" :class="[formData['what-are-you-using-fleet-for'].primaryBuyingSituation === 'eo-security' ? 'selected' : '']">
            <input type="radio" v-model.trim="formData['what-are-you-using-fleet-for'].primaryBuyingSituation" value="eo-security" @input="clickClearOneFormError('primaryBuyingSituation')">
@ -60,11 +60,11 @@
      //  ┴ ┴┴ ┴ └┘ └─┘   ┴ └─┘└─┘  └─┘ └┘ └─┘┴└─  └─┘└─┘└─┘─┴┘  └  ┴─┘└─┘└─┘ ┴ %>
    <div v-if="currentStep === 'have-you-ever-used-fleet'">
      <div purpose="progress-bar-container">
-        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 40%"></div></div>
+        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 30%"></div></div>
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
      <h2>Have you ever used Fleet?</h2>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['have-you-ever-used-fleet']" :form-rules="isUsingFleetFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['have-you-ever-used-fleet']" :form-rules="isUsingFleetFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">

          <div class="form-group" :class="[formErrors.fleetUseStatus ? 'is-invalid' : '']">
            <label purpose="form-option" class="form-control" :class="[formData['have-you-ever-used-fleet'].fleetUseStatus === 'yes-deployed' ? 'selected' : '']">
@ -115,7 +115,7 @@
        <p v-else-if="formData['what-are-you-using-fleet-for'].primaryBuyingSituation === 'eo-it'">Including macOS, Windows, Linux workstations, Chromebooks, servers, and other hosts.</p>
        <p v-else-if="formData['what-are-you-using-fleet-for'].primaryBuyingSituation === 'vm'">Including computers, servers, OT/ICS, containers, and other hosts.</p>
      </div>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['how-many-hosts']" :form-rules="numberOfHostsFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['how-many-hosts']" :form-rules="numberOfHostsFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div class="form-group">

          <div class="form-group" :class="[formErrors.numberOfHosts ? 'is-invalid' : '']">
@ -158,7 +158,7 @@
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
      <h2>Will you be hosting Fleet yourself?</h2>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['will-you-be-self-hosting']" :form-rules="hostingFleetFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['will-you-be-self-hosting']" :form-rules="hostingFleetFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">

          <div class="form-group" :class="[formErrors.willSelfHost ? 'is-invalid' : '']" >
            <label purpose="form-option" class="form-control" :class="[formData['will-you-be-self-hosting'].willSelfHost === 'true' ? 'selected' : '']">
@ -188,11 +188,11 @@
      //  └─┘└─┘   └─┘└─┘└─┘└─┘┴└─┴ ┴  ┴%>
    <div v-if="currentStep === 'what-are-you-working-on-eo-security'">
      <div purpose="progress-bar-container">
-        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 60%"></div></div>
+        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 40%"></div></div>
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
      <h2>What are you working on, mainly?</h2>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['what-are-you-working-on-eo-security']" :form-rules="endpointOpsSecurityWorkingOnFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['what-are-you-working-on-eo-security']" :form-rules="endpointOpsSecurityWorkingOnFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div class="form-group">

          <div class="form-group" :class="[formErrors.endpointOpsSecurityUseCase ? 'is-invalid' : '']">
@ -244,11 +244,11 @@
      //  └─┘└─┘   ┴ ┴%>
    <div v-if="currentStep === 'what-does-your-team-manage-eo-it'">
      <div purpose="progress-bar-container">
-        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 60%"></div></div>
+        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 40%"></div></div>
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
      <h2>What does your team manage?</h2>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['what-does-your-team-manage-eo-it']" :form-rules="endpointOpsItUseCaseFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['what-does-your-team-manage-eo-it']" :form-rules="endpointOpsItUseCaseFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div class="form-group">

          <div class="form-group" :class="[formErrors.endpointOpsItUseCase ? 'is-invalid' : '']">
@ -290,11 +290,11 @@
      //   └┘ ┴ ┴%>
    <div v-if="currentStep === 'what-does-your-team-manage-vm'">
      <div purpose="progress-bar-container">
-        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 60%"></div></div>
+        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 40%"></div></div>
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
      <h2>What does your team manage?</h2>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['what-does-your-team-manage-vm']" :form-rules="vmUseCaseFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['what-does-your-team-manage-vm']" :form-rules="vmUseCaseFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div class="form-group">

          <div class="form-group" :class="[formErrors.vmUseCase ? 'is-invalid' : '']">
@ -341,11 +341,11 @@
      //  ┴ ┴─┴┘┴ ┴%>
    <div v-if="currentStep === 'what-do-you-manage-mdm'">
      <div purpose="progress-bar-container">
-        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 60%"></div></div>
+        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 40%"></div></div>
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
      <h2>What do you manage?</h2>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['what-do-you-manage-mdm']" :form-rules="mdmUseCaseFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['what-do-you-manage-mdm']" :form-rules="mdmUseCaseFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div class="form-group">

          <div class="form-group" :class="[formErrors.mdmUseCase ? 'is-invalid' : '']">
@ -383,9 +383,9 @@
      //  │└─┐  │ │   ├─┤│││└┬┘  │ ┬│ ││ │ ││
      //  ┴└─┘  ┴ ┴   ┴ ┴┘└┘ ┴   └─┘└─┘└─┘─┴┘%>
    <div v-if="currentStep === 'is-it-any-good'">
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['is-it-any-good']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['is-it-any-good']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div purpose="progress-bar-container">
-          <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 80%"></div></div>
+          <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 50%"></div></div>
          <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
        </div>
        <h2>Is it any good?</h2>
@ -417,12 +417,12 @@
      //  └┴┘┴ ┴┴ ┴ ┴   ─┴┘┴─┴┘   ┴ └─┘└─┘   ┴ ┴ ┴┴┘└┘┴ ┴%>
    <div v-if="currentStep === 'what-did-you-think'">
      <div purpose="progress-bar-container">
-        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 90%"></div></div>
+        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 70%"></div></div>
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
      <h2>What did you think?</h2>
      <p>Now that you’ve seen what Fleet can do, what do you want to do next?</p>
-      <ajax-form :handle-submitting="handleSubmittingForm" class="contact" :form-errors.sync="formErrors" :form-data="formData['what-did-you-think']" :form-rules="endpointOpsSecurityWhatDidYouThinkFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['what-did-you-think']" :form-rules="endpointOpsSecurityWhatDidYouThinkFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
        <div class="form-group" :class="[formErrors.whatDidYouThink ? 'is-invalid' : '']">
          <div purpose="form-option" class="form-control" @click.stop.prevent="clickGoToContactPage()">
            <input type="radio" v-model.trim="formData['what-did-you-think'].whatDidYouThink" value="host-fleet-for-me">
@ -551,36 +551,131 @@
        <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
      </div>
    </div>
+
    <%//  ╔╦╗┌─┐┌─┐┬  ┌─┐┬ ┬  ┌─┐┬  ┌─┐┌─┐┌┬┐  ┬┌┐┌  ┬ ┬┌─┐┬ ┬┬─┐  ┌─┐┌┐┌┬  ┬┬┬─┐┌─┐┌┐┌┌┬┐┌─┐┌┐┌┌┬┐
      //   ║║├┤ ├─┘│  │ │└┬┘  ├┤ │  ├┤ ├┤  │   ││││  └┬┘│ ││ │├┬┘  ├┤ │││└┐┌┘│├┬┘│ │││││││├┤ │││ │
      //  ═╩╝└─┘┴  ┴─┘└─┘ ┴   └  ┴─┘└─┘└─┘ ┴   ┴┘└┘   ┴ └─┘└─┘┴└─  └─┘┘└┘ └┘ ┴┴└─└─┘┘└┘┴ ┴└─┘┘└┘ ┴%>
    <div v-if="currentStep === 'deploy-fleet-in-your-environment'">
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['what-did-you-think']" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+        <div purpose="progress-bar-container">
+          <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 80%"></div></div>
+          <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
+        </div>
+        <div class="mx-auto">
+          <h2>Deploy Fleet in your environment</h2>
+          <p>Learn how to deploy and roll out Fleet in your environment.<br>
+            You can come back any time to continue or get help.</p>
+        </div>
+        <div purpose="start-cards">
+          <a purpose="card" href="/docs/deploy">
+            <img alt="Premium support" src="/images/icon-deploy-fleet-64x64@2x.png">
+            <h2>Deploy Fleet</h2>
+            <p>Learn how to deploy Fleet</p>
+          </a>
+          <a purpose="card" href="/support">
+            <img alt="Ask us anything" src="/images/icon-ask-anything-64x64@2x.png">
+            <h2>Got questions?</h2>
+            <p>Ask Fleet’s community of helpful, knowledgeable people.</p>
+          </a>
+        </div>
+        <div purpose="logo-container">
+        <logo-carousel></logo-carousel>
+        </div>
+        <div purpose="form-buttons">
+          <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
+        </div>
+      </ajax-form>
+    </div>
+
+    <%//  ┬ ┬┌─┐┬ ┬  ┬ ┬┌─┐┌─┐  ┬ ┬┌─┐┬ ┬┬─┐  ┌┬┐┌─┐┌─┐┬  ┌─┐┬ ┬┌┬┐┌─┐┌┐┌┌┬┐
+      //  ├─┤│ ││││  │││├─┤└─┐  └┬┘│ ││ │├┬┘   ││├┤ ├─┘│  │ │└┬┘│││├┤ │││ │
+      //  ┴ ┴└─┘└┴┘  └┴┘┴ ┴└─┘   ┴ └─┘└─┘┴└─  ─┴┘└─┘┴  ┴─┘└─┘ ┴ ┴ ┴└─┘┘└┘ ┴%>
+    <div v-if="currentStep === 'how-was-your-deployment'">
+      <div purpose="progress-bar-container">
+        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 90%"></div></div>
+        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
+      </div>
+      <h2>How was your deployment?</h2>
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['how-was-your-deployment']" :form-rules="howWasYourDeploymentFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+        <div class="form-group">
+          <div class="form-group" :class="[formErrors.howWasYourDeployment ? 'is-invalid' : '']">
+            <label purpose="form-option" class="form-control" :class="[formData['how-was-your-deployment'].howWasYourDeployment === 'up-and-running' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['how-was-your-deployment'].howWasYourDeployment" value="up-and-running" @input="clickClearOneFormError('howWasYourDeployment')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              I’m up and running!
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData['how-was-your-deployment'].howWasYourDeployment === 'kinda-stuck' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['how-was-your-deployment'].howWasYourDeployment" value="kinda-stuck" @input="clickClearOneFormError('howWasYourDeployment')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              I’m kinda stuck
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData['how-was-your-deployment'].howWasYourDeployment === 'havent-gotten-to-it' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['how-was-your-deployment'].howWasYourDeployment" value="havent-gotten-to-it" @input="clickClearOneFormError('howWasYourDeployment')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              I haven’t gotten to it yet
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData['how-was-your-deployment'].howWasYourDeployment === 'changed-mind-want-managed-deployment' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['how-was-your-deployment'].howWasYourDeployment" value="changed-mind-want-managed-deployment" @input="clickClearOneFormError('howWasYourDeployment')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              I changed my mind, can you deploy for me?
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData['how-was-your-deployment'].howWasYourDeployment === 'decided-to-not-use-fleet' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['how-was-your-deployment'].howWasYourDeployment" value="decided-to-not-use-fleet" @input="clickClearOneFormError('howWasYourDeployment')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              I decided not to use Fleet for now
+            </label>
+            <div class="invalid-feedback" v-if="formErrors.howWasYourDeployment">Please select an option</div>
+          </div>
+        </div>
+        <cloud-error v-if="cloudError"></cloud-error>
+        <div purpose="form-buttons">
+          <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
+        </div>
+      </ajax-form>
+    </div>
+    <%//  ╦ ╦┬ ┬┌─┐┌┬┐┌─┐  ┬  ┌─┐┌─┐┌┬┐  ┌┬┐┌─┐  ┌─┐┌─┐┌┬┐  ┬ ┬┌─┐┬ ┬  ┌─┐┌─┐┌┬┐  ┬ ┬┌─┐
+      //  ║║║├─┤├─┤ │ └─┐  │  ├┤ ├┤  │    │ │ │  │ ┬├┤  │   └┬┘│ ││ │  └─┐├┤  │   │ │├─┘
+      //  ╚╩╝┴ ┴┴ ┴ ┴ └─┘  ┴─┘└─┘└   ┴    ┴ └─┘  └─┘└─┘ ┴    ┴ └─┘└─┘  └─┘└─┘ ┴   └─┘┴%>
+    <div v-if="currentStep === 'whats-left-to-get-you-set-up'">
      <div purpose="progress-bar-container">
        <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 100%"></div></div>
        <img purpose="success-icon" alt="🏆" src="/images/icon-form-success-12x12@2x.png">
      </div>
-      <div class="mx-auto">
-        <h2>Deploy Fleet in your environment</h2>
-        <p>Learn how to deploy and roll out Fleet in your environment.</p>
-      </div>
-      <div purpose="start-cards">
-        <a purpose="card" href="/docs/deploy">
-          <img alt="Premium support" src="/images/icon-deploy-fleet-64x64@2x.png">
-          <h2>Deploy Fleet</h2>
-          <p>Learn how to deploy Fleet</p>
-        </a>
-        <a purpose="card" href="/support">
-          <img alt="Ask us anything" src="/images/icon-ask-anything-64x64@2x.png">
-          <h2>Got questions?</h2>
-          <p>Ask Fleet’s community of helpful, knowledgeable people.</p>
-        </a>
-      </div>
-      <div purpose="logo-container">
-      <logo-carousel></logo-carousel>
-      </div>
-      <div purpose="form-buttons">
-        <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
-      </div>
+      <h2>What’s left to get you set up?</h2>
+      <ajax-form :handle-submitting="handleSubmittingForm" :form-errors.sync="formErrors" :form-data="formData['whats-left-to-get-you-set-up']" :form-rules="whatsLeftToGetYouSetUpFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError">
+        <div class="form-group">
+          <div class="form-group" :class="[formErrors.whatsLeftToGetSetUp ? 'is-invalid' : '']">
+            <label purpose="form-option" class="form-control" :class="[formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp === 'need-premium-license-key' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp" value="need-premium-license-key" @input="clickClearOneFormError('whatsLeftToGetSetUp')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              I need a Fleet Premium license key
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp === 'help-show-fleet-to-my-team' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp" value="help-show-fleet-to-my-team" @input="clickClearOneFormError('whatsLeftToGetSetUp')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              I could use some help showing this to my team
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp === 'procurement-wants-some-stuff' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp" value="procurement-wants-some-stuff" @input="clickClearOneFormError('whatsLeftToGetSetUp')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              Procurement wants some stuff
+            </label>
+            <label purpose="form-option" class="form-control" :class="[formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp === 'nothing' ? 'selected' : '']">
+              <input type="radio" v-model.trim="formData['whats-left-to-get-you-set-up'].whatsLeftToGetSetUp" value="nothing" @input="clickClearOneFormError('whatsLeftToGetSetUp')">
+              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
+              Nothing, I love Fleet!
+            </label>
+            <div class="invalid-feedback" v-if="formErrors.whatsLeftToGetSetUp">Please select an option</div>
+          </div>
+        </div>
+        <cloud-error v-if="cloudError"></cloud-error>
+        <div purpose="form-buttons">
+          <a purpose="back-button" @click="clickGoToPreviousStep()">Back</a>
+          <ajax-button type="submit" purpose="submit-button" class="btn btn-primary" :syncing="syncing">Continue</ajax-button>
+        </div>
+      </ajax-form>
    </div>
    <%//  ┌─┐┌─┐┬  ┌─┐  ┬ ┬┌─┐┌─┐┌┬┐┌─┐┌┬┐  ┌┬┐┌─┐┌─┐┬  ┌─┐┬ ┬
      //  └─┐├┤ │  ├┤───├─┤│ │└─┐ │ ├┤  ││   ││├┤ ├─┘│  │ │└┬┘