misha.korolcov,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.err{
border: 1px solid rgba(255, 0, 0, 1);
}
::-webkit-input-placeholder {color:#FFFFFF}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('#myForm input , #myForm textarea').css({'background-color' : 'rgba(153, 50, 204, 1)', 'color' : 'rgba(255, 255, 255, 1)'});
/* или так */
$('#myForm input , #myForm textarea').addClass('err');
});
</script>
</head>
<body>
<div>
<form id="myForm" onsubmit="send_form(); return false;" action="" method="POST">
<p class="mt-3 "> First name </p>
<div class="form-group">
<input type="text" class="form-control " name="first_name" id="first_name" placeholder=" Enter your first name" required min="2" max="30" id="first_name"><span id="validEmai"></span>
</div>
<p class="mt-3 "> Last name </p>
<div class="form-group">
<input type="text" class="form-control " name="last_name" id="last_name" placeholder=" Enter your last name " required min="2" max="30">
</div>
<p class="mt-3 "> Email </p>
<div class="form-group">
<div><input type="text" id="validate" required min="2" max="30"><span id="validEmail"></span></div>
</div><span id="validEmail"></span>
<p class="mt-3 ">Phone </p>
<div class="form-group">
<input type="number" class="form-control " name="phone" id="phone" placeholder="+ XX (XXX) XXX XX XX " required min="7">
</div>
<p class=" mt-5 border-bottom-main"> Your question </p>
<p class="mt-4 mb-2">Message</p>
<div class="form-group">
<textarea class="form-control" rows="6" name="message" placeholder="Enter your question" id="message" required="" min="4"></textarea>
</div>
<div class="row">
<div class="col-12 col-md-5 col-lg-5 offset-md-7 mt-4">
<button type="submit" class="button button-home">Submit </button>
</div>
</div>
</form>
</div>
</body>
</html>