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 action="quotation.php" enctype="multipart/form-data" class="form-horizontal" id="quotation1" method="post" name="quotation">-->
  <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 class="alert alert-danger errorMessage"></div>-->
      </div>
      <div id="contact_body">
        <label><span>Full Name <span class="required">*</span></span>
        <!--            <input type="text" name="full_name" id="name" required="true" class="input-field">-->
        <input id="first_name" name="full_name" class="input-field validate" type="text">
        </label>
        <label><span>Email <span class="required">*</span></span>
        <!--            <input type="email" name="email" required="true" class="input-field">-->
        <input id="email-side" name="email" class="input-field validate" type="email">
        </label>
        <label><span>Phone <span class="required">*</span></span></label>
        <!--            <input type="text" name="pre_phone" placeholder="+61"  maxlength="4"  required="true" class="tel-number-field" value="+61">
—<input type="text" name="phone" maxlength="15" required="true" class="tel-number-field long">-->
        <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>
        <!--            <input type="file" name="attachment" class="input-field">-->
        <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>
        <!--            <textarea id="textareaRQ" name="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>

Comments

Popular Posts