Elementor Gravity form styling with custom css Code-1
In the Elementor pro to style the gravity form we just need to do some couple of lines of the css code.
Here you can add you custom css code.
You can use this code to style you gravity form.
selector .gform_title{
display: none !important;
}
selector input, selector textarea{
font-family: "Montserrat" !important;
font-size: 20px !important;
font-weight: 500 !important;
color: #313131 !important;
background-color: #B2B3B3 !important;
border: solid 1px #B2B3B3 !important;
border-radius: 0px;
padding: 29px 40px !important;
letter-spacing: .80px;
}
selector textarea{
min-block-size: 100px !important;
padding: 17px 40px !important;
}
selector input::placeholder, selector textarea::placeholder{
color: #313131;
}
selector .gform-theme--foundation .gform_fields {
grid-column-gap: 50px !important;
grid-row-gap: 30px !important;
}
selector .gform_footer{
padding-top: 22px;
justify-content: flex-end !important;
}
selector .gform_button{
background: #F5BC2B !important;
border: solid 1px #F5BC2B !important;
border-radius: 0px !important;
font-family: "Montserrat" !important;
font-size: 21px !important;
font-weight: 500 !important;
color: #313131 !important;
padding: 18.5px 105px !important;
box-shadow: 5px 5px 0px 0px #292764 !important;
margin-right: 5px !important;
}
selector .gform_button:hover{
background: #292764 !important;
border: solid 1px #292764 !important;
color: #ffffff !important;
box-shadow: 5px 5px 0px 0px #F5BC2B !important;
}
Add this css code and save the page then check the preview for the output.

Comments
Post a Comment