Dark & Light Gravity Form

Nested inside a pop-up modal.


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