<div class="form form--horizontal contact-form" >
	<h3>Personal Information</h3>

	<div class="form__group">
		<div class="col-xl-3 col-lg-12 no-padding-left">
			<p>* = mandatory fields</p>
		</div>
		<div class="col-xl-9 col-lg-8 col-sm-10 no-padding">
			<p class="form__error-message">
				Invalid or missing data. Please check the form.
			</p>
		</div>
	</div>

	<div class="form__group">
		<div class="col-xl-3 no-padding-left">
			{{ render "molecules/forms/form-group-label" classes="form__label" text="Salutation*" }}
		</div>
		<div class="col-xl-9 col-lg-8 col-sm-10 no-padding">
			{{ render "molecules/forms/form-option" inputType="radio" inputId="mister" inputName="salutation" inputClasses="form-field" inputValidators="required data-vl-errors-messages-disabled" labelText="Mr." }}
			{{ render "molecules/forms/form-option" inputType="radio" inputId="miss" inputName="salutation" inputClasses="form-field" inputValidators="required data-vl-errors-messages-disabled" labelText="Ms." }}
		</div>
	</div>

	{{ render "molecules/forms/form-group" inputId="first-name" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="First name" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="data-vl-errors-messages-disabled" }}

	{{ render "molecules/forms/form-group" inputId="last-name" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Last name*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}

	{{ render "molecules/forms/form-group-email" inputId="email" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="E-mail address*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" }}


	{{ render "molecules/forms/form-group" inputId="phone" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Telephone" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="data-vl-errors-messages-disabled" }}

	<h3>Your message</h3>
	{{ render "molecules/forms/form-group" inputId="subject" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Subject*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" inputType="text" inputClasses="form__text form-field" inputValidators="required data-vl-errors-messages-disabled" }}
	{{ render "molecules/forms/form-group" inputId="message" labelClasses="form__label col-xl-3 col-sm-10 no-padding-left" labelText="Message*" containerClasses="col-xl-9 col-lg-8 col-sm-10 no-padding" textarea=true inputClasses="form__text-area form-field" inputValidators="required data-vl-errors-messages-disabled" }}



	<div class="form__group">
		<div class="col-xl-3"></div>
		<div class="col-xl-9 col-lg-8 col-sm-10 no-padding">
			{{ render "molecules/forms/form-option"  inputValidators="required data-vl-errors-messages-disabled" inputClasses="form-field" inputType="checkbox" inputId="policy-terms" labelText="Yes, I agree to <a href='javascript:;'>the terms of use</a> and the <a href='javascript:;'>data protection policy.*</a>" }}


			{{ render "atoms/global/space:hr" space=18 }}
		</div>
	</div>

	{{ render "molecules/forms/form-group-buttons" submitText="Send" submitClasses="submit-form" cancelLink=true }}
</div>

{{#unless nojs }}
<script>
	window.addEventListener('load', function() {
	/**
	 * START - REQUIRED JS SNIPPET
	 */
	{{ render "atoms/scripts/script-contact-form" }}
	 /**
	  * END - REQUIRED JS SNIPPET
	  */
	});
</script>
{{/unless }}
