Skip to content

Custom Gravity Forms newsletter sign up style

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
Build a custom Gravity Forms newsletter sign up style

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:

/*Import font*/
@import url('');
.newsletter-signup_wrapper {
    border: 1px solid #ebebe5;
    border-radius: 20px;
    background-color: #fafbf8;
    padding: 80px;
/*Form title*/
.newsletter-signup_wrapper h2.gform_title {
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    font-family: 'Merriweather', serif;
    letter-spacing: -1px;
    margin: 20px 0 10px;
/*Title description*/
.newsletter-signup_wrapper span.gform_description {
    text-align: center;
    display: block;
/*Submit button*/
.newsletter-signup_wrapper .gform_button.button {
    background: black;
    border: none;
    color: white;
    font-weight: 900;
    padding: 20px 60px;
    border-radius: 10px;
    font-size: 17px;
.newsletter-signup_wrapper .gform_button.button:hover {
    background: black;
/*Privacy text*/
.newsletter-signup_wrapper .gfield_description {
    color: #70706e;
    text-align: center;
    margin: 10px auto;
/*Email input */
.newsletter-signup_wrapper.gform_wrapper .email .ginput_container_email input[type="email"] {
      3.5px 4.5px 3.6px rgba(0, 0, 0, 0.007),
      9.6px 12.5px 10px rgba(0, 0, 0, 0.01),
      23.2px 30.1px 24.1px rgba(0, 0, 0, 0.013),
      77px 100px 80px rgba(0, 0, 0, 0.02);
    margin-top: 20px;
/*Hide Email lable */
.newsletter-signup_wrapper .email label.gfield_label {

Download the demo form

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

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!