July 21, 2020
Feedback/Contact Sliding Form with CSS & jQuery
Are you looking for feedback or contact sliding form with CSS & jQuery, then here we have a solution to do that. To know the user feedback or for quick contact, the sliding form is very useful for the website. In the website where ever users go the feedback sliding form always displays right or left-hand side. This is an only static form with the help of PHP or any other platform you can use for functionality.
The below code will help you to integrate the sliding form on your website.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<!DOCTYPE html> <html> <head> <title>Feedback/Contact Sliding Form with CSS & jQuery</title> <style> /* ==================== Form Area ======================*/ .quick-option { position: fixed; top: 0; left: 100%; background: #fff; height: 100%; width: 350px; max-width: calc(100% - 45px); z-index: 100000; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .quick-option.open { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14); box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14); } .form-option-wrapper { height: 100%; overflow-y: auto; padding-bottom: 55px; } .form-option-wrapper .form-panel-header { padding: 40px 30px 30px; text-align: center; } /* ==================== Toolbar Area ======================*/ .form-toolbar .inner { position: absolute; top: 200px; right: 100%; display: block; width: 60px; border: 1px solid #fff; border-right: 0; border-radius: 5px 0 0 5px; background: #fff; text-align: center; -webkit-box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1); box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1); } .form-toolbar .inner a { display: block; padding: 10px; background: #000000; border-radius: 10px 0px 0px 10px; -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } /* ==================== Form Design Area ======================*/ .form-option-wrapper form input[type="text"], input[type="email"], textarea { width: 100%; padding: 10px; border: 1px solid #e8e6e6; } .form-option-wrapper form input[type="submit"] { background: #4caf50; color: #fff; padding: 10px; border: none; border-radius: 4px; } .span12 { width: 100% !important; margin-bottom: 25px; } </style> </head> <body> <!-- Start Sliding Form --> <div class="quick-option"> <!-- Start Form Toolbar --> <div class="form-toolbar"> <div class="inner"> <a class="trigger-option" href="#"> <img src="https://image.flaticon.com/icons/svg/893/893268.svg" width="40px" /> </a> </div> </div> <!-- End Form Toolbar --> <!-- Start Quick Form --> <div class="form-option-wrapper"> <div class="form-panel-header"> <h3>Get started</h3> <form action="#"> <div class="span12"> <input name="name" type="text" placeholder="Name*" required /> </div> <div class="span12"> <input name="email" type="email" placeholder="Email*" required /> </div> <div class="span12"> <input name="phone" type="text" placeholder="Phone number*" required /> </div> <div class="span12"> <textarea name="message" placeholder="Your message"></textarea> </div> <div class="span12"> <input type="submit" value="Submit" /> </div> </form> </div> </div> <!-- End Quick Link --> </div> <!-- End Sliding Form --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(".trigger-option").on("click", function (e) { e.preventDefault(), (function () { $formOption.toggleClass("open"); })(); }); var $html = $("html"), $formOption = $(".quick-option"), $body = $("body"); </script> </body> </html> |
Optional
Using CLASS you can toggle the same form on your website from anywhere on the site, this is an optional method.
|
1 2 3 |
<!-- Optional --> <a href="#" class="trigger-option"><span> Request Demo</span></a> <!-- End Optional --> |
Conclusion:
I hope this will help you to integrate the feedback sliding form on your website. If you have any doubts let me know in the comment section, and you like this article share it with your friends.
