Custom Gravity Forms newsletter sign up style

September 15, 2022 by JetSloth

Form Demo

Today’s quick form design and custom CSS was inspired from a website email newsletter signup form I came across and just had to replicate it within Gravity Forms. It’s got that writers/medium/blog feel and thought it’d be great to remake it in CSS styles and for our fellow users of Gravity Forms.

Custom Gravity Forms newsletter sign up style

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!

Download Form Export

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:

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