A CodePen by FaceLord. Gravity Form Styling Sample

index.html

<div class="gravity-wrapper request-analysis-wrapper">
                <div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_4"><a id="gf_4" name="gf_4" class="gform_anchor"></a><form method="post" enctype="multipart/form-data" target="gform_ajax_frame_4" id="gform_4" action="/#gf_4">
                        <div class="gform_heading">
                            <h3 class="gform_title">Please Analyze My Website</h3>
                            <span class="gform_description">We would love to hear from you! Please fill out this form and we will get in touch with you shortly.</span>
                        </div>
                        <div class="gform_body">
                            <ul id="gform_fields_4" class="gform_fields top_label description_below"><li id="field_4_1" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_4_1">Company<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_1" id="input_4_1" type="text" value="" class="medium" tabindex="1"></div></li><li id="field_4_2" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_4_2">Name<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_2" id="input_4_2" type="text" value="" class="medium" tabindex="2"></div></li><li id="field_4_3" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_4_3">Email<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_3" id="input_4_3" type="text" value="" class="medium" tabindex="3"></div></li><li id="field_4_4" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_4_4">Phone<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_4" id="input_4_4" type="text" value="" class="medium" tabindex="4"></div></li><li id="field_4_20" class="gfield               gfield_contains_required"><label class="gfield_label" for="input_4_20">Phone<span class="gfield_required">*</span></label><div class="ginput_container"><input name="input_20" id="input_4_20" type="text" value="" class="medium" tabindex="5"></div></li><li id="field_4_5" class="gfield"><label class="gfield_label" for="input_4_5">Mobile</label><div class="ginput_container"><input name="input_5" id="input_4_5" type="text" value="" class="medium" tabindex="6"></div></li><li id="field_4_8" class="gfield"><label class="gfield_label" for="input_4_8">How did you hear about Roadside Multimedia</label><div class="ginput_container"><select name="input_8" id="input_4_8" class="medium gfield_select" tabindex="7"><option value="Web Search">Web Search</option><option value="Other">Other</option><option value="Existing Customer">Existing Customer</option><option value="Saw Another Roadside Site">Saw Another Roadside Site</option><option value="AACD">AACD</option><option value="Referred by Another Doctor">Referred by Another Doctor</option><option value="roadsidemultimedia.com">roadsidemultimedia.com</option></select></div></li><li id="field_4_7" class="gfield"><label class="gfield_label" for="input_4_7">Website</label><div class="ginput_container"><input name="input_7" id="input_4_7" type="text" value="http://" class="medium" tabindex="8"></div></li><li id="field_4_9" class="gfield"><label class="gfield_label" for="input_4_9">Competitor 1:</label><div class="ginput_container"><input name="input_9" id="input_4_9" type="text" value="" class="medium" tabindex="9"></div></li><li id="field_4_10" class="gfield"><label class="gfield_label" for="input_4_10">Competitor 2:</label><div class="ginput_container"><input name="input_10" id="input_4_10" type="text" value="" class="medium" tabindex="10"></div></li><li id="field_4_11" class="gfield"><label class="gfield_label" for="input_4_11">Competitor 3:</label><div class="ginput_container"><input name="input_11" id="input_4_11" type="text" value="" class="medium" tabindex="11"></div></li><li id="field_4_18" class="gfield"><label class="gfield_label">Do you already have an online marketing plan?</label><div class="ginput_container"><ul class="gfield_radio" id="input_4_18"><li class="gchoice_18_0"><input name="input_18" type="radio" value="Yes" id="choice_18_0" tabindex="12"><label for="choice_18_0">Yes</label></li><li class="gchoice_18_1"><input name="input_18" type="radio" value="No" id="choice_18_1" tabindex="13"><label for="choice_18_1">No</label></li></ul></div></li><li id="field_4_13" class="gfield"><label class="gfield_label" for="input_4_13">Primary city you service:</label><div class="ginput_container"><input name="input_13" id="input_4_13" type="text" value="" class="medium" tabindex="14"></div></li><li id="field_4_14" class="gfield"><label class="gfield_label" for="input_4_14">Additional cities you service:</label><div class="ginput_container"><textarea name="input_14" id="input_4_14" class="textarea medium" tabindex="15" rows="10" cols="50"></textarea></div></li><li id="field_4_15" class="gfield"><label class="gfield_label" for="input_4_15">Primary services offered:</label><div class="ginput_container"><textarea name="input_15" id="input_4_15" class="textarea medium" tabindex="16" rows="10" cols="50"></textarea></div></li>
                            </ul></div>
        <div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_4" class="button gform_button" value="Submit" tabindex="17"><input type="hidden" name="gform_ajax" value="form_id=4&amp;title=1&amp;description=1">
            <input type="hidden" class="gform_hidden" name="is_submit_4" value="1">
            <input type="hidden" class="gform_hidden" name="gform_submit" value="4">
            <input type="hidden" class="gform_hidden" name="gform_unique_id" value="518d2d15854c2">
            <input type="hidden" class="gform_hidden" name="state_4" value="YToyOntpOjA7czo2OiJhOjA6e30iO2k6MTtzOjMyOiJkOTVjMGJkYzYzNDgxZWE0YTEzM2U2NDMyMzYyZDYyZSI7fQ==">
            <input type="hidden" class="gform_hidden" name="gform_target_page_number_4" id="gform_target_page_number_4" value="0">
            <input type="hidden" class="gform_hidden" name="gform_source_page_number_4" id="gform_source_page_number_4" value="1">
            <input type="hidden" name="gform_field_values" value="">
            
        </div>
                </form>
                </div>
                <iframe style="display:none;width:0px; height:0px;" src="about:blank" name="gform_ajax_frame_4" id="gform_ajax_frame_4"></iframe>
                </div>

style.css

.gform_wrapper{
  font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.gform_wrapper .gform_description{
	display: none;
}
.gform_wrapper ul{
	list-style: none;
	margin: 0;
  padding: 0;
}
.gform_wrapper label{
	font-size: 16px;
}
.gform_wrapper .validation_error, .gform_wrapper .gfield_error{
	background: #efebad;
	background: rgba(239, 235, 173, 0.8);
	border: 1px solid #e1d245;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 4px;
}
.gform_wrapper .gfield{
	margin-bottom: 24px;
}
.gform_wrapper .gfield_required{
	display: none;
}
.gform_wrapper input[type="text"], .gform_wrapper textarea{
	width: 100%;
	outline: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.15);
	font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.gform_wrapper input[type="text"]:focus, .gform_wrapper textarea:focus{
		box-shadow( 2px 2px 10px rgba(0,0,0,0.1) );
		-webkit-box-shadow( 2px 2px 10px rgba(0,0,0,0.1) );
		-moz-box-shadow( 2px 2px 10px rgba(0,0,0,0.1) );
}
.gform_wrapper textarea{
	height: 72px;
}
.gform_wrapper input[type="submit"]{
	border: none !important;
	line-height: normal !important;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;

	/* add button styling here */
}