Jet pack Subscriber widget is not working

my website is stepstos.com (still developing).I want to change the position of jp subscriber widget.
so I insert the following codes into Index.php

<div class="jps">
			<?php echo do_shortcode( '[jetpack_subscription_form title="My Custom Title" subscribe_text="My custom subscribe text!" subscribe_button="Sign Me Up" show_subscribers_total="1"]' ); ?>
		</div>

and following codes into Style.css

.jetpack_subscription_widget {
color: #0b0101;
width: 95%;
margin-bottom: 10px;
padding-bottom: 5px;
background-color: #00ffff ;
padding-left: 5px; padding-right: 5px;
font-weight:bold;
font:#d5741d;
 border-top-right-radius:8px;
border-top-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
}

#subscribe-submit Input {
 background-image: url(http://stepstos.com/wp-content/uploads/2014/07/ricepaper.png)
position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(244,6,33,1);
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 1em;
    display: block;
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 9px 0px rgba(244,6,33,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(244,6,33,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(244,6,33,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 25px auto;
	width: 140px;
	text-align: center;

	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;

}

And

.jps {
position:absolute;
left:5;
top:310;
height: 50px;
width: 175px;
z-index: -1;
}

After I put these codes jp subscriber widget it shows like an Image. text area, subscriber button isn’t working.please help me??

p.s. : Im not a php expert 😀

https://wordpress.org/plugins/jetpack/