The Best CSS Background Video Techniques
Bootstrap

Sliding Sidebar Contact Form

October 11, 2021

Designing a Sliding Sidebar Contact Form allows you to make a great first impression on your visitors and potential customers. Sliding Sidebars are clean, elegant, and give your website an easy-to-use feel. But deciding how to design the form is not always easy. In this post, we will go over 8 things that can help you get started with Sliding Sidebar Contact Forms!

1. Introduce the idea of a sliding sidebar contact form

2. Discuss how to create one using some free plugins

3. Show examples of what this looks like in action on various websites

4. Explain why you might want to use one and how it can be useful for your website’s visitors

5. Provide information about where people can find more resources about this topic online if they are interested in learning more or implementing their own version

6. Wrap up by talking about how easy it is to implement these types of forms with WordPress plugins, and that most will have an option for adding a sliding sidebar contact form as well as other features that make them easier for visitors to fill out

7) Add a conclusion paragraph describing what you learned from writing this article, answering any questions readers might have had along the way, or giving any final thoughts before signing off

Create HTML file

<head>
  <script   src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
  <div class="sidebar-contact">
    <div class="toggle"></div>
    <h2>Contact Us</h2>
    <div class="scroll">
    <form>
      <input type="text" name="" placeholder="Name">
      <input type="email" name="" placeholder="Email">
      <input type="rel" name="" placeholder="Phone Number">
      <textarea placeholder="Message here.."></textarea>
      <input type="submit" name="" value="send">
    </form>
    </div>
  </div>

</body>

Create CSS file

body{
  margin:0;
  padding:0;
  font-family:sans-serif;
}


.sidebar-contact{
  position:fixed;
  top:50%;
  left:-350px;
  transform:translateY(-50%);
  width:350px;
  height:auto;
  padding:40px;
  background:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  box-sizing:border-box;
  transition:0.5s;
}
.sidebar-contact.active{
  left:0;
}
.sidebar-contact input,
.sidebar-contact textarea{
  width:100%;
  height:36px;
  padding:5px;
  margin-bottom:10px;
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,.5);
  outline:none;
}
.sidebar-contact h2{
  margin:0 0 20px;
  padding:0;
}
.sidebar-contact textarea{
  height:60px;
  resize:none;
}
.sidebar-contact input[type="submit"]{
  background:#00bcd4;
  color:#fff;
  cursor:pointer;
  border:none;
  font-size:18px;
}
.toggle{
  position:absolute;
  height:48px;
  width:48px;
  text-align:center;
  cursor:pointer;
  background:#f00;
  top:0;
  right:-48px;
  line-height:48px;
}
.toggle:before{
  content:'\f003';
  font-family:fontAwesome;
  font-size:18px;
  color:#fff;
}
.toggle.active:before{
  content:'\f00d';
}
@media(max-width:768px)
{
  .sidebar-contact{
    width:100%;
    height:100%;
    left:-100%;
  }
  .sidebar-contact .toggle{
    top:50%;
    transform:translateY(-50%);
    transition:0.5s;
  }
  .sidebar-contact.active .toggle
  {
    top:0;
    right:0;
    transform:translateY(0);
  }
  .scroll{
    width:100%;
    height:100%;
    overflow-y:auto;
  }
  .content{
    padding:50px 50px;
  }
}

Create JS file

$(document).ready(function(){
  $('.toggle').click(function(){
    $('.sidebar-contact').toggleClass('active')
    $('.toggle').toggleClass('active')
  })
})

Related Post:

How Much Does a DevOps Engineer Make

 

Vue js File Upload Axios Php Example

 

You May Also Like

Leave a Reply

Your copyright text here !