right side toggle by js, toggle from ride side by js, toggle js for website, form toggle from right side js, js for form toggle from right side

<!DOCTYPE html>
<html lang="en-US">
<head itemscope="" itemtype="https://schema.org/WebSite">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.floating-form {
    max-width: 280px;
    padding: 20px 20px 10px;
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
    background: #F9F9F9;
    border: 1px solid #ddd;
    right: -320px;
    position: fixed;
    box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);
    -moz-box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);
    -webkit-box-shadow: -2px -0 8px rgba(43, 33, 33, 0.06);
    z-index: 9999
}
.contact-opener {
    position: absolute;
    left: -80px;
    top: 100px;
    padding: 9px;
    color: #fff;
    cursor: pointer;
}
.floating-form.open {
    right:0px;
}
.floating-form-heading {
    font-weight: 700;
    font-style: italic;
    border-bottom: 2px solid #ddd;
    margin-bottom: 10px;
    font-size: 15px;
    padding-bottom: 3px
}
.floating-form label {
    display: block;
    margin: 0 0 5px;
    position: relative;
}
.floating-form label > span {
    width: 100%;
    font-weight: 600;
    font-size: 13px;
    float: left;
    padding-bottom: 2px;
    padding-right: 5px
}
.floating-form span.required {
    color: red
}
.floating-form .tel-number-field {
    width: 50px;
    text-align: center;
}
.floating-form .long {
    width: 69.5%
}
.floating-form input.input-field {
    width: 100%;
    background-color: #fff
}
.floating-form input.input-field, .floating-form .tel-number-field, .floating-form .textarea-field, .floating-form .select-field {
    text-align: left;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
    box-sizing: border-box;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 7px;
    outline: none
}
.floating-form .input-field:focus, .floating-form .tel-number-field:focus, .floating-form .textarea-field:focus, .floating-form .select-field:focus {
    border: 1px solid #0C0
}
.floating-form .select-field {
    width: 100%
}
.floating-form .textarea-field {
    height: 100px;
    width: 100%
}
.floating-form input[type="button"], .floating-form input[type="submit"] {
    background-color:#2970f2;
    border:none;
    padding:17px 30px;
    height:auto;
    font-size:0.8em;
    text-transform:uppercase;
    font-weight:600;
    color:#fff;
box-shadow:-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=90, Color=rgba(0, 0, 0, 0.3))";
    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=90, Color=rgba(0, 0, 0, 0.3));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.blueButton {
    background-color:#2970f2;
    border:none;
    padding:17px 30px;
    height:auto;
    font-size:1em;
    text-transform:uppercase;
    font-weight:600;
    color:#fff;
box-shadow:-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=90, Color=rgba(0, 0, 0, 0.3))";
    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=90, Color=rgba(0, 0, 0, 0.3));
}
.floating-form .contact-opener {
    text-align:center;
    background-image: url(//theninehertz.com/wp-content/themes/theninehertz/images/call-back.png);
    background-repeat:no-repeat;
    background-size:100% auto;
    width: 89px;
    height: 76px;
}
.floating-form .contact-opener img {
    margin-left:13px;
    margin-top:0px;
    width:40px;
}
.floating-form input[type="button"]:hover, .floating-form input[type="submit"]:hover {
}
.floating-form .success {
    background: #D8FFC0;
    padding: 5px 10px;
    margin: 0 0 5px;
    border: none;
    font-weight: 700;
    color: #2E6800;
    border-left: 3px solid #2E6800
}
.floating-form .error {
    background: #FFE8E8;
    padding: 5px 10px;
    margin: 0 0 5px;
    border: none;
    font-weight: 700;
    color: red;
    border-left: 3px solid red
}
.appBnr {
    height:748px;
    background-image:url(//theninehertz.com/wp-content/themes/theninehertz/images/app-bnr.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    position:relative;
    background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>

$(document).ready(function(){
    $(".contact-opener").click(function(){
        $("#contact_form").toggleClass("open");
    });
});
</script>
</head>
<body>
<div class="bottom_form">

<form class="form-horizontal" id="callBack" action="" method="post" name="quotation" enctype="multipart/form-data" novalidate="novalidate">
    <input class="reffer" id="req_reffers_fm1" name="reffer" value="" type="hidden">
    <input value="CALL BACK REQUEST" name="subject" type="hidden">
    <div class="floating-form" id="contact_form" style="">
      <div class="contact-opener"><img class="faa-ring animated" src="https://www.blogger.com/img/blogger-logotype-color-black-2x.png"></div>
      <div id="contact_results">
        <div class="errorMsgCall error" style="display: none;"></div>
        <div class="successMsgCall success" style="display: none;"></div>
        
      </div>
      <div id="contact_body">
        <label><span>Full Name <span class="required">*</span></span>
        
        <input id="first_name" name="full_name" class="input-field validate" type="text">
        </label>
        <label><span>Email <span class="required">*</span></span>
        
        <input id="email-side" name="email" class="input-field validate" type="email">
        </label>
        <label><span>Phone <span class="required">*</span></span></label>
        
        <div style="position:relative;" class="noErr">
          <input name="pre_phone" placeholder="+91" maxlength="4" class="tel-number-field flt" type="text">
          <input id="telRQ" name="phone" maxlength="15" class="tel-number-field long validate rght" type="text">
          <div class="clearfix"></div>
        </div>
        <label for="subject"><span>Budget</span>
        <select name="budget" id="budget" class="select-field">
          <option value=" " selected="selected">Budget</option>
          <option value="1000 - 5000 USD">USD 1000 to USD 5000</option>
          <option value="5000 - 10000 USD">USD 5000 to USD 10000</option>
          <option value="10000 - 25000 USD">USD 10000 to USD 25000</option>
          <option value="25000 - 50000 USD">USD 25000 to USD 50000</option>
          <option value="50000+ USD">USD 50000+</option>
        </select>
        </label>
        <label>
        <span class="uyf">Upload Your File (optional)</span>
        
        <div class="clearfix"></div>
        <input id="attachment" class="input-field fli" name="attachment" onchange='$("#upload-file-info").html($(this).val());' type="file">
        </label>
        <label for="field5">
        <span>Message <span class="required">*</span></span>
        <textarea name="message" id="message" class="textarea-field"></textarea>
        
        <input id="capt2" name="captcha" class="validate input-field captcha_input" type="text">
        <div class="code1">
          <p><img src="../captcha.htm"></p>
        </div>
        <div class="clearfix"></div>
        </label>
        <label>
        <input class="submit_btn" name="submit" value="submit" type="submit">
        </label>
      </div>
    </div>
</form>
</div>
</body>
</html>

Search This Blog

Css Zilla

right side toggle by js, toggle from ride side by js, toggle js for website, form toggle from right side js, js for form toggle from right side

Comments

Post a Comment

Popular posts from this blog

50 Beautiful Color Palettes for Your Next Web Project

Clearfix Css, Force Element To Self-Clear its Children