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!
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
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
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
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
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
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
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
