Adds message on submit of contact form

dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html

@@ -26,8 +26,8 @@
 			</div>
 		</div>
 		<div *ngIf="!isDialog" class="row contact-actions">
-			<div class="ml-auto col-auto"><button mat-raised-button type="button" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
+			<div class="ml-auto col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
-			<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!formGroup.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
+			<div class="col-auto"><button mat-raised-button type="button" class="send-btn" [ngClass]="{'send-btn-disabled': !formGroup.valid}" [disabled]="!formGroup.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
 		</div>
 	</div>
 </form>

dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.scss

@@ -22,3 +22,38 @@ img {
 .contact-actions {
   padding-right: 1em;
 }
+
+.send-btn {
+	background: #ffffff 0% 0% no-repeat padding-box;
+	border: 1px solid #129d99;
+	border-radius: 30px;
+	opacity: 1;
+	width: 101px;
+	height: 43px;
+	color: #129d99;
+	font-weight: 500;
+}
+
+.send-btn-disabled {
+    width: 6.64em;
+    height: 2.93em;
+    background: #FFFFFF;
+    border: 1px solid #B5B5B5;
+    border-radius: 30px;
+    font-weight: bold;
+    letter-spacing: -0.35px;
+    color: #B5B5B5;
+	margin-bottom: 0.25em;
+	cursor: default;
+}
+
+.cancel-btn {
+	background: #ffffff 0% 0% no-repeat padding-box;
+	border: 1px solid #B5B5B5;
+	border-radius: 30px;
+	opacity: 1;
+	width: 101px;
+	height: 43px;
+	color: #212121;
+	font-weight: 500;
+}

dmp-frontend/src/assets/splash/contact.html

@@ -66,7 +66,9 @@
             <div class="col ">
                 <div class="page-title">Contact</div>
 			</div>
-			<form class="form" method="POST" action="/api/contactEmail/public">
+
+			<iframe name="hiddenFrame" class="hide"></iframe>
+			<form class="form" method="POST" action="/api/contactEmail/public" target="hiddenFrame" onsubmit="emailSend()">
 				<div class="main-contact">
 					<div class="col page-subtitle">
 						<div>Contact us to learn more</div>

dmp-frontend/src/assets/splash/css/contact.css

@@ -20,3 +20,11 @@
     font-size: 1.12rem;
     color: #212121;
 }
+
+.hide {
+	position:absolute;
+	top:-1px;
+	left:-1px;
+	width:1px;
+	height:1px;
+}

dmp-frontend/src/assets/splash/js/scripts.js

@@ -1,49 +1,49 @@
 function toggleClass(ids, option) {
-    ids.forEach(id => {
+	ids.forEach(id => {
-        var element = document.getElementById(id);
+		var element = document.getElementById(id);
-        var className = element.getAttribute("class").replace(/ .*/, '');
+		var className = element.getAttribute("class").replace(/ .*/, '');
-        if (id === option) {
+		if (id === option) {
-            element.classList.replace(className, "selected");
+			element.classList.replace(className, "selected");
-        } else {
+		} else {
-            element.classList.replace(className, "not-selected");
+			element.classList.replace(className, "not-selected");
-        }
+		}
-    })
+	})
 }
 
 function navbarCollapse() {
-    var element = document.getElementById('nav');
+	var element = document.getElementById('nav');
-    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+	if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-        element.classList.add("navbar-shrink");
+		element.classList.add("navbar-shrink");
-        element.classList.add("fixed-top");
+		element.classList.add("fixed-top");
-    } else {
+	} else {
-        element.classList.remove("navbar-shrink");
+		element.classList.remove("navbar-shrink");
-        element.classList.remove("fixed-top");
+		element.classList.remove("fixed-top");
-    }
+	}
 };
 navbarCollapse();
 window.onscroll = function () { navbarCollapse() };
 
 function dropdownToggle(dropdownId) {
-    this.closeOpenDropdowns();
+	this.closeOpenDropdowns();
-    document.getElementById(dropdownId).classList.toggle("show");
+	document.getElementById(dropdownId).classList.toggle("show");
 }
 
 function closeOpenDropdowns() {
-    var dropdowns = document.getElementsByClassName("dropdown-content");
+	var dropdowns = document.getElementsByClassName("dropdown-content");
-    var i;
+	var i;
-    for (i = 0; i < dropdowns.length; i++) {
+	for (i = 0; i < dropdowns.length; i++) {
-        var openDropdown = dropdowns[i];
+		var openDropdown = dropdowns[i];
-        if (openDropdown.classList.contains('show')) {
+		if (openDropdown.classList.contains('show')) {
-            openDropdown.classList.remove('show');
+			openDropdown.classList.remove('show');
-        }
+		}
-    }
+	}
 }
 
 // Close the dropdown if the user clicks outside of it
 window.onclick = function (event) {
-    if (!event.target.matches('.dropbtn')) {
+	if (!event.target.matches('.dropbtn')) {
-        this.closeOpenDropdowns();
+		this.closeOpenDropdowns();
-    }
+	}
 }
 
 // Slideshow per 3 sec, stops on option click
@@ -51,8 +51,10 @@ window.onload = function slideImages() {
 	var x = -1;
 	slides = setInterval(function displayNextImage() {
 		x = (x === images.length - 1) ? 0 : x + 1;
-		document.getElementById('template-preview').src = images[x];
+		if (document.getElementById('template-preview')) {
-		toggleClass(['id1','id2','id3'], 'id'.concat((x + 1).toString()));
+			document.getElementById('template-preview').src = images[x];
+			toggleClass(['id1', 'id2', 'id3'], 'id'.concat((x + 1).toString()));
+		}
 	}, 3000);
 }
 
@@ -61,3 +63,8 @@ var images = [];
 images[0] = 'assets/img/template-preview-1.svg';
 images[1] = 'assets/img/template-preview-2.svg';
 images[2] = 'assets/img/template-preview-3.svg';
+
+
+function emailSend() {
+	alert("The form was submitted");
+}