How to Animate a Bootstrap Form with jQuery

Adding animation to an HTML form not only makes it looks slick but can help communicate to users when they've made a mistake. This tutorial will teach you how to create a Bootstrap Form and add animations to it.

  1. We'll add a shake when the form is submitted with errors.
  2. We'll fade out the form after it is successfully submitted.
  3. Then, we'll fade in a "thank you" message.

Animation of a Bootstrap Form

View Demo Customize Demo Online Download Demo

Requirements

To create our animated form, we'll need the following:

  1. jQuery 1.9+ (cdn)
    This popular JavaScript library is needed ...

Read More


How to Validate Form Fields Using jQuery

Update! FormDen can now automatically validate your form fields fields for you. Learn how!


Show warnings when fields aren't entered correctly

People make mistakes when they fill out forms. By validating form responses before accepting them, we can alert users to their errors before they submit the form. In this way, client side form validation can vastly improve the user experience. This article will explain some basics about form validation and then illustrate how to validate form fields using jQuery.

Use JavaScript Validation to improve UX

There are two types of validation: client side validation and server side validation ...

Read More


How to Create Conditional Form Fields with jQuery

Long forms are intimidating. An easy way to increase <form> conversions is by using conditional fields. Conditional fields are hidden by default and appear when they become relevant. They are a great way to make forms shorter and more personalized. For example, suppose you request customer feedback. Here is a demo with conditional fields, try it out:

Demo

Read More