<form class="wpis-form wpis-form-contact --extended" id="wpis-form-contact-extended">
    <div class="form-group form-group__gender">
        <label class="form-label" for="wpis-form-gender">{{ form.gender.label }}</label>
        <select name="gender" id="wpis-form-gender">
            <option value="none"></option>
            <option value="male">{{ form.gender.value.male }}</option>
            <option value="female">{{ form.gender.value.female }}</option>
            <option value="couple">{{ form.gender.value.couple }}</option>
            <option value="other">{{ form.gender.value.other }}</option>
        </select>
    </div>
    <div class="form-group form-group__firstname">
        <label class="form-label" for="wpis-form-firstname">{{ form.firstname.label }}<span class="form-mandatory">*</span></label>
        <input id="wpis-form-firstname" class="form-input" type="text" name="firstname" maxlength="30" required />
    </div>
    <div class="form-group form-group__lastname">
        <label class="form-label" for="wpis-form-lastname">{{ form.lastname.label }}<span class="form-mandatory">*</span></label>
        <input id="wpis-form-lastname" class="form-input" type="text" name="lastname" maxlength="30" required/>
    </div>
    <div class="form-group form-group__email">
        <label class="form-label" for="wpis-form-email">{{ form.email.label }}<span class="form-mandatory">*</span></label>
        <input id="wpis-form-email" class="form-input" type="text" name="email" maxlength="100" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required/>
    </div>
    <div class="form-group form-group__phone">
        <label class="form-label" for="wpis-form-phone">{{ form.phone.label }}<span class="form-mandatory">*</span></label>
        <input id="wpis-form-phone" class="form-input" type="text" name="phone" maxlength="30" />
    </div>
    <!-- Address -->
    <div class="form-group form-group__addressStreet">
        <label class="form-label" for="wpis-form-addressStreet">{{ form.addressStreet.label }}</label>
        <input id="wpis-form-addressStreet" class="form-input" type="text" name="addressStreet" maxlength="50" />
    </div>
    <div class="form-group form-group__addressNumber">
        <label class="form-label" for="wpis-form-addressNumber">{{ form.addressNumber.label }}</label>
        <input id="wpis-form-addressNumber" class="form-input" type="text" name="addressNumber" maxlength="10" />
    </div>
    <div class="form-group form-group__addressBox">
        <label class="form-label" for="wpis-form-addressBox">{{ form.addressBox.label }}</label>
        <input id="wpis-form-addressBox" class="form-input" type="text" name="addressBox" maxlength="10" />
    </div>
    <div class="form-group form-group__addressZip">
        <label class="form-label" for="wpis-form-addressZip">{{ form.addressZip.label }}</label>
        <input id="wpis-form-addressZip" class="form-input" type="text" name="addressZip" maxlength="10" />
    </div>
    <div class="form-group form-group__addressCity">
        <label class="form-label" for="wpis-form-addressCity">{{ form.addressCity.label }}</label>
        <input id="wpis-form-addressCity" class="form-input" type="text" name="addressCity" maxlength="10" />
    </div>
    <!-- /Address -->
    <div class="form-group form-group__message">
        <label class="form-label" for="wpis-form-message">{{ form.message.label }}<span class="form-mandatory">*</span></label>
        <textarea id="wpis-form-message" class="form-input" name="message" minlength="5" maxlength="400"></textarea>
    </div>
    <div class="form-group form-group__policyConcent">
        <label class="form-label" for="wpis-form-policy-concent">{{ form.policy.label }}<span class="form-mandatory">*</span></label>
        <div class="form-group">
            <input id="wpis-form-policy-concent" type="checkbox" class="form-input" name="policy-concent" required>
            <label for="wpis-form-policy-concent">{{ form.policy.value }}</label>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" class="form-input">{{ form.submit.value }}</button>
    </div>
    <span class="form-errors"></span>
</form>
<style>
    .wpis-form-contact.--extended .form-group {
        margin-bottom: 10px;
    }
    .wpis-form-contact.--extended .form-mandatory {
        color: #d9534f;
        margin-left: 7px;
    }
    .wpis-form-contact.--extended label {
        cursor: pointer;
    }
    .wpis-form-contact.--extended .form-group__policyConcent .form-group {
        display: flex;
        margin: 10px 0;
    }
    .wpis-form-contact.--extended .form-group__policyConcent .form-group label {
        margin-left: 10px;
        font-size: 15px;
    }
    .wpis-form-contact.--extended .wpis-form-success {
        color: #54b354;
        font-size: 22px;
        text-align: center;
        width: 100%;
        display: block;
        margin: 20px 0;
    }
</style>