Формы

<form method="post">
	<div class="mar20-t">
        <label class="flex flex-vcenter flex-wrap">
            <div class="flex-basis150px w100-tablet">Name *</div> 
            <input class="flex-grow3 form-input" type="text" name="myform[name]" placeholder="name..." required>
        </label>
    </div>
	
	<div class="mar20-t">
        <label class="flex flex-vcenter flex-wrap">
            <div class="flex-basis150px w100-tablet">Email</div> 
            <input class="flex-grow3 form-input" type="email" name="myform[email]" placeholder="email..." required>
        </label>
    </div>    
    
    <div class="mar20-t">
        <label class="flex flex-wrap">
            <div class="flex-basis150px w100-tablet">Message</div> 
            <textarea class="flex-grow3 h100px form-input" name="myform[text]" placeholder="message..."></textarea>
        </label>
    </div>
    
    <div class="mar20-t">
        <label class="flex flex-wrap">
            <div class="flex-basis150px w100-tablet">Choose an option</div>
            <div class="flex-grow3">
                <select class="w100 form-input">
                    <option>Choose an option</option>
                    <option>Slack</option>
                    <option>Skype</option>
                    <option>Hipchat</option>
                </select>
            </div>
        </label>
    </div>
	
    <div class="mar20-t">
        <label class="flex flex-wrap">
            <div class="flex-basis150px w100-tablet">You site</div>
            <div class="flex-grow3">
               <div class="b-flex w100">
					<div class="b-inline-flex flex-ai-center bordered rounded5-l bg-gray100 pad10-rl t90 t-gray500 bor-none-r">https://</div>
					<input class="rounded0 rounded5-r form-input bor-none-l flex-grow5" type="text" name="myform[site]" placeholder="example.com...">
				</div>
            </div>
        </label>
    </div>	
	    
     <div class="mar20-t flex">
        <div class="flex-basis150px hide-tablet"></div>
        
        <div class="flex-grow3 w100-tablet">
            <label class="form-checkbox">
                <input type="checkbox">
                <span class="form-checkbox-icon bg-gray200"></span> gray
            </label>
            
            <label class="form-checkbox mar20-l">
                <input type="checkbox">
                <span class="form-checkbox-icon bg-blue200"></span> blue
            </label>
            
            <label class="form-checkbox mar20-l">
                <input type="checkbox">
                <span class="form-checkbox-icon"></span> default
            </label>
            
            <label class="mar20-l">
                <input type="checkbox"> Standart checkbox
            </label>
            
        </div>   
    </div>   
    
     <div class="mar20-t flex">
        <div class="flex-basis150px hide-tablet"></div>
        
        <div class="flex-grow3 w100-tablet">
            <label class="form-radio">
                <input type="radio" name="myform[radio]" value="1">
                <span class="form-radio-icon bg-green300"></span> green
            </label>
            
            <label class="form-radio mar20-l">
                <input type="radio" name="myform[radio]" value="2">
                <span class="form-radio-icon bg-yellow300"></span> yellow
            </label>
            
            <label class="form-radio mar20-l">
                <input type="radio" name="myform[radio]" value="3">
                <span class="form-radio-icon"></span> default 
            </label>
            
            <label class="mar20-l">
                <input type="radio" name="myform[radio]" value="4"> Standart radio
            </label>
            
        </div>
    </div>
    
    <div class="mar20-t flex">
        <div class="flex-basis150px hide-tablet"></div>
        
        <div class="flex-grow3 w100-tablet">
            <label class="form-switch">
                <input type="checkbox">
                <span class="form-switch-icon"></span> form-switch-icon
            </label>
        </div>   
    </div>   
    
    <div class="mar20-t flex">
        <div class="flex-basis150px hide-tablet"></div>
        <div class="flex-grow3 w100-tablet"><button class="button bg-blue500 hover-bg-blue600 t-blue100 hover-t-white" type="submit">Отправить</button></div>
    </div>
</form>

<script>
if(document.addEventListener){
    document.addEventListener('invalid', function(e){
        e.target.classList.add("js-form-invalid");
    }, true);    
}
</script>