mad lib form files

form.focus.js

jQuery(document).ready(function($){
    $(".clear_field input").focus(function () {
        var origval = $(this).val();
        $(this).val("");
        //console.log(origval);
        $(".clear_field input").blur(function () {
            if($(this).val().length === 0 ) {
                $(this).val(origval);
                origval = null;
            }else{
                origval = null;
            };
        });
    });
});

madlibform.css

/* MadLib Form 
------------------------------------------------------------ */
 
/*The following is specific to Streamline 2.0*/
.madlibcontact.full-width-content #inner .wrap {
    background: none repeat scroll 0 0 transparent;
    box-shadow: none;
}
 
.madlibcontact #inner #subnav .wrap {
    box-shadow: 0 0 10px #111111;
}
 
.madlibcontact #content-sidebar-wrap {
    border-top: none;
}
/*End streamline 2.0 CSS */
 
.madlibcontact .hentry {
    position: relative;
}
 
.madlibcontact h1 {

    border-radius: 10px 10px 10px 10px;
    color: #FAFAFA;
    left: 55px;
    padding: 10px;
    position: absolute;
    text-shadow: 1px 1px #2C546B;
    top: 55px;
    z-index: 99;
}
 
/* make all the list items display inline */
body .gform_wrapper form.madlibform .gfield.gfield_html,
body .gform_wrapper form.madlibform .gfield.madlibstyle {
    clear: none;
    display: block;
    float: left;
    height: 40px;
    line-height: 40px;
    margin: 0 5px 0 0;
    padding: 0;
    vertical-align: bottom;
    width: auto !important;
        color: #666 !important;
}
 
body .gform_wrapper form.madlibform .gfield.break {
    clear: both;
}
 
/* hide the labels, descriptions & validation messages */
body .gform_wrapper form.madlibform .gfield.madlibstyle label,
body .gform_wrapper form.madlibform div.gfield_description,
body .gform_wrapper form.madlibform div.validation_message {
    display:none;
}
 
/* redefine the form wrapper - just for nicer styling - note: for your form, change gform_wrapper_6 to your actual form wrapper ID */
body .gform_wrapper  {
    margin:0 auto 140px; 
    border:1px solid #fff; 
    background-color:#fff; 
    padding:30px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    -khtml-border-radius: 2px; 
    border:1px solid #757473;
    position: relative; 
    overflow: visible!important; 
    max-width:1000px;

}
 
/* style the form heading */
body .gform_wrapper form.madlibform .gform_heading {
    background-repeat:repeat-x; 
    background-position: 50% 100%; 
    padding-bottom:60px; 
    margin:35px 0 10px 0;
}
 
body .gform_wrapper form.madlibform .gform_heading span.gform_description {
    line-height:1.5; 
    font-size:110%; 
    color:#21759B
}
 
 
/* change the input styles for these fields */
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=text],
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=email],
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=password],
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=url],
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=tel] {
    margin-top:4px; 
    border-top:none; 
    border-right:none; 
    border-bottom:1px dashed #c2c2c2; 
    border-left:none; 
    background-color:#fff; 
    width:100%; 
    font-size:18px; 
    color:#21759B
}
 
body .gform_wrapper form.madlibform .gfield.madlibstyle select {
    width:98%; 
    font-size:15px; 
    padding:5px;
}
 
/* tweak the time fields for our purposes */
body .gform_wrapper form.madlibform #field_2_16.gfield.madlibstyle {
    width:100px!important
}
 
/* a few new rules for the inputs if it's an error */
body .gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=text],
body .gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=email],
body .gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=password],
body .gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=url],
body .gform_wrapper form.madlibform .gfield.gfield_error.madlibstyle input[type=tel] {
    padding:0!important; 
    margin-top:7px; 
    width:96%;
}
 
/* revised error styles */
body .gform_wrapper form.madlibform .gform_body .gform_fields .gfield.gfield_error.madlibstyle {border:none; padding:0 0 0 0!important; background-color:transparent!important; margin-top:0!important; margin-bottom:0!important;}
body .gform_wrapper form.madlibform .gform_body .gform_fields .gfield.gfield_error.madlibstyle input { border-top:none; border-right:none; border-bottom:1px dashed #DA5712; border-left:none; background-repeat:no-repeat; background-position: 98% 50%;}
body .gform_wrapper form.madlibform .gform_body .gform_fields .gfield.gfield_error.madlibstyle input:focus {border-bottom:1px dashed #c2c2c2}
body .gform_wrapper form.madlibform div.validation_error { 
    font-size:24px; 
    text-shadow:1px 1px 1px #fff; 
    color:#DA5712!important
}
 
/* now make the confirmation message a little spiffier */
div#gforms_confirmation_message {
    width:900px; 
    margin:40px auto; 
    font-size:24px; 
    text-shadow:1px 1px 1px #fff; 
    color:#21759B!important; 
    background-color:#fff!important; 
    border:1px solid #fff!important; 
    letter-spacing:-0.4pt; 
    line-height:1.8; 
    padding:40px 30px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 
    -khtml-border-radius: 8px; 
    box-shadow:0px 0px 5px rgba(0,0,0,0.5); 
    -moz-box-shadow:0px 0px 5px rgba(0,0,0,0.5); 
    -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.5); 
    background-repeat:repeat-x; 
    background-position: 0 0;
}
 
div#gforms_confirmation_message span.highlight {
    color:#DA5712
}
 
div#gforms_confirmation_message div.with_emphasis {
    font-size:36px; 
    margin:20px 0 0 0; 
    font-family: Georgia, serif; 
}
 
/* super duper extra fabulous form button and title styles */
.gform_wrapper form.madlibform .gform_footer input.button,
.gform_wrapper form.madlibform .gform_heading h3.gform_title {
    border: medium none;
    color: #FFF3D8;
    display: block;
    height: 37px;
    text-align: center;
    width: 246px;
}
 
/* position the button */
.gform_wrapper form.madlibform .gform_footer input.button {
    position: absolute; 
    bottom:-30px; 
    right:28px; 
    cursor:pointer;
}
 
 
/* other title styles */
.gform_wrapper form.madlibform .gform_heading h3.gform_title {
    position: absolute; 
    top:-40px; 
    left:28px; 
    width:auto!important;
}
 
/* browser specific styles based on body class - don't use it? You should.. http://www.wprecipes.com/how-to-detect-the-visitor-browser-within-wordpress */
body.safari .gform_wrapper form.madlibform .gfield.madlibstyle select,
body.chrome .gform_wrapper form.madlibform .gfield.madlibstyle select {color:#424242; font-size:18px; font-family:Helvetica,arial,sans-serif;}
body.safari .gform_wrapper form.madlibform .gfield.madlibstyle select#input_2_4,
body.chrome .gform_wrapper form.madlibform .gfield.madlibstyle select#input_2_4 {width:135px;}
body.safari .gform_wrapper form.madlibform .gfield.madlibstyle select#input_2_17,
body.chrome .gform_wrapper form.madlibform .gfield.madlibstyle select#input_2_17 {width:55px;}
body.gecko .gform_wrapper form.madlibform .gfield.madlibstyle select {margin:4px 0 0 0!important; padding:5px;}
body.gecko .gform_wrapper form.madlibform .gform_footer input.button {padding:8px 18px;}
body.safari .gform_wrapper form.madlibform div.validation_message,
body.ie .gform_wrapper form.madlibform .gfield.madlibstyle select {padding:0!important; margin:7px 0 0 0!important;}
body .gform_wrapper label.gfield_label+div.ginput_container {
     margin-top:0 !important; */
}    

body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=text] {
    color:#65b1c7;
}

.gform_wrapper form.madlibform .gform_footer input.button {
    position: absolute;
    bottom: -120px;
    right: 37%;
    cursor: pointer;
    padding: 10px 10px 40px; 
}

.gform_wrapper form.madlibform .gform_footer input#gform_submit_button_1[type="submit"] {
    background-color: #fff;
}

div#gforms_confirmation_message_1 {
     text-align: center; 
}


    
@media only screen and (max-width:1024px) {
   body .gform_wrapper form.madlibform .gfield.gfield_html,
    body .gform_wrapper form.madlibform .gfield.madlibstyle {
        width:100% !important;
        max-width:100% !important;  
    } 
    
    .gform_wrapper form.madlibform .gform_footer input.button {
       width: 100%;
        left: 0;
        right:auto;
    
    }
    
    .invisible-row {
        background:url('/wp-content/uploads/2015/11/imported_from_texas_stamp_black.png') no-repeat center;
        display:block;
        visibility:visible;
        height: 230px;
        margin-top: 70px;
    }
    
    .second-row {
        background:none;
    }
  
}

@media only screen and (max-width:603px) {
     body .gform_wrapper form.madlibform .gfield.gfield_html,
    body .gform_wrapper form.madlibform .gfield.madlibstyle {
        width:100% !important;
        max-width:100% !important;  
        height:250%;
    } 

      .gform_wrapper form.madlibform .gform_footer input.button {
        right: 28%;

    }
}