Fully responsive forms with CSS3

In this chapter we will see how to make a responsive form by using only the CSS styling. The main CSS3 properties used are background gradients, transitions, and box-sizing.
Example

A CSS-only responsive form example:

<!DOCTYPE html>
<html>
<head>
<title>Fully responsive forms with CSS3</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style type="text/css">
h2, h5 {
    width:80%; margin-left: 2%; padding:0.1em 0.3em;
    background-color:#444; color:#ddd;
  }
h5 {
    background-color:#ddd; color:#444;
  }
p {
    width: 100%; margin: 0; padding: 1em 0;
    text-align: center;
}
p {
    padding: .5em 0;
}
.left {
    float: left;
}
.right {
    float: right;
}
@media (max-width: 35em) {
    .left, .right {
        float: left;
        clear: left;
    }
}
.form {
    position: absolute; overflow: hidden; z-index: 10;
    width: 0; height: 0; min-height:335px;
    margin: 0 auto;
    background: #d8d8d8;
    transition: height .5s ease, width .5s ease .5s;
    /* ADD proprietary selectors if needed */
}
.form h2 {
    width: auto;
    margin: 1.5em 0 1.5em 0em;
    text-align: center; color: #ddd; font-size: 2em;
}
.form form {
    max-height: 100%; height: auto; 
}
@media (max-width: 35em) {
    .form form {
        height: auto;
    }
}
.form .section {
    width: 40%; height: calc(100% - 5em); height: -webkit-calc(100% - 5em); max-height: 100%;
    margin: 0 5%;
}
@media (max-width: 5em) {
    .form .section {
        width: 90%; height: auto;
  }
}
.form ::-webkit-input-placeholder, .form :-moz-placeholder, .form ::-moz-placeholder, .form :-ms-input-placeholder {
    color: #999999;
}
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
    width: 100%;
    color: #333333;
    box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
    background-color: inherit;
    border: none; border-bottom: 1px solid #999999;
    outline: none;
    transition: border-color .5s ease; -webkit-transition: border-color .5s ease;
    /* ADD proprietary selectors if needed */
}
.form input[type="text"]:focus, .form input[type="email"]:focus, .form input[type="tel"]:focus, .form textarea:focus {
    border-color: #333333;
}
.form input[type="text"]::invalid, .form input[type="email"]::invalid, .form input[type="tel"]::invalid, .form textarea::invalid {
    border-color: #B31B1B;
}
.form input[type="text"], .form input[type="email"], .form input[type="tel"] { 
    height: 2.5em;
    margin-bottom: 1em;
}
.form textarea {
    resize: none;
    height: 10em;
    line-height: 1.5em;
}
@media (max-width: 35em) {
    .form textarea {
        height: 2.5em;
        margin-bottom: 1em;
        line-height: 2em;
    }
}
.form .closeFormLabel, .form .sendForm {
    position: absolute;
    right: 0; bottom: 1em; 
    width: 40%;
    margin: 0 5%; padding: .5em;
    text-align: center;
    border: 1px solid #999999;
    background: inherit;
    cursor: pointer;
    box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
    /* ADD proprietary selectors if needed */
    transition: background-color .5s ease, border-color .5s ease;
    /* ADD proprietary selectors if needed */
}
.form .closeFormLabel:hover, .form .closeFormLabel:focus, .form .sendForm:hover, .form .sendForm:focus {
    background-color: #cccccc;
    border-color: #333333;
}
@media (max-width: 35em) {
    .form .closeFormLabel, .form .sendForm {
        position: relative;
        width: 90%;
        left: 0;
        margin-top: 1em;
    }
}
.form .closeFormLabel {
    left: 0;
}
@media (max-width: 35em) {
    .form .closeFormLabel {
        bottom: 1em;
    }
}
input.showForm {
    display: none;
}
input.showForm:checked + .form {
    width: 96%; height: 90%;
    box-shadow: 4px 5px 5px 5px #a5a5a5;
    overflow: auto;
    transition: width .5s ease, height .5s ease .5s;
    /* ADD proprietary selectors if needed */
}
.showFormLabel {
    position: absolute; display: block; z-index: 1;
    cursor: pointer;
    bottom: 20%; left: 25%;
    width: 50%; height: 3em;
    line-height: 3em; font-size: 1em; text-align: center; color: #333333;
    border: 1px solid #999999;
    background: inherit;
    transition: background-color .5s ease, border-color .5s ease;
    /* ADD proprietary selectors if needed */
}
.showFormLabel:hover, .showFormLabel:focus {
    background-color: #999;
    border-color: #333333;
    color: #e5e5e5;
}
@media (max-width: 35em) {
    .showFormLabel {
        width: 90%;
        left: 5%;
    }
}
</style>
</head>
<body>
  
<input type="checkbox" name="showForm" id="showForm" class="showForm">

<div class="form">
  <h2>Contact Us</h2>
  <form>
    <div class="left section">
      <input type="text" name="name" placeholder="Your name" required>
      <input type="email" name="email" placeholder="Your email" required>
      <input type="tel" name="tel" placeholder="Your telephone number" required>
    </div>
    <div class="right section">
      <textarea name="comment" placeholder="Your comment" required></textarea>
    </div>
    <button type="submit" class="sendForm left">Send</button>
    <label for="showForm" class="closeFormLabel left">Cancel</label>
  </form>
</div>

<h2>Example of a CSS driven contact form</h2><h5>p.s. Submitting this form will not produce results</h5>

<label for="showForm" class="showFormLabel">Contact Us (click here)</label>

</body>

</html>
›› go to examples ››
Fully responsive forms with CSS3

Example

A CSS-only responsive form example:

Comments

About

Contact

Get Connected
