contact_us

<div id="form">
    <div class="row" style="padding: 20px;">
        <div class="col-lg-2" id ="mainform">
            <form>
                <label><h4>Name:</h4> </label><input type="text" name="name" size="20"  class=" form-control" placeholder="User name" required />
                <label><h4>Email:</h4></label> <input type="email" name="email" size="20"  class=" form-control" placeholder="User Email" required/>
                <h4>Comments:</h4><textarea class="form-control" rows="6"  placeholder="Message" required></textarea>
                <br>
                <button type="submit" class="btn btn-info" id="btn" style="text-shadow:0 0 3px #000000; font-size:24px;">Kirim Saran</button>
            </form>
        </div>
    </div>
</div>


CSS:
/*=========================================================Navber================================================*/
#navbar{
    width:100%;
    background-color:#fff;
    opacity:1;

}
#tab{
    color:#283747;
    font-size:18px;
    font-family:sans-serif;
    text-align:center;
    background-color:#fff;
}
#tab:hover{
    color:dodgerblue;
    transition:all 0.15s ease-in-out;

}
#logo{
    margin-top:-10px;
    height:80px;
    width:240px;
    overflow: visible;
    background-color:#fff;
    padding:10px;
    border:1.5px solid dodgerblue;
}
/*=========================================================Header Animation=====================================*/

/*=========================================================Contact us page======================================*/

#mainform{
    background-color:#fff;
    border:px solid #f1f1f1;
    padding:20px;
    height:auto;
    opacity:.7;
    animation-name:form;
    animation-duration:1s;
    transition:ease-in-out .3s;

    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
@keyframes form{
    0%{ opacity:0;}
    100%{}
}

#mainform:hover{
    box-shadow:0 0 20px #CCCCCC;
    opacity:1;
}

#btn{
    width:100%;}
}

#mail{
    border-radius:50%;
    height:40px;
    width:40px;
}
#mail:hover{
    box-shadow:0 0 2px #000000;
}
#phone{
    border-radius:50%;
    height:40px;
    width:40px;
}
#phone:hover{
    box-shadow:0 0 2px #000000;
}
#map{
    border-radius:50%;
    height:40px;
    width:40px;
}
#map:hover{
    box-shadow:0 0 2px #000000;
}


.contact-us{
    animation-name:contact-us;
    animation-duration:1s;
    margin-left:x;
}
@keyframes contact-us{
    0%{ margin-left:-400px;}
    100%{}}

    /*=========================================================Home page======================================*/