Responsive Form Using HTML And CSS

#html #css

Today I am going to demonstrate a responsive Form utilizing HTML and CSS. This is going to be a simple survey form intended for Web Developers. It includes their information, a dropdown menu that describes their current role, a checkbox feature to describe their favorite technologies and tool, a radio button feature for their recommendations, a textarea to leave any other comments or suggestions, and a submit button to submit the form. My goal here is to make it fully responsive. So let’s begin.

First thing first, I am going to make a directory where my project is going to be saved. Then open up VScode(My favorite text editor), and create index.html and style.css files. Those are the only files, we need for this project. Right now it looks something like this:

Inside the html file, I added a DOCTYPE declaration, and link tag of the stylesheet to connect the style.css file and on the right, I have a style.css file where I added a background-color to the body of the HTML page. Nothing much happening here but right now if I open up my HTML page in the browser by using open html.index command in the terminal, I can see a purple screen like so:

Now let’s create a form then we will add the CSS at the end.


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="style.css">
   <title>Developer's Survey Form</title>
</head>
<body>
   <div class="container">
       <header>
           <h1 id='title'>Web Developer's Survey Form</h1>
           <p id='description'>
               Thank you for taking the time to do this survey
           </p>
       </header>

       <form id='survey-form'>
           <div class='form-input'>
               <label id='name-label'>Name</label>
               <input type='text' id='name' placeholder='Enter your name' class='form-input-size' required />
           </div>
           <div class='form-input'>
               <label id='email-label'>Email</label>
               <input type='email' id='email' placeholder='Enter your email' class='form-input-size' required />
           </div>
           <div class='form-input'>
               <label id='number-label'>Age
                   <span>(optional)</span>
               </label>
               <input type='number' id='number' placeholder='25' min='0' max='80' class='form-input-size' />
           </div>

           <div class='form-input'>
               <p>Which option best describes your current role?</p>
               <select id='dropdown' class='form-input-size' required>
                   <option disabled selected value>Select current role</option>
                   <option value='Student'>Student</option>
                   <option value='Senior Software Engineer'>Senior Software Engineer</option>
                   <option value='Junior Software Engineer'>Junior Software Engineer</option>
                   <option value='Full Stack Web Developer'>Full Stack Web Developer</option>
                   <option value='Front-end Web Developer'>Front-end Web Developer</option>
                   <option value='Back-end Web Developer'>Back-end Web Developer</option>
                   <option value='Prefer not to say'>Prefer not to answer</option>
                   <option value='Other'>Other</option>
               </select>
           </div>

           <div class='form-input'>
               <p>Would you recommend Web Development career to a friend or family?</p>
               <input type='radio' name='answer' id='radio-btn' value='Definately' checked />Definately    </br>
               <input type='radio' name='answer' id='radio-btn' value='Maybe' />Maybe </br>
               <input type='radio' name='answer' id='radio-btn' value='Not sure' />Not sure </br>
           </div>

           <div class='form-input'>
               <p>What are your favorite Technology Languages and Frameworks?
                   <span>(Check all that apply)</span>
               </p>
               <label><input type='checkbox' id='check-box' value='Ruby on Rails'>Ruby on Rails</label>
               <label><input type='checkbox' id='check-box' value='JavaScript'>JavaScript</label>
               <label><input type='checkbox' id='check-box' value='React'>React</label>
               <label><input type='checkbox' id='check-box' value='Python'>Python</label>
               <label><input type='checkbox' id='check-box' value='Java'>Java</label>
               <label><input type='checkbox' id='check-box' value='PHP'>PHP</label>
               <label><input type='checkbox' id='check-box' value='Angular'>Angular</label>
               <label><input type='checkbox' id='check-box' value='Vue'>Vue</label>
               <label><input type='checkbox' id='check-box' value='Swift'>Swift</label>
               <label><input type='checkbox' id='check-box' value='HTML'>HTML</label>
               <label><input type='checkbox' id='check-box' value='CSS'>CSS</label>
               <label><input type='checkbox' id='check-box' value='Other'>Other</label>
           </div>

           <div class='form-input'>
               <p>Any comments or suggestions to a new Web Developers?</p>
               <textarea type='text' placeholder='Enter your comment here...'></textarea>
           </div>

           <div class='form-input'>
               <button type='submit' id='submit'>Submit</button>
           </div>
       </form>
   </div>

</body>
</html>

Above I created a header, form, and added id class div etc for reference. We will use them to style later on. Currently, it looks something like this in the browser right now:

Looks okay but let’s add some CSS to make it better and responsive. I will work each section at a time to have a better picture of how it is working. So let’s work on the body page and header part first. In the style.css file add the following code:


html{
    font-size: 16px;
}

body{
    background-color: rgba(98, 95, 241, 0.635);
    margin: 0;
    font-family: sans-serif;
    color: white;
}

.container{
  width: 100%;
  margin: 3.2rem auto 0 auto;
}

@media(min-width: 576px){
  .container{
    max-width: 540px;
  }
}

@media(min-width: 768px){
  .container{
    max-width: 720px
  }
}

header{
    text-align: center;
    margin-bottom: 1.5rem;
}

h1{
  font-weight: 400;
}

#description{
  font-weight: 200;
  font-style: italic;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5)
}

Here I am not going to talk about every CSS element we are using but I will mention the factors which could affect the responsive design. Above in html we have font-size set to 16px and further I am going to use em or rem instead of px on font-size. You can refer to this documentation about em and rem to get detailed information. Another important thing is @media, which plays a huge role to make your layout responsive. It will let you add the breakpoints and according to the breakpoints, you can style your CSS. Above I added two breakpoints and added desire width on container class based on device size. To learn more about @media refer to this documentation. The output from the above CSS looks like so:

You can check it out in all device size in your developer tool whether or not it’s responsive. Now let’s move on to the Form. It’s looking very congested right now. I am going to add a background color and some padding/margin to it and work slowly on each section.


#survey-form{
   background: rgba(21, 20, 85, 0.7);
   padding: 2.3rem 0.5rem;
   border-radius: 0.3rem;
}

.form-input{
   margin: 0 2.5rem 1.2rem 2rem;
}

.form-input-size{
   display: block;
   width: 100%;
   height: 1.5rem;
   padding: 0.3rem 0.4rem;
   border-radius: 0.2rem;
   outline: 0;
   border-style: none;
   margin-top: 0.4rem;  
}

Adding these code will output the following result:

Ahh much better right? If you notice I am using rem instead of px in most of the places. If you haven’t read the documentation about em and rem please read it from the above link I provided earlier. Now that padding, margins, and inputs look good, let’s fix the checkbox, radio buttons, and labels. Add the following in your CSS file:

p{
 font-size: 1.12rem;
}

#radio-btn,
#check-box {
 margin-right: 0.5rem;
 min-height: 1.2rem;
 min-width: 1.2rem;
}

label {
 display: flex;
 align-items: center;
 font-size: 1.125rem;
 margin-bottom: 0.5rem;
}

Here I want to mention display: flex in the label section. Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. It’s responsive so it can save some time on designing layouts. To read more about Flexbox follow this link. I also recommend that comment out each line of code and see the difference and what each one of those lines doing. Here is the result from previous changes:

We are almost there. The last thing we have to accomplish is the textarea and a submit button. So let’s add some styling to it like so:


textarea{
 width: 100%;
 min-height: 6rem;
 resize: vertical;
 padding: 0.5rem 0 0 0.5rem;
}

#submit{
 width: 100%;
 padding: 0.8rem;
 background: rgb(7, 173, 7);
 color: white;
 border-radius: 0.2rem;
 cursor: pointer;
 border: none;
}

Here I would like to discuss few things:

by adding resize: vertical; we are allowing users to only expand the textarea vertically so that it won’t go outside our form box and look odd.
cursor: pointer; will give us a pointer icon upon hover and make it easier to understand that it’s clickable.
border: none; will remove the outline border from buttons and make it more elegant.

Alright! We did it. I add the final result in mobile view as well. Make sure you test it in all device sizes as well. I hope you enjoyed this tutorial on creating a responsive form. Thank you