Blog

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.

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 for animation. You're likely already using it on your site.
2. jQuery UI Shake Effect
   You either need to use jQuery UI or simply add this snippet which has extracted the shake effect from jQuery UI for you.
3. Bootstrap 3 (cdn)
   If you aren't using Bootstrap on your site, you can use this isolated version of bootstrap. You don't have to use Bootstrap, but it will be easier to follow this tutorial if you do.

The header of your webpage should look something like this:

<!--  jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1 ...

Read More

How to Customize a Field's Focus Color in a Bootstrap Form

This tutorial will teach you how to customize the the focus color and drop shadow in a Bootstrap form field. By default, a Bootstrap form field is blue with a drop shadow and looks like this when it is in focus:

Overall, this is a pretty clean modern look. However, it can look out of place if your site uses a different color palette or aesthetic vibe. For example, suppose you're using a green submit button via .btn-success:

Suddenly, the blue looks out of place. Moreover, the drop shadow on the input is not really consistent with the flat button. It looks much better after we remove the drop shadow and change the <input> focus color to match the green in the submit button.

This can be done using our free Bootstrap form builder or by coding the CSS by hand. I'll demonstrate both approaches.

Fast and Easy Approach: Bootstrap Form Builder

You can create a form with custom focus color and shadow fields with our form builder by following these simple steps:

1. Go to https://formden.com/form-builder/. You'll start with a default contact form. Customize the fields as you like.
2. Click on the Settings tab ...

Read More