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