<div class="blocks-utilities-02 wrapper bg-color-ui-01">
<div class="grid-container">
<!-- form -->
<form id="blocks-utilities-02-form" class="grid-x">
<div class="large-4 medium-6 small-12 utilities-form-holder">
<div class="spacer x-large"></div>
<h2 class="spacer x-small text-center">Forgot your password?</h2>
<p class="text-center">Enter your email address below and we'll get you back on track</p>
<div class="spacer x-large"></div>
<div class="grid-x">
<div class="large-12 medium-12 small-12 cell">
<ins-input validate id="email" field="email" label="Email" data-test="" name="email" value=""
placeholder="Email" error-message="Email is required">
</ins-input>
</div>
<div class="large-12 medium-12 small-12 cell text-center">
<div class="spacer small"></div>
<ins-button id="blocks-utilities-02-btn" label="SUBMIT" solid color="blue" type="submit" size="large"
data-test=""></ins-button>
<div class="spacer x-large"></div>
</div>
<div class="large-12 medium-12 small-12 cell text-center">
<p>
Back to <a>sign in</a>
</p>
</div>
</div>
</div>
</form>
<!-- /form -->
</div>
<div class="spacer x-large"></div>
</div>
.blocks-utilities-02 button[type='submit'] {
width: 100%;
}
.blocks-utilities-02 .ins-form-field-wrap.is-invalid .ins-form-error {
color: var(--color-error, #FF3366);
font-family: var(--font-family-03, sans-serif);
font-size: 12px;
line-height: 16px;
font-weight: 400;
}
var blocksUtilities02Form = document.getElementById('blocks-utilities-02-form');
var blocksUtilities02SubmitBtn = document.getElementById('blocks-utilities-02-btn');
blocksUtilities02Form.addEventListener('submit', validateForm);
async function validateForm(event) {
event.preventDefault();
// blocksUtilities02SubmitBtn.loading = true;
if(await WebBlocks.validation.validateForm(blocksUtilities02Form)) {
// form.submit();
console.log("form submit");
blocksUtilities02SubmitBtn.loading = true;
return true;
} else {
blocksUtilities02SubmitBtn.loading = false;
return false;
}
}