Custom Gravity Forms designs with CSS

August 29, 2022 by JetSloth

Custom Gravity Forms designs with CSS

With the most recent CSS tutorial and article we recently published, we had great feedback from users, so we wanted to do more for the Gravity Forms community. We’re pretty chuffed to release our biggest custom Gravity Forms designs with CSS demos for you all to use!

Style your custom Gravity Forms designs with CSS

Styling your Gravity Forms can sometimes be a little tricky, especially if the design is not your thing. Luckily, JetSloth’s got your back. We’ve designed 5 amazing-looking Gravity Forms, focused on lead generation, to be self-contained gems of a form to look great on your website.

We’ve designed these totally in the browser, so you don’t have to. Each demo comes with the required CSS needed, and also the form download so you can just import the form and be 80% of the way there!

Before we get started here are some helpful hints on how to best apply these styles, and how to use the demos on your website.

Before you start Custom Gravity Forms designs with CSS

The below designs and CSS examples were tested in Gravity Forms version 2.6.6 with the default WordPress 2022 theme installed. These demos only support Gravity Forms 2.6.6+. Depending on the theme you are using, you may get different end results. Some basic further CSS tweaking will likely be required to get the result you want. Using older versions of Gravity Forms will most likely lead to unwanted end results.

Form Downloads

Every demo comes with a packaged form download. All you need to do is download the form JSON file, and import it into your gravity Forms. If you’re already a JetSloth customer and using Image Choices, each demo form export has the CSS already included in the image choices custom CSS settings. So take advantage of that!

jetsloth-image-choices-custom-css

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:

Editing the colours, images, and text in the design

We’ve made editing and tweaking the CSS in the custom Gravity Forms styles as easy as possible.

Changing the custom CSS colors

We’ve added CSS variables to the top of every custom CSS form demo. Simply update the mentioned variables with the HEX color value you’d like to change.

Changing the background image

Because these demos are created with pure CSS, there’s no HTML markup changes needed so the image in the form is set to the forms background wrapper. To change this. upload your image, and update the URL as seen below.

Updating the text

All the text in the demo designs are managed in the Gravity Forms settings, within the form heading and form description. Change them there.

Custom Gravity Forms CSS demos

That’s it, enjoy the demos and download the forms to use the below forms in your websites!


1. Contact Form

Use a simple form image background within your custom CSS and overlay the form title and description over it. Add subtle animations to the submit button and top left icon. All this was done with no extra markup within Gravity Forms, just pure CSS.
Download Form

Love forms & design? Get in touch.

JetSloth is proudly a Certified Gravity Forms Add-on developer as of 2020. As of 2020, JetSloth is officially a Gravity Forms Certified Developer, as well as all of our Gravity, Forms Add-ons becoming Gravity Forms Certified.

Demo 1 CSS


2. Email Sign up

With a nice blue tone to match the background image, this simple email sign-up form only needs two fields and a stunning image to go with it.
Download Form

Get notified when we launch.

JetSloth is proudly a Certified Gravity Forms Add-on developer as of 2020. As of 2020, JetSloth is officially a Gravity Forms Certified Developer, as well as all of our Gravity, Forms Add-ons becoming Gravity Forms Certified.
  • This field is for validation purposes and should be left unchanged.

Demo 2 CSS


3. Login form with Image Choices

Get more complex by using these CSS styles with your user login forms. This demo also showcases how easy it is to add JetSloth’s Image Choices to your forms and elevate your form user experience.
Download Form

Get Started with your account

JetSloth is proudly a Certified Gravity Forms Add-on developer as of 2020. As of 2020, JetSloth is officially a Gravity Forms Certified Developer, as well as all of our Gravity, Forms Add-ons becoming Gravity Forms Certified.
  • This field is for validation purposes and should be left unchanged.

Demo 3 CSS


4. Simple Email Sign up

Like the previous email sign up Gravity Form styling, this example custom CSS theme is super minimal and takes up less height and space on your website.
Download Form

Sign up to get 10% off.

JetSloth is proudly a Certified Gravity Forms Add-on developer as of 2020. As of 2020, JetSloth is officially a Gravity Forms Certified Developer.

Demo 4 CSS


5. Gradient & Image Email Sign up

If you’re after something a little fancy, this custom CSS form style for Gravity Forms includes a subtle gradient over the background image and more modern input styles.
Download Form

Act now and get another entry.

JetSloth is proudly a Certified Gravity Forms Add-on developer as of 2020. As of 2020, JetSloth is officially a Gravity Forms Certified Developer.

Demo 5 CSS


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!

Style your Gravity Forms checkbox & radio fields into buttons with CSS

Gravity Forms Design Examples