Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Responsive Form using CSS3 and HTML5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 313
    Comment on it

    Hello, all readers I have created a responsive form by simply using the HTML5 and CSS3 elements.In my example using media queries I have made the form responsive by setting the values of the particular elements.

    In this I have created a outerbox div along with the innerbox div containing the form elements using the form and input tags.

    Below is the HTML Code:-

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <title>Responsive Form</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    
    <link rel="stylesheet" type="text/css" href="css/media.css">
    
    </head>
    
    <body>
    
    <!-- =Form container start= -->
    
    <div class="container clearfix">
    
    <h1>Responsive Form</h1>
    
    <!-- =outer box start= -->
    
    <div class="outer-box">
    
    <!-- =inner box start= -->
    
    <div class="inner-box">
    
    <!-- =form start= -->
    
    <form class="form" id="form1">
    
    <p class="name">
    
    <input name="name" type="text" class="feedback-input" placeholder="Name" id="name" />
    
    </p>
    
    <p class="email">
    
    <input name="email" type="text" class="feedback-input" placeholder="Email" id="email" />
    
    </p>
    
    <p class="text">
    
    <textarea name="text" class="feedback-input" id="comment" placeholder="Comment"></textarea>
    
    </p>
    
    <div class="submit">
    
    <input type="submit" value="send" id="button-blue" />
    
    </div>
    
    <div class="ease">
    
    </div>
    
    </form><!-- =form end// -->
    
    </div><!-- =inner-box end// -->
    
    </div><!-- =outer box end// -->
    
    </div><!-- =conatiner end// -->
    
    </body>
    
    </html>

    Below is the CSS Code:-
     

    body{
    
    font-family: 'Montserrat', sans-serif;
    
    background-color: #6286A0;
    
    }
    
    h1{
    
    text-transform: uppercase;
    
    font-size: 35px;
    
    font-weight: bold;
    
    text-align: center;
    
    }
    
    .outer-box{
    
    width:100%;
    
    float:left;
    
    padding-top:0px;
    
    }
    
    
    
    .inner-box {
    
    background-color:rgba(72,72,72,0.4);
    
    padding-left:35px;
    
    padding-right:35px;
    
    padding-top:35px;
    
    padding-bottom:50px;
    
    width: 450px;
    
    float: left;
    
    left: 50%;
    
    position: absolute;
    
    margin-top:30px;
    
    margin-left: -260px;
    
    -moz-border-radius: 7px;
    
    -webkit-border-radius: 7px;
    
    }
    
    
    
    .feedback-input {
    
    color:#3c3c3c;
    
    font-family: Helvetica, Arial, sans-serif;
    
    font-weight:500;
    
    font-size: 18px;
    
    border-radius: 0;
    
    line-height: 22px;
    
    background-color: #fbfbfb;
    
    padding: 13px 13px 13px 54px;
    
    margin-bottom: 10px;
    
    width:100%;
    
    -webkit-box-sizing: border-box;
    
    -moz-box-sizing: border-box;
    
    -ms-box-sizing: border-box;
    
    box-sizing: border-box;
    
    border: 3px solid rgba(0,0,0,0);
    
    }
    
    
    
    .feedback-input:focus{
    
    background: #fff;
    
    box-shadow: 0;
    
    border: 3px solid #3498db;
    
    color: #3498db;
    
    outline: none;
    
    padding: 13px 13px 13px 54px;
    
    }
    
    
    
    .focused{
    
    color:#30aed6;
    
    border:#30aed6 solid 3px;
    
    }
    
    
    
    /* Icons ---------------------------------- */
    
    #name{
    
    background-image: url('../images/name.svg');
    
    background-size: 30px 30px;
    
    background-position: 11px 8px;
    
    background-repeat: no-repeat;
    
    }
    
    
    
    #name:focus{
    
    background-image: url('../images/name.svg');
    
    background-size: 30px 30px;
    
    background-position: 8px 5px;
    
    background-position: 11px 8px;
    
    background-repeat: no-repeat;
    
    }
    
    
    
    #email{
    
    background-image: url('../images/email.svg');
    
    background-size: 30px 30px;
    
    background-position: 11px 8px;
    
    background-repeat: no-repeat;
    
    }
    
    
    
    #email:focus{
    
    background-image: url('../images/email.svg');
    
    background-size: 30px 30px;
    
    background-position: 11px 8px;
    
    background-repeat: no-repeat;
    
    }
    
    
    
    #comment{
    
    background-image: url('../images/comment.svg');
    
    background-size: 30px 30px;
    
    background-position: 11px 8px;
    
    background-repeat: no-repeat;
    
    }
    
    
    
    textarea {
    
    width: 100%;
    
    height: 150px;
    
    line-height: 150%;
    
    resize:vertical;
    
    }
    
    
    
    input:hover, textarea:hover,
    
    input:focus, textarea:focus {
    
    background-color:white;
    
    }
    
    
    
    #button-blue{
    
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    
    float:left;
    
    width: 100%;
    
    border: #fbfbfb solid 4px;
    
    cursor:pointer;
    
    background-color: #3498db;
    
    color:white;
    
    font-size:24px;
    
    padding-top:22px;
    
    padding-bottom:22px;
    
    -webkit-transition: all 0.3s;
    
    -moz-transition: all 0.3s;
    
    transition: all 0.3s;
    
    margin-top:-4px;
    
    font-weight:700;
    
    }
    
    
    
    #button-blue:hover{
    
    background-color: rgba(0,0,0,0);
    
    color: #0493bd;
    
    }
    
    
    .submit:hover {
    
    color: #3498db;
    
    }
    
    
    .ease {
    
    width: 0px;
    
    height: 74px;
    
    background-color: #fbfbfb;
    
    -webkit-transition: .3s ease;
    
    -moz-transition: .3s ease;
    
    -o-transition: .3s ease;
    
    -ms-transition: .3s ease;
    
    transition: .3s ease;
    
    }
    
    
    
    .submit:hover .ease{
    
    width:100%;
    
    background-color:white;
    
    }
    
    

    In the CSS , I have styled the input fields as when we focus on input box, blue color will highlight in border. I have also added transition to the submit button which on hover it generates sliding effect over the button containing white colour.

    Below is the Media Query Code:-

    @media only screen and (max-width: 580px) {
    
    .inner-box{
    
    left: 3%;
    
    right: 3%;
    
    width: 88%;
    
    margin-left: 0;
    
    padding-left: 3%;
    
    padding-right: 3%;
    
    }
    
    }
    
    @media only screen and (max-width: 390px){
    
    h1{
    
    font-size:29px;
    
    font-weight: 600;
    
    }
    
    }

    In the media queries, I have set the elements properties at the breakpoints for the responsive design.

    Conclusion:-

    Hence, I created a responsive form using HTML5 and CSS3 with transition effect.

    Note:-The following example will run on the latest version browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .


     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: