Form
Classic form
Markup: ..\..\styleguide\templates\organisms\form.html
<form action="/wordpress4.8/forms/#wpcf7-f1885-p1886-o1" method="post" class="rocksite-o-form wpcf7-form">
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-input ">
<label for="input_text" class="rocksite-m-label-input__label">Your Name</label>
<input type="text" value="" id="input_text" name="your-name" placeholder="" class="rocksite-a-input rocksite-m-label-input__input">
</div>
</div>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-input ">
<label for="input_surname" class="rocksite-m-label-input__label">Your Surname</label>
<input type="text" value="" id="input_surname" name="your-surnname" placeholder="" class="rocksite-a-input rocksite-m-label-input__input">
</div>
</div>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-input ">
<label for="input_email" class="rocksite-m-label-input__label">Your E-mail</label>
<input type="email" value="" id="input_email" name="your-surnname" placeholder="" class="rocksite-a-input rocksite-m-label-input__input">
</div>
</div>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-select ">
<label for="input_text" class="rocksite-m-label-select__label">Select this option</label>
<select name="select_option" class="rocksite-a-select rocksite-m-label-input__select" aria-label="Shop order">
<option value="first-option">
First option
</option>
<option value="second-option" selected="selected">
Second option
</option>
<option value="third-option">
Third option
</option>
<option value="fourth-option">
Fourth option
</option>
</select>
</div>
</div>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-textarea ">
<label for="input_text" class="rocksite-m-label-textarea__label">Your Message</label>
<textarea class="rocksite-a-textarea rocksite-m-label-textarea__textarea" id="input_text" name="your-message" rows="" placeholder="" aria-invalid="false"></textarea>
</div>
</div>
<fieldset class="rocksite-o-form__fieldset">
<h5 class="rocksite-a-heading -h6 rocksite-o-form__fieldset__title">Which option do you prefer</h5>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-radio ">
<input name="radio_name" type="radio" value="Option 1" id="input_radio1" /><label class="rocksite-m-label-radio__label" for="input_radio1">Option 1</label>
</div>
</div>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-radio ">
<input name="radio_name" type="radio" value="Option 2" id="input_radio2" /><label class="rocksite-m-label-radio__label" for="input_radio2">Option 2</label>
</div>
</div>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-radio ">
<input name="radio_name" type="radio" value="Option 3" id="input_radio3" /><label class="rocksite-m-label-radio__label" for="input_radio3">Option 3</label>
</div>
</div>
</fieldset>
<fieldset class="rocksite-o-form__fieldset">
<h5 class="rocksite-a-heading -h6 rocksite-o-form__fieldset__title">Choose your preferences</h5>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-checkbox ">
<input name="checkbox_name1" type="checkbox" value="Option 1" id="input_checkbox1" /><label class="rocksite-m-label-checkbox__label" for="input_checkbox1">Option 1</label>
</div>
</div>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-checkbox ">
<input name="checkbox_name2" type="checkbox" value="Option 2" id="input_checkbox2" /><label class="rocksite-m-label-checkbox__label" for="input_checkbox2">Option 2</label>
</div>
</div>
<div class="rocksite-o-form__line">
<div class="rocksite-m-label-checkbox ">
<input name="checkbox_name3" type="checkbox" value="Option 3" id="input_checkbox3" /><label class="rocksite-m-label-checkbox__label" for="input_checkbox3">Option 3</label>
</div>
</div>
</fieldset>
<div class="rocksite-o-form__btn-line -btn-right">
<button class="rocksite-a-input-button " type="submit">Send Message</button>
</div>
</form>
../source/scss/components/organisms/_form.scss
, line 1