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

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.

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

/*Import font*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap');
.newsletter-signup_wrapper {
    border: 1px solid #ebebe5;
    border-radius: 20px;
    background-color: #fafbf8;
    background:url('https://images.unsplash.com/photo-1509624776920-0fac24a9dfda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2369&q=80');
    padding: 80px;
    background-size:cover;
}
/*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;
    cursor:pointer;
}
/*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"] {
    border:none;
    border-radius:10px;
    font-size:18px;
    box-shadow:
      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);
    padding:20px;
    font-style:italic;
    text-indent:15px;
    margin-top: 20px;
}
/*Hide Email lable */
.newsletter-signup_wrapper .email label.gfield_label {
    display:none;
}

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!

Aug 29, 2022

Bundle & Save

Custom Gravity Forms newsletter sign up style