Dark & Light Gravity Form
Nested inside a pop-up modal.
sdlawrence.com
This snippet creates a dark Gravity Form with green input text.
HTML
Enter into model HTML content block:
<h3>Contact Me</h3>
<p><em>Submit Your Message Below.</em></p>
[gravityform id="1" title="false" description="false"]CSS - DARK
Change background 'src-image' to correct background source image:
.x-modal-content {
border:1px solid #222;
border-radius:10px;
background: #1C1D1F url('src-image') center top no-repeat;
}
.x-modal-content p {
color:#bbb;
margin:20px 10px;
padding-top:230px;
text-align:center;
}
.gform_wrapper input[type="submit"][id*="gform_submit_button_"]{
display:block;
background:#1BBC9B;
width:auto;
color: #fff;
font-size: 1.2rem;
line-height: 1.42857143;
padding: 8px 20px !important;
margin: 0 auto;
border:none;
border-radius:3em;
-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
}
.gform_wrapper input[type="submit"][id*="gform_submit_button_"]:hover {
background: #222;
}
body .gform_wrapper .top_label .gfield_label, body .gform_wrapper .left_label .gfield_label, body .gform_wrapper .right_label .gfield_label {
font-weight: bold;
color:#222;
}
/* form placeholder overrides - have to use !important or this doesn't work
--------------------------------------------- */
::-webkit-input-placeholder { /* Chrome */
color: #999 !important;
text-transform:none !important;
}
:-ms-input-placeholder { /* IE 10+ */
color: #999 !important;
text-transform:none !important;
}
::-moz-placeholder { /* Firefox 19+ */
color: #999 !important;
opacity: 1 !important;
text-transform:none !important;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: #999 !important;
opacity: 1 !important;
text-transform:none !important;
}
CSS - LIGHT
.x-modal-content {
border:1px solid #222;
border-radius:10px;
background: #1C1D1F url('src-image') center top no-repeat;
}
.x-modal-content h3 {
color:#2D7D79;
margin:0;
text-align:center;
}
.x-modal-content p {
color:#222;
margin-bottom:15px;
text-align:center;
}
.gform_wrapper input[type="submit"][id*="gform_submit_button_"]{
display:block;
background:#2D7D79;
width:auto;
color: #fff;
font-size: 1.2rem;
line-height: 1.42857143;
padding: 8px 20px !important;
margin: 0 auto;
border:none;
border-radius:3em;
-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.1);
}
.gform_wrapper input[type="submit"][id*="gform_submit_button_"]:hover {
background: #222;
}
body .gform_wrapper .top_label .gfield_label, body .gform_wrapper .left_label .gfield_label, body .gform_wrapper .right_label .gfield_label {
font-weight: bold;
color:#222;
}
/* form placeholder overrides - have to use !important or this doesn't work
--------------------------------------------- */
::-webkit-input-placeholder { /* Chrome */
color: #999 !important;
text-transform:none !important;
}
:-ms-input-placeholder { /* IE 10+ */
color: #999 !important;
text-transform:none !important;
}
::-moz-placeholder { /* Firefox 19+ */
color: #999 !important;
opacity: 1 !important;
text-transform:none !important;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: #999 !important;
opacity: 1 !important;
text-transform:none !important;
}
.flexmethod {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.x-container:before {
content: normal;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
display: inline-block;
height: 2.65em;
margin-bottom: 9px;
border: 1px solid #999;
padding: 0 .65em;
font-size: 13px;
line-height: normal;
color: #1BBC9B;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}Share this Post
