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