diff --git a/website/api/controllers/deliver-contact-form-message.js b/website/api/controllers/deliver-contact-form-message.js index 4e04aed81c..d8db0de47d 100644 --- a/website/api/controllers/deliver-contact-form-message.js +++ b/website/api/controllers/deliver-contact-form-message.js @@ -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.'}` + }); + } } - }; diff --git a/website/assets/images/chevron-12x8@2x.png b/website/assets/images/chevron-12x8@2x.png new file mode 100644 index 0000000000..c58c19b7ee Binary files /dev/null and b/website/assets/images/chevron-12x8@2x.png differ diff --git a/website/assets/js/pages/contact.page.js b/website/assets/js/pages/contact.page.js index 035e53d7b5..5f6b65b6f7 100644 --- a/website/assets/js/pages/contact.page.js +++ b/website/assets/js/pages/contact.page.js @@ -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 diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less index f5c0f36a76..c03b5974b3 100644 --- a/website/assets/styles/bootstrap-overrides.less +++ b/website/assets/styles/bootstrap-overrides.less @@ -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; +} + diff --git a/website/assets/styles/mixins-and-variables/colors.less b/website/assets/styles/mixins-and-variables/colors.less index 42f35bd939..817041b2cc 100644 --- a/website/assets/styles/mixins-and-variables/colors.less +++ b/website/assets/styles/mixins-and-variables/colors.less @@ -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; diff --git a/website/assets/styles/pages/contact.less b/website/assets/styles/pages/contact.less index 488cc71e78..c240d894f0 100644 --- a/website/assets/styles/pages/contact.less +++ b/website/assets/styles/pages/contact.less @@ -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; + } + } } diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 91867093cf..379ed16179 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -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 diff --git a/website/views/pages/contact.ejs b/website/views/pages/contact.ejs index d1ed43b775..af62062579 100644 --- a/website/views/pages/contact.ejs +++ b/website/views/pages/contact.ejs @@ -1,40 +1,56 @@
-

Get in touch

-

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.

-
+

Contact our team

+

We're here to answer your questions, and familiarize you with Fleet.

- - -
Please let us know what to call you.
+
+
+ + +
Please let us know what to call you.
+
+
+ + +
Please let us know what to call you.
+
+
- - + +
Please enter a valid email address.
- - -
Please choose a topic for your message.
+ +
+ +
+
Please choose a topic for your message.
- +
Message cannot be empty.
+

Fields marked with an asterisk (*) are required.

-
- Send message +
+ Submit
-
-

Thanks for reaching out!

-
-

We have received your message, and someone from our team will get back to you soon.

+
+

Thank you, {{formData.firstName}}!

+

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!).