Revise website contact form (#753)

* Add topic select, revise content of contact form * Fix styling of btn-primary class * Restore deliver-contact-form-message function * Fix lesshint linting errors * Fix on hover style of btn-primary * Adjust box-shadow for btn-primary * Update contact form * Fix lesshint linting errors * Add personalization to submitted form modal * Add responsive styles to contact form
2021-05-13 09:13:34 -05:00
parent 4d913b166c
commit 74b4cd535f
8 changed files with 167 additions and 35 deletions
@@ -23,15 +23,22 @@ module.exports = {
      example: 'I want to buy stuff.'
    },

-    fullName: {
+    firstName: {
      required: true,
      type: 'string',
-      description: 'The full name of the human sending this message.',
-      example: 'Hermione Granger'
+      description: 'The first name of the human sending this message.',
+      example: 'Emma'
+    },
+
+    lastName: {
+      required: true,
+      type: 'string',
+      description: 'The last name of the human sending this message.',
+      example: 'Watson'
    },

    message: {
-      required: true,
+      required: false,
      type: 'string',
      description: 'The custom message, in plain text.'
    }
@@ -48,14 +55,19 @@ module.exports = {
  },


-  fn: async function({emailAddress, topic, fullName, message}) {
-
-    await sails.helpers.http.post(sails.config.custom.slackWebhookUrlForContactForm, {
-      text: `New contact form message: (Remember: we have to email back; can't just reply to this thread.) cc @sales `+
-      `Name: ${fullName}, Email: ${emailAddress}, Topic: ${topic}, Message: ${message}`
-    });
+  fn: async function({emailAddress, topic, firstName, lastName, message}) {

+    if (!sails.config.custom.slackWebhookUrlForContactForm) {
+      sails.log.warn(
+        'Message not delivered: slackWebhookUrlForContactForm needs to be configured in sails.config.custom. Here\'s the undelivered message: ' +
+        `Name: ${firstName + ' ' + lastName}, Email: ${emailAddress}, Topic: ${topic}, Message: ${message ? message : 'No message.'}`
+      );
+    } else {
+      await sails.helpers.http.post(sails.config.custom.slackWebhookUrlForContactForm, {
+        text: `New contact form message: (Remember: we have to email back; can't just reply to this thread.) cc @sales `+
+        `Name: ${firstName + ' ' + lastName}, Email: ${emailAddress}, Topic: ${topic}, Message: ${message ? message : 'No message.'}`
+      });
+    }
  }

-
 };
@@ -16,9 +16,10 @@ parasails.registerPage('contact', {
    // Form rules
    formRules: {
      emailAddress: {isEmail: true, required: true},
-      fullName: {required: true},
+      firstName: {required: true},
+      lastName: {required: true},
      topic: {required: true},
-      message: {required: true},
+      message: {required: false},
    },

    // Server error state for the form
@@ -12,6 +12,7 @@

 body {
  font-family: @main-font;
+  color: @core-fleet-black;
 }

 img {
@@ -51,6 +52,14 @@ footer {
  line-height: 24px;
 }

+.text-danger {
+  color: @core-vibrant-red !important; //lesshint-disable-line importantRule
+}
+
+a.text-danger:hover, a.text-danger:focus {
+  color: darken(@core-vibrant-red, 20%) !important; //lesshint-disable-line importantRule
+}
+
 .btn {
  font-family: @header-font;
  font-weight: 700;
@@ -84,7 +93,24 @@ footer {
      background-color: darken(#ff5c83, 10%);
      border-color: darken(#ff5c83, 10%);
    }
+    &:focus, &.focus {
+      box-shadow: 0 0 0.25rem 0.2rem #ff5c83;
+    }
+    &.disabled, &:disabled {
+      color: #fff;
+      background-color: darken(#ff5c83, 10%), 0.25;
+      border-color: darken(#ff5c83, 10%), 0.25;
+    }
+    &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
+      color: #fff;
+      background-color: darken(#ff5c83, 10%), 0.25;
+      border-color: darken(#ff5c83, 10%), 0.25;
+    }
+    &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus, .show > &.dropdown-toggle:focus {
+      box-shadow: 0 0 0.25rem 0.2rem #ff5c83;
+    }
  }
+
  &.btn-info {
    background-color: #6b6cfa;
    border-color: #6b6cfa;
@@ -132,3 +158,32 @@ footer {
  pointer-events: none;
  font-weight: @bold;
 }
+
+.form-control {
+	height: 54px;
+	padding: 8px 16px;
+	font-size: 18px;
+	color: #192147;
+	border: 1px solid #C5C7D1;
+}
+.form-control:focus {
+	border: 2px solid #6a67fe;
+	box-shadow: unset;
+}
+.form-control.is-invalid:focus {
+	box-shadow: unset;
+}
+.form-control.is-invalid {
+	border: 2px solid #FF5C83;
+}
+textarea.form-control {
+	height: 108px;
+}
+.form-group {
+	margin-bottom: 24px;
+}
+
+.invalid-feedback {
+  color: @core-vibrant-red;
+}
+
@@ -2,12 +2,14 @@
 * Color Variables
 */

+@core-fleet-black: #192147;
+@core-vibrant-red: #FF5C83;
+
@brand: #14acc2;

-@error: #B53A03;
+@error: @core-vibrant-red;

-
-@text-normal: #000;
+@text-normal: @core-fleet-black;
@text-muted: lighten(@text-normal, 60%);

@bg-lt-gray: #f1f1f1;
@@ -1,5 +1,43 @@
 #contact {

-  //…
+  label {
+    font-weight: 700;
+    font-size: 18px;
+  }

+  .btn-primary {
+    background-color: #ff5c83;
+    border-color: #ff5c83;
+    &:hover {
+      background-color: darken(#ff5c83, 10%);
+      border-color: darken(#ff5c83, 10%);
+    }
+  }
+
+  .selectbox {
+    position: relative;
+  }
+  .selectbox::after {
+    content: url('/images/chevron-12x8@2x.png');
+    right: 16px;
+    transform: scale(0.5);
+    top: 16px;
+    position: absolute;
+    pointer-events: none;
+  }
+  .selectbox select {
+    appearance: none;
+  }
+
+  @media (max-width: 575px) {
+    h2, p, .btn-container {
+      text-align: center;
+    }
+
+    button {
+      display: inline;
+      width: 100%;
+      max-width: 325px;
+    }
+  }
 }
@@ -1,4 +1,12 @@
 #homepage {
+  .btn-primary {
+    background-color: #ff5c83;
+    border-color: #ff5c83;
+    &:hover {
+      background-color: darken(#ff5c83, 10%);
+      border-color: darken(#ff5c83, 10%);
+    }
+  }
  .hero-banner {
    background: rgb(31, 29, 66);
    background: linear-gradient(170.26deg, #1F1D42 7.33%, #00FFF0 130.16%);//lesshint-disable-line duplicateProperty
@@ -1,40 +1,56 @@
 <div id="contact" v-cloak>
  <div class="container-fluid pt-5 pb-5">
-    <h1 class="text-center">Get in touch</h1>
    <div style="max-width:  650px;" class="mx-auto" v-if="!cloudSuccess">
-      <p class="text-center">Have a question for us?  Maybe some feedback?  We love talking to users about NEW_APP_NAME, and we're happy to answer questions about our pricing, roadmap, or business solutions.  Send us a note and we'll get back to you as soon as possible.</p>
-      <hr/>
+      <h2 style="max-width: 650px;" class="mx-auto">Contact our team</h2>
+      <p>We're here to answer your questions, and familiarize you with Fleet.</p>
      <ajax-form action="deliverContactFormMessage" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedForm()">
        <div class="form-group">
-          <label for="full-name">Name</label>
-          <input class="form-control" id="full-name" name="full-name" type="text"  :class="[formErrors.fullName ? 'is-invalid' : '']" v-model.trim="formData.fullName" placeholder="Sturgis P. Sturgeon" autocomplete="name" focus-first>
-          <div class="invalid-feedback" v-if="formErrors.fullName">Please let us know what to call you.</div>
+          <div class="row">
+            <div class="col-sm pt-4">
+              <label for="first-name">First name<span style="font-weight: 400; color: #FF5C83"> *</span></label>
+              <input class="form-control" id="first-name" name="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="given-name" focus-first>
+              <div class="invalid-feedback" v-if="formErrors.firstName">Please let us know what to call you.</div>
+            </div>
+            <div class="col-sm pt-4">
+              <label for="last-name">Last name<span style="font-weight: 400; color: #FF5C83"> *</span></label>
+              <input class="form-control" id="last-name" name="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="family-name">
+              <div class="invalid-feedback" v-if="formErrors.lastName">Please let us know what to call you.</div>
+            </div>
+          </div>
        </div>
        <div class="form-group">
-          <label for="email-address">Email address</label>
-          <input class="form-control" id="email-address" name="email-address" type="email"  :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" placeholder="sturgeon@example.com" autocomplete="email">
+          <label for="email-address">Email<span style="font-weight: 400; color: #FF5C83"> *</span></label>
+          <input class="form-control" id="email-address" name="email-address" type="email" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email">
          <div class="invalid-feedback" v-if="formErrors.emailAddress">Please enter a valid email address.</div>
        </div>
        <div class="form-group">
-          <label for="topic">Topic</label>
-          <input class="form-control" id="topic" name="topic" type="text"  :class="[formErrors.topic ? 'is-invalid' : '']" v-model.trim="formData.topic" placeholder="Pricing question" autocomplete="none">
-          <div class="invalid-feedback" v-if="formErrors.topic">Please choose a topic for your message.</div>
+          <label for="topic">How can we help you?</label>
+          <div class="selectbox">
+          <select class="form-control" id="topic" name="topic" :class="[formErrors.topic ? 'is-invalid' : '']" v-model="formData.topic">
+            <option disabled hidden value="undefined">Please select one</option>
+            <option value="I want to evaluate Fleet Basic for my organization">I want to evaluate Fleet Basic for my organization</option>
+            <option value="I want to understand which plan is right for me">I want to understand which plan is right for me</option>
+            <option value="I have a product question">I have a product question</option>
+            <option value="Something else">Something else</option>
+          </select>
+          </div>
+          <div class="d-block invalid-feedback" v-if="formErrors.topic">Please choose a topic for your message.</div>
        </div>
        <div class="form-group">
          <label for="message">Message</label>
-          <textarea class="form-control" id="message" name="message" :class="[formErrors.message ? 'is-invalid' : '']" v-model.trim="formData.message" placeholder="What is the difference between the &quot;Individual&quot; plan and the &quot;Professional&quot; plan?" autocomplete="none"></textarea>
+          <textarea class="form-control" id="message" name="message" :class="[formErrors.message ? 'is-invalid' : '']" v-model.trim="formData.message" autocomplete="none"></textarea>
          <div class="invalid-feedback" v-if="formErrors.message">Message cannot be empty.</div>
        </div>
+        <p style="color: #FF5C83">Fields marked with an asterisk (*) are required.</p>
        <cloud-error v-if="cloudError"></cloud-error>
-        <div class="form-group">
-          <ajax-button type="submit" :syncing="syncing" class="btn btn-dark btn-lg btn-block">Send message</ajax-button>
+        <div class="form-group btn-container">
+          <ajax-button type="submit" :syncing="syncing" class="btn btn-primary btn-sm">Submit</ajax-button>
        </div>
      </ajax-form>
    </div>
-    <div style="max-width: 450px;" class="mx-auto text-center" v-else>
-      <p class="text-center">Thanks for reaching out!</p>
-      <hr/>
-      <p>We have received your message, and someone from our team will get back to you soon.</p>
+    <div style="max-width: 725px;" class="mx-auto text-center" v-else>
+      <h2>Thank you, {{formData.firstName}}!</h2>
+      <p class="mt-3">We’re happy to hear from you. A member of our team will get back to you soon - usually within 1 business day (or less!).</p>
    </div>
  </div>
 </div>