Form Block: Email Verification Field

This is free code. But you can pay me to get priority support + free install + free customize. Send me an email via this form if you have any problems.

To add an email verification field in Form Block, like this.

v2-361-8-1

#1. First, you can find ID of Form Block

v2-361-8-2

#2. Next, use this code to Custom CSS

/* email verification */
.confirm-email-field {
    margin-top: 20px;
}
.error-message {
    color: #d63638;
    font-size: 14px;
    margin-top: 8px;
    display: none;
}
.confirm-email-field.has-error .ngonnDl0lqs7ZArA {
    border-color: #d63638;
}
.confirm-email-field.has-error .form-input-effects-border {
    background-color: #d63638;
}

v2-361-8-3-min

#3. Next, use this code to Page Header Injection (Page where you use Form Block). Or Code Injection > Footer

Remember to change Form Block ID.

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        const emailField = document.querySelector('#block-yui_3_17_2_1_1751589096008_2636 .email');
        
        if(emailField){const e=emailField.cloneNode(!0);e.classList.add('confirm-email-field');e.id='confirm-email-field';const t=e.querySelector('.SP08ZLkhAnk2Rqaf span:first-child');t&&(t.textContent='Confirm Email');const n=e.querySelector('input[type="email"]');n.id='confirm-email-input';n.name='confirm-email';n.value='';const o=e.querySelector('.option');o&&o.remove();const l=document.createElement('div');l.className='error-message';l.textContent='Email does not match. Please try again.';e.appendChild(l);emailField.parentNode.insertBefore(e,emailField.nextSibling);const r=emailField.querySelector('input[type="email"]'),i=e.querySelector('input[type="email"]');function c(){const e=r.value.trim(),t=i.value.trim();t&&e!==t?(e.classList.add('has-error'),l.style.display='block',i.setAttribute('aria-invalid','true')):(e.classList.remove('has-error'),l.style.display='none',i.setAttribute('aria-invalid','false'))}r.addEventListener('input',c);i.addEventListener('input',c);i.addEventListener('blur',c);const a=emailField.closest('form');a&&a.addEventListener('submit',function(t){c();e.classList.contains('has-error')&&(t.preventDefault(),i.focus())})}
    }, 1000);
});
</script>

v2-361-8-4

Ask me a question, free