Additional blocks for Berry CSS, Albireo CMS and MF-template
<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>Cyan</option>
                    <option>Magenta</option>
                    <option>Yellow</option>
                    <option>Black</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>

MaxSite.org © 2006-2026