<script src="https://cdn.goodforms.com/verify.js"></script>


<form>
    <div class="input-group">
        <input class="form-control" type="email" name="email" placeholder="Enter your email..." id="try-it">
        <button type="button" class="btn btn-dark">Verify</button>
    </div>

    <div class="valid-feedback" style="display: none;">
       <i class="fa fa-check" aria-hidden="true"></i> That email is valid!
    </div>

    <div class="invalid-feedback" style="display: none;">
       <i class="fa fa-times" aria-hidden="true"></i> Invalid email
    </div>

    <div class="too-many-verifications" style="display: none;">
        <i class="fa fa-warning" aria-hidden="true"></i> Too many verifications - please try back a little later
    </div>
</form>

<script>
$(function () {
    Goodforms('FORM-API-KEY', {
        email_field: 'try-it', 
        debug: true,

        onChallenge: function () {
            $('.invalid-feedback').hide();
            $('.valid-feedback').hide(200);
            $('.too-many-verifications').show(200);
            return false // do *NOT* fire default behavior
        },
        onGood: function () {
            $('.too-many-verifications').hide();
            $('.invalid-feedback').hide();
            $('.valid-feedback').fadeIn(200);
            return false;
        },
        onBad: function() {
            $('.too-many-verifications').hide();
            $('.valid-feedback').hide();
            $('.invalid-feedback').fadeIn(200);
            return false;
        }
    })
})
</script>