HTML SVG troubles

So, I've made a small little svg input field as shown below, and as you can see, it is only half the width of the svg, which isn't what I want here. I want it to start at full width on the bottom border only. I've been fooling around for hours trying to get it done, but to no avail. Anyway, here's the site I'm working on, its soon to be the contact section, but i'm trying to style these input fields correctly.

.shape-input {
    fill: transparent;
    stroke-dasharray: 962;
    stroke-dashoffset: 558;
    /*stroke-dasharray: 320;
    stroke-dashoffset: -474;*/
    stroke-width: 2px;
    stroke: #19f6e8;
    -webkit-animation: 0.8s draw-out ease forwards;
    -moz-animation: 0.8s draw-out ease forwards;
    -o-animation: 0.8s draw-out ease forwards;
    animation: 0.8s draw-out ease forwards;
}

@keyframes draw-in-input {
    0% {
        stroke-dasharray: 140 540;
        stroke-dashoffset: -474;
    }
    100% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
    }
}

@keyframes draw-out-input {
    0% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 140 540;
        stroke-dashoffset: -474;
    }
}

.input-active {
    -webkit-animation: 0.8s draw-in-input ease forwards;
    -moz-animation: 0.8s draw-in-input ease forwards;
    -o-animation: 0.8s draw-in-input ease forwards;
    animation: 0.8s draw-in-input ease forwards;
}

.text {
    color: #fff;
    font-family: 'Montserrat';
    font-size: 16px;
    letter-spacing: 8px;
    line-height: 60px;
    position: relative;
    top: -64px;
    margin: 0;
}

input {
    outline: none;
    border: 0px;
    background: transparent;
    letter-spacing: 2px;
    padding-left: 25px;
    width: 252px;
}

Html:

<div class="contact-wrapper">
    <div class="svg-wrapper-input">
        <svg height="60" width="277" xmlns="http://www.w3.org/2000/svg">
            <rect class="shape-input" height="60" width="277" />
        </svg>
        <input class="text" placeholder="Name"></input>
    </div>
</div>

JAVASCRIPT

$(".svg-wrapper-input > input").focus(function () {
    $(".svg-wrapper-input > svg > .shape-input").toggleClass("input-active");
});
$(".svg-wrapper-input > input").focusout(function () {
    $(".svg-wrapper-input > svg > .shape-input").toggleClass("input-active");
});

My problem lies with either the stroke-dashoffset or dasharray, but I've been moving them around over and over and it hasn't done a thing. an anyone show me the way?