Boostrap class for valid fields


#1

I customize the form embed code by adding some Boostrap class for fields on creation time (using onFormReady) and errorClass property

hbspt.forms.create({
  …
  errorClass: 'form-control form-control-danger',
  errorMessageClass: 'form-text text-muted',
  submitButtonClass: 'btn btn-primary btn-block',
  onFormReady: function onFormReady($form, ctx) {
    $form.find('.hs-form-field').addClass('form-group')
    $form.find('.hs-input').addClass('form-control')
    …
  }
})

After the error gets corrected, its class reset to hs-input. Is there a good workaround?


#2

I added this to your onFormReady event...

$form.find(".hs-input").on("change paste keyup", function(event) {
$form.find(".hs-input").addClass("form-control");
});

Not a great fix but it works.