Gravity form with a material design look, message expands on click

Get in Touch
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
/*** MAIN WRAPPER ***/
.gform_wrapper {
    background: #6000AA;
    padding: 5%;
}
/*** REMOVE LABEL FOR PLACEHOLDER ONLY ***/
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
    display: none;
}
/*** FIELD STYLING ***/
.gform_wrapper ul.gform_fields li.gfield,
.gform_wrapper .top_label li.gfield.gf_right_half {
    padding-right: 0;
}
input[type=text],
textarea {
    background: #8300E9;
    border: none;
    border-radius: 0;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    padding: 17px 15px !important;
}
/*** FIELD FOCUS STYLING ***/
input[type=text]:focus,
input.text:focus,
input.title:focus,
textarea:focus {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}
/*** MESSAGE BOX TRANSITION ***/
.gform_wrapper textarea.medium {
    margin-top: 6px;
    height: 10em;
    transition: height .3s ease-out;
}
/*** MESSAGE BOX FOCUS HEIGHT ***/
.gform_wrapper textarea.medium:focus {
    height: 25em;
}
/*** BUTTON STYLING ***/
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit] {
    width: 100%;
}
.gform_wrapper input[type=submit] {
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px 12px;
    border-radius: 0;
    background: #19ffc0;
    color: rgba(0, 0, 0, 0.5);
    border: none;
    transition: box-shadow .2s ease-in-out;
}
/*** BUTTON HOVER STYLING ***/
.gform_wrapper input[type=submit]:hover {
    background: #f2bf2f;
    color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}
/*** PLACEHOLDER ***/
::-webkit-input-placeholder {    
    color: rgba(255, 255, 255, 0.7) !important;
}
:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}
::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}
:-moz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

 

Copyright © A Girl and Her Mac