Contact form (contact-form + form)

We will divide it into 2 modules - contact-form and form. Form will define the basic appearance of inputs and things for forms on the site, contact-form will specify the appearance of the form as a section.

HTML / Latte

<section class="contact-form --bg-light" id="contact_form">
	<div class="contact-form__content --content">

		<div class="contact-form__column --w-12 --w-m-10 --offset-m-1">
			<div class="contact-form__box icon icon--logo">

				<h2 class="contact-form__title">
					Form title
				</h2>


				<form class="form form--contact --row">
					<div class="form__column --w-12 --w-m-5 --column">
						<div class="form__item --w-12">
							<label class="form__label">
								Input label
								<input class="form__input" type="text">
							</label>
						</div>

						<div class="form__item --w-12">
							<label class="form__label">
								Input label
								<input class="form__input" type="text">
							</label>
						</div>

						<div class="form__item --w-12">
							<label class="form__label">
								Input label
								<input class="form__input" type="text">
							</label>
						</div>
					</div>

					<div class="form__column --w-12 --w-m-7 --column">

						<div class="form__item --w-12">
							<label class="form__label">
								Textarea label
								<textarea class="form__textarea" type="text"></textarea>
							</label>
						</div>
					</div>

					<div class="form__column form__column--bottom --flex-inline --flex-centre-y --w-12 --column" >

						<div class="form__item form__item--terms">
								<span class="form__terms">
					                By sending I agree to the data processing
								</span>
						</div>

						<label class="form__item form__item--button">
							<input type="submit" class="--hide">
							<span class="form__button button button--light button--arrow button--line button--right">
								Button text
							</span>
						</label>

					</div>
{input email}
				</form>

			</div>
		</div>

	</div>
</section>

CSS / SCSS

.contact-form__box{
	
	padding: 40px 0;
	margin: auto;
	
	@include media($large){
		padding: 60px 0;
	}
}

.contact-form__title{
	margin: 0 0 20px 0;
}

/* Form | Input */

.form__input {
	height: 54px;
	width: 100%;
	
	.form--search &{
		padding: 8px 12px 8px 40px;
		font-size: 1.2rem;
		
		@include media(370px){
			font-size: 1.5rem;
		}
	}
}


.form__label{
	font-size: 1.4rem;
	display: block;
}



.form__input, .form__textarea {
	display: block;
	background: #fff;
	border: 2px solid $color__gray;
	color: $color__text;
	font-size: 1.5rem;
	padding: 8px 12px;
	width: 100%;
	
	.form--contact &{
		margin: 5px 0 10px 0;
	}
}

.form__wrap{
	margin: 0 0 30px 0;
}


.form__textarea{
	height: 230px;
}

/* Form | Button */

.form__button{
	background: $color__text;
	text-transform:uppercase;
	font-size: 1.3rem;
	color: #fff;
	padding: $offset__tiny $offset__large;
	
	
	.form--search &{
		margin-left: -2px;
	}
	
	&:hover, &:focus{
		background: $color__text-dark;
	}
}

.form__error-text{
	font-size: 1.3rem;
	color: $color__danger;
	display: flex;
	align-items: center;
	margin: 0 0 6px 0;
	
	
	&::before{
		@include pseudo(block, static);
		width: 14px;
		height: 12px;
		margin: 0 5px 0 0;
		background: url("/img/alert.svg") 0/cover;
	}
}



.form__button-wrap{
	padding-top: 20px;
}

.form__item{
	font-size: 1.4rem;
}

.form__item--terms{
	max-width: 330px;
	margin: 10px 25px 10px 0;
}

.form__item--button{
	margin-left: auto;
}

.form__bottom{
	.order &{
		margin-bottom:20px;
	}
}