No spam — we promise!
diff --git a/src/js/signup.js b/src/js/signup.js
index ba122c0d..add90a5a 100644
--- a/src/js/signup.js
+++ b/src/js/signup.js
@@ -219,14 +219,15 @@ function submitForm(e) {
function sundipValidation(resultMessage, form, formName) {
var prevError = form.getElementsByClassName('red')[0];
var error = document.createElement('small');
+ var submitButton = form.getElementsByTagName('button')[0];
if (prevError) {
prevError.parentNode.removeChild(prevError);
}
- error.classList.add('small','red','text-center');
+ error.classList.add('popover', 'bottom', 'in', 'small','red','text-center');
error.innerHTML = resultMessage;
- form.appendChild(error);
+ submitButton.appendChild(error);
analytics.ready(function() {
analytics.track('Error ' + formName + '-list form', {error: resultMessage, clientId: ga.getAll()[0].get('clientId')});
diff --git a/src/styles/components/popover.scss b/src/styles/components/popover.scss
index d89439d3..a012feae 100644
--- a/src/styles/components/popover.scss
+++ b/src/styles/components/popover.scss
@@ -90,6 +90,13 @@
visibility: hidden;
z-index: 100;
+ &.in {
+ opacity: 1;
+ transform: scale3d(1,1,1) translate3d(-50%,0,0);
+ transition: all .15s ease-in-out;
+ visibility: visible;
+ }
+
&.bottom {
box-shadow: 0 1px 3px rgba($black,.1);
top: calc(100% + 12px);
diff --git a/src/styles/pricing/pricing-hero.scss b/src/styles/pricing/pricing-hero.scss
index 5e049605..8d1a6f14 100644
--- a/src/styles/pricing/pricing-hero.scss
+++ b/src/styles/pricing/pricing-hero.scss
@@ -113,7 +113,7 @@
&.form {
.price-wrapper {
- margin-bottom: 11px;
+ margin-bottom: 20px;
padding-top: 20px;
}
@@ -137,16 +137,16 @@
}
}
- .divider {
- background: $gray-lightest;
- height: 1px;
- margin: auto 0 20px;
- width: 100%;
- }
-
.input {
margin-bottom: 10px;
}
+
+ .popover {
+ line-height: 1.4;
+ white-space: normal;
+ width: 100%;
+ word-wrap: break-word;
+ }
}
.sup {