<!DOCTYPE html>
<html>
<head>
	<title>Contact</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta name="author" content="Jovan Petkovic">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div id="left">
			<h3>Have Questions?</h3>
			<img src="https://i.imgur.com/KeYHrAJ.png">
		</div>
		<form method="POST" name="form" id="form">
			<label>Name</label>
			<input type="text" name="name">
			<label>Email</label>
			<input type="email" name="email">
			<label>Message</label>
			<textarea></textarea>
			<button type="button">submit</button>
		</form>
	</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html {font-size: 1em;}

body {
  background-color: #f9f9f9;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
}

p {margin-bottom: 1.3em;}

h1, h2, h3, h4 {
  margin: 1.414em 0 0.5em;
  font-weight: inherit;
  line-height: 1.2;
}

h1 {
  margin-top: 0;
  font-size: 3.998em;
}

h2 {font-size: 2.827em;}

h3 {font-size: 1.999em;}

h4 {font-size: 1.414em;}

small, .font_small {font-size: 0.707em;}

.container{
  width: 660px;
  height: 400px;
  position: absolute;
  top: 50%;
  margin-top: -200px;
  left: 50%;
  margin-left: -330px;
  background-image: url('https://i.imgur.com/rwSBkM8.png');
  display: flex;
  align-items: center;
}

form{
  width: 300px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
}

label{
  margin-left: 5px;
}

input{
  box-sizing: border-box;
  padding-left: 5px;
  width: 100%;
  background-color: #f5f7f4;
  border: none;
  border-radius: 10px;
  height: 30px;
  margin-bottom: 20px;
}

textarea{
  resize: none;
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  background-color: #f5f7f4;
  border: none;
  border-radius: 10px;
  height: 100px;
  margin-bottom: 20px;
  font-family: "Open Sans", sans-serif;
}

button{
  text-transform: uppercase;
  width: 200px;
  margin: 0 auto;
  height: 40px;
  font-weight: bold;
  color: white;
  background-color: #a7192b;
  border: none;
  border-radius: 10px;
  box-shadow: 1px black;
  cursor: pointer;
}

#left{
  margin: 0 0 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

img{
  margin-top: 20px;
  margin-bottom: 130px;
  margin-left: -400px;
  opacity: 0;
  transition: 2s all;
}

.slide{
  opacity: 1;
  margin-left: 0;
}

p{
  margin-top: -15px;
  margin-bottom: 0;
  color: red;
}

@media screen and (max-width: 660px){
  .container{
    flex-direction: column;
    background: white;
    height: auto;
    width: 100%;
    position: static;
    margin: 0;
  }

  #left{
    margin-left: 0;
  }

  img{
    margin-bottom: 20px;
  }

  h3{
    margin-top: 10px;
  }

  form{
    margin-top: 0;
  }
}
var button = document.querySelector('button'),
	img = document.querySelector('img'),
	form = document.querySelector('form'),
	nameObj = form.elements[0],
	emailObj = form.elements[1],
	textareaObj = form.elements[2];

img.className += " slide";

button.addEventListener('click',function(){
	var p = form.querySelector('p');
	if(p){
		form.removeChild(p);
		nameObj.style="";
		emailObj.style="";
		textareaObj.style="";
	}
	if(checkParams()){
		img.className -= " slide";
		setTimeout(function(){
			form.submit();
		},2000);
	}
});

function checkParams(){
	var error = document.createElement("p");
	console.log(nameObj.value);
	var re = /\S+@\S+\.\S+/;
	if(!nameObj.value){
		var labelName = document.querySelectorAll('label')[1];
		console.log(labelName);
		var node = document.createTextNode("*Name is required");
		error.appendChild(node);
		form.insertBefore(error, labelName);
		nameObj.style = "border: 1px solid red";
	}else if(!emailObj.value){
		var labelEmail = document.querySelectorAll('label')[2];
		var node = document.createTextNode("*Email is required");
		error.appendChild(node);
		form.insertBefore(error, labelEmail);
		emailObj.style = "border: 1px solid red";
	}else if(!re.test(emailObj.value)){
		var label = document.querySelectorAll('label')[2];
		var node = document.createTextNode("*Enter a valid email adress");
		error.appendChild(node);
		form.insertBefore(error, label);
		emailObj.style = "border: 1px solid red";
	}else if(!textareaObj.value){
		var node = document.createTextNode("*You need to write a message");
		error.appendChild(node);
		form.insertBefore(error, button);
		textareaObj.style="border: 1px solid red";
	}else{
		return 1;
	}

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.