Kontaktní formulář (contact-form + form)

Rozdělíme si na 2 moduly - contact-form a form. Form bude definovat základní vzhled inputů a věcí pro formuláře na webu, contact-form bude specifikovat vzhled formuláře jako sekce.

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">
					Nadpis formuláře
				</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">
								Popisek inputu
								<input class="form__input" type="text">
							</label>
						</div>

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

						<div class="form__item --w-12">
							<label class="form__label">
								Popisek inputu
								<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">
								Popisek textarea
								<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">
									 Odesláním ouhlasím se zpracováním údajů
								</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">
								Text tlačítka
							</span>
						</label>

					</div>
				</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;
	}
}

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*