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

By -
<!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

Post a Comment

Popular posts from this blog

50 Beautiful Color Palettes for Your Next Web Project

By -
Image
1 Ideas 4 Homes 2 Cardsox 3 Fitz Fitzpatrick 4 Campfire 5 Aladdin 6 Chrome Sports 7 Papua New Guinea 8 Barni Design 9 Instapuzzle 10 Our Little Projects 11 State of the Owner 12 SoftwareMill 13 iGaranti 14 Vintage Romantic 15 This isn’t a color palette!? You’ve got a sharp eye. Do you love tackling fun & challenging design projects for smart, ambitious clients? Do you find your happy place while savoring the perfect cup of coffee in the morning? We’re hiring for a senior UX/UI Designer just like you.  See what it’s like to work with us 16 Nicholas Jackson Design 17 1920 Leyendecker 18 WerkPress 19 Silmo Paris 20 Dark Sunset 21 The Color of Traffic 22 MandLoys 23 Sa...
Read more

Website Color Palettes: The Palettes of 50 Visually Impactful Websites to Inspire You Css Zilla

By -
Did you know that Facebook is blue because Mark Zuckerberg is red-green color blind? “Blue is the richest color for me; I can see all of blue” says Zuckerberg. While this choice of color doesn’t seem very scientific, it’s still proves that a lot of thought is put into the choice of color. As Buffer writes, over 90% of our assessment of a product is made on color alone, so it makes sense that color should be considered with care for every design decision, particularly on websites. Chances are, if we don’t like the color palette, we’re not going to stay on the site for very long. To get you started on your own palette, we’ve gathered 50 beautiful websites with versatile color schemes you can take inspiration from. So without further ado, let’s get knee-deep in some beautiful colors. 01. Fun and Professional <img width="700" height="404" src="https://designschool.canva.com/wp-content/uploads/sites/2/2016/01/Palette_1.jpg" class="attac...
Read more