JSFiddle - React, Tailwind, and code Playground

HTML

<label for="checkbox">
    <span>Заказать этот товар</span>
</label>
<input type="checkbox" id="checkbox" />
<form>
    <span>Имя</span>
    <input name="name" type="text" />
    
    <span>Телефон</span>
    <input name="tel" type="tel" />
    
    <span>Эл.почта</span>
    <input name="email" type="text" /> 
    
    <span>Примечание к заказу</span>
    <textarea name="note" cols="30" rows="3"></textarea>
    
    <span class="message" id="noname">Введите имя.</span>
    <span class="message" id="notel">Введите телефон.</span>
    <span class="message" id="wrongtel">Введён некоректный телефон.</span>
    <span class="message" id="noemail">Введите адрес эл.почты.</span>
    <span class="message" id="wrongemail">Введён некоректный адрес эл.почты.</span>
    <span class="message" id="success">Ваш заказ отправлен. В ближайшее время Вам перезвонит наш мессежер.</span>
    
    <button>Отправить заявку</button>
</form>

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    margin: 20px;
}
body * {
    font-size: 1.1em;
    font-family: Arial;
}
input[type=checkbox] {
    display: none;
}
label {
    background: rgb(241, 42, 35);
    color: white;
    padding: 5px;
    padding-bottom: 7px;
    cursor: pointer;
    display: inline-block;
}
label span {
    border-bottom: 1px dashed white;
}
form {
    display: none;
}
input:checked + form {
    display: block;
}
form {
    background: lightgray;
    border: 1px solid dimgrey;
    padding: 10px;
    margin-top: -1px;
}
form input, form textarea {
    display: block;
    margin-bottom: 10px;
}
form textarea {
    resize: vertical;
}
form span {
    font-size: 0.7em;
    color: dimgrey;
}
form button {
    background: rgb(241, 42, 35);
    border: none;
    color: white;
    padding: 5px;
    font-weight: bold;
    cursor: pointer;
}
span.message {
    display: none;
    color: red;
    margin-bottom: 10px;
}
span.message#success {
    color: green;
}

JavaScript

var form = document.querySelector("form");
var name = document.querySelector("input[name=name]");
var tel = document.querySelector("input[name=tel]");
var email = document.querySelector("input[name=email]");
var note = document.querySelector("textarea");
form.onsubmit = function()
{
    document.querySelector("span.message#noname").style.display = "none";
    document.querySelector("span.message#notel").style.display = "none";
    document.querySelector("span.message#wrongtel").style.display = "none";
    document.querySelector("span.message#noemail").style.display = "none";
    document.querySelector("span.message#wrongemail").style.display = "none";
    document.querySelector("span.message#success").style.display = "none";
    if(name.value.length == 0)
    {
        document.querySelector("span.message#noname").style.display = "block";
        return false;
    }
    if(tel.value.length == 0)
    {
        document.querySelector("span.message#notel").style.display = "block";
        return false;
    }
    if(!(/^\+?[0-9]{3}-?[0-9]{6,12}$/.test(tel.value)))
    {
        document.querySelector("span.message#wrongtel").style.display = "block";
        return false;
    }
    if(email.value.length == 0)
    {
        document.querySelector("span.message#noemail").style.display = "block";
        return false;
    }
    if(!(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email.value)))
    {
        document.querySelector("span.message#wrongemail").style.display = "block";
        return false;
    }
    success = function()
    {
        document.querySelector("span.message#success").style.display = "block";
    }
    
    
    
    
    
    
    //Здесь AJAX с callback success
    
    
    
    
    success(); //Убрать!!!
    return false;
}