Bootstrap 4 Implementation

Created by Alison Gianotto, Modified on Wed, 17 Dec, 2025 at 2:42 PM by Brady Wetherington

The test box on the GoodForms.Com homepage is a good example of a Bootstrap 4 implementation.

Form code:

<script src="https://unpkg.com/goodforms@0.9.2"></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>