In this tutorial we’ll show you how a little bit of CSS animation, can make your entire form stand out, or just a single form element get the attention it deserves with CSS animations. We had an amazing response from our recent CSS tutorial on custom Gravity Forms CSS styles so wanted to extract some of the animation elements from that tutorial and show you how to add subtle animations to your next Gravity Forms.
Adding the CSS
Every design has the required CSS listed below. If you’re not already using Image Choices, you can add the custom CSS to your theme in a few ways suggested below:
- Install a custom CSS plugin such as Simple Custom CSS
- Add your CSS using your theme editor or customiser
- User the Image Choice custom CSS setting if you are adding Images to your choices
Add wiggle to your form elements with CSS
Add a subtle wiggle animation to your form elements with CSS. We’ve added them to the submit buttons in the demo below but you can add these animation effects to any of the elements in your form.
Add pulsating effect to your form with CSS
Add an obvious pulsing effect with CSS to your Gravity Forms. This effect works really nicely in situations where you want to also bring attention to certain elements from within your form. Use it sparingly so as to not become too over baring.
Applying the CSS pulse effect to your fields
To add the pulse effect, simply add the class name pulse to any of the fields you’d like to add it to. You can do this by adding a custom class name to the field as shown in the screenshot below.
Add a CSS animated gradient to your form background
Really want to showcase your form and have it visually stand out? This CSS snippet will give your form background a dynamic CSS gradient that slowly fades through colors. Just copy/paste the below CSS snippet, and add the CSS class gradient to your form settings as shown below.
Summary & other CSS articles
Be sure to comment, share and send your finished examples on social media, or in the comments below! We’d love to see what you make of these examples!