Contact form template

      No Comments on Contact form template

Contact form template in CSS. This template is clean and easy to use form for contact UI.

Contact form template

Contact form template

HTML markup:

<div class="bg">
</div>
<div class="form_cnt">
  <form method="post" action="#">
    <div class="input_holder">
    <span class="glyphicon glyphicon-pencil"></span><input type="text" name="name" required placeholder="Name"/>
    </div>
    <div class="input_holder">
      <span class="glyphicon glyphicon-envelope"></span>
    <input type="email" name="email" required placeholder="Email"/>
    </div>
    <div class="input_holder">
      <span class="glyphicon glyphicon-earphone"></span>
    <input name="contact" required placeholder="Contact"/>
    </div>
    <input type="submit" class="submit_button" value="Send Message"/>
  </form>
</div>

CSS:

.bg
{
  background:#6600cc;
  width:100%;
  height:180px;
  position:relative;
}
.form_cnt
{
  background:#fff;
  box-shadow:0px 1px 4px 0px #ccc;
  width:60%;
  padding:40px;
  margin-left:20%;
  position:absolute;
  top:60px;
}
.input_holder input
{
     width:85%;
     margin:20px 0;
     border:solid 1px #ccc;
     border-width:0px 0px 1px;
     transition:linear .15s;
     font-size:16px;
     font-family:arial;
     padding-bottom:5px;
}
.input_holder .glyphicon 
{
  color:#6600cc;
  margin-right:10px;
}
.input_holder input:focus
{
  padding-left:20px;
}
.submit_button
{
  border-radius:30px;
  padding:10px 15px;
  border:solid 0px;
  background:#6600cc;
  color:#fff;
}

Demo:

See the Pen Contact form by scanfcode (@scanfcode) on CodePen.


Comment below if you are facing any problem and subscribe to our newsletter for latest update.


Also read

Creating moving light effect
jQuery Show Content Based on Select Option
How to create a alarm clock UI in JavaScript


Summary
Contact form template
Article Name
Contact form template
Description
Contact form template in CSS using simple effects, to give a professional look to your web UI. Learn to create attractive forms. Get free code here.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *