How To Make A Responsive Complaint Form Using HTML, CSS, and Bootstrap

How To Make A Responsive Complaint Form Using HTML, CSS, and Bootstrap

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

In the current era, everything is being digitalized. So are various forms. Today, we're going to code something that nobody except the submitter likes. Well, you saw it from the title: A complaint form. We will use HTML, CSS, and Bootstrap to create it in order to make it responsive.

So, without any further small talk, let's get started!

Defining the title and linking Bootstrap

If you aren't a VS code user, then add the appropriate tags like the doctype one, < head >, < body >, < style >, and don't forget to close them! Then proceed to follow the given instructions.

But if you are a VS Code user then everything's pretty "automated" for you. Open VS code, create an HTML file and start by pressing the shift key with the exclamation mark. You can access the emmet abbreviation through this shortcut. You'll be given two options: '!' and '!!!'. Select '!' as this one is more detailed and provides a good overall structure. You won't have to type out all the important tags ;)

In the < head >, you'll find the < title > tag. Between the title tag, add the name of your complaint form.

<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">
    <title>Complaint Form</title>  <!-- Define the name here-- >

</head>

Since I love Bootstrap and I'm gonna use it, the next step would be to add the link to the Bootstrap stylesheet. It is better to do these things first or else you're gonna end up like me. While making this form, I actually forgot to add the Bootstrap Link and spent a lot of time in misery. Just borrow the powers of cntr+c and cntr+v to make sure that your < head > looks as shown below:

<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">
    <title>PTCL Complaint Form</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

Before moving onto the much-awaited styling portion, we gotta finish the boring work first. Let's create the body of our form!

Form Body

First, we will define the main structure like this:

<body>

    <div class= "mainform">
    <form>

    </form>
</div>

</body

We will create all of our form fields inside the < form > tag. I added < form > inside a div to which I assigned the class name "mainform" so that later on I can easily change the style of the whole form. You might not get why I used a div now, but keep on reading and everything's gonna make sense ;)

Disclaimer: If you have a div phobia, then do not proceed as everything beyond this point is contained in divs.

What's the first thing we see in a form? The header right? So let's create one!

<div class = "header">
    <h1><b>Complaint Form</b></h1>

        <p>Please send us details about the incident you would like to report. Our Complaint Center will analyze your complaint and take the appropriate measures in order that the reported situation will not occur at any other time in the future. 
        </p>

          <hr/>
    </div>

I used simple HTML elements throughout the form so I don't think there is any need to explain this. Still, if anyone does not understand anything, be sure to ask me in the comments below or ping me on Twitter :)

Time to move on to the input fields!

Input Fields

We will use bootstrap to create nice and pretty input fields!

Let's start with the name.

<div class="form-group">
        <label for="fname"><b>First Name:</b></label>
        <input type="text" class="form-control" id="fname" placeholder="Enter first name" name="fname">
      </div>

     <br>

      <div class="form-group">
        <label for="lname"><b>Last Name:</b></label> 
        <input type="text" class="form-control" id="lname" placeholder="Enter last name" name="lname">
      </div>

If you aren't a fan of bootstrap, then you might not understand what gibberish I have written so let's dissect this!

There are some standard rules for bootstrap forms:

  • You have to wrap labels and form controls in < div class="form-group" > (this is needed for optimum spacing).

  • You have to add class .form-control to all textual < input >, < textarea >, and < select > elements.

As for as placeholder is concerned, you guys might have submitted a digital form at least once right? When you look at the empty fields, you might notice some ghost text (faded text) like "Enter name here" or whatever. That effect is achieved through placeholder.

Since it's a complaint form, you gotta add some kind of communication method. Let's add an input field of a phone number.

<div class="form-group">

        <label for="phoneNo"> <b>Phone Number: </b> </label>
        <input type="text" id="phone" class="form-control" placeholder="Enter Landline Number" name = "phoneNo" >

      </div>

All input fields will be styled at once, that's why here too, even though it is a separate div, the class is still "form-group".

All types of forms require data such as your location. So why should our form not add this field? We will! Here, we will create a dropdown menu using Bootstrap. I swear creating these forms with Bootstrap is so easy!

 <label for="Select Your Area"><b>Select Your Area</b></label>
    <select id="area" name="area" >
      <option value="----">----</option>
      <option value="I.J Colony">I.J Colony</option>
      <option value="Defence Colony">Defence Colony</option>
      <option value="Dinga">Dinga</option>
      <option value="Gazi Colony">Gazi Colony</option>
      <option value="Naseera">Naseera</option>
      <option value="Tanveer Town">Tanveer Town</option>
    </select>

We just have to add the main label and use the < select > tag here. In the option values, we will define the names of areas from where the user can select one option.

What's a complaint form when you can't even define the category of a complain?

<div id="formsection">

        <label><b>What is the category of complain you are facing?</b></label>

        <p><input type="checkbox" name="section" value="sports">Sports</p>
        <p><input type="checkbox" name="section" value="business">Business</p>
        <p><input type="checkbox" name="section" value="health">Health</p>

      </div>

"Formsection" is used to style all elements inside this div of checkboxes.

Now, all we have to do is to create an area where users can add complaint details. After all, only adding a complaint category leaves way too much room for imagination and we don't want that now.

 <label for="subject"><b>Complaint Details:</b></label>

    <textarea id="subject" name="subject" placeholder="Enter your complaint details......." style="height:200px"></textarea>

2 lines, just 2 lines are needed to create a textarea in bootstrap. Don't be awestruck by the powers of bootstrap now, wait till you create a button in just 1 line ;)

<button type="button" class="btn btn-outline-primary">Submit</button>

If we had simply written btn-primary, the whole button would be blue. But with btn-outline-primary, only the outline is blue. This primary defines the color of the button. Click here to see various colored bootstrap buttons in action.

There you go, all done! Let's style all this now, shall we ;)

< Style >

You could actually add this part to a .css file and connect it to the HTML file. It's your choice though. But since the style portion wasn't that big, I just added it in the HTML file. Using bootstrap itself makes the form responsive, but I also set the display to flex in order to make sure that our form is 100% responsive!

For the header, I just adjusted the font and font size while setting the display to flex-end.

.header{
        font-size: 17px;
        font-family: candara;
        display: flex-end;
    }

You guys remember that we wrapped up our form inside a div with class name "mainform", right? That was because I wanted our form to have a pretty gradient background.

For that to happen, let's rewind a bit and go back to the body of the form. I used inline styling along with the linear gradient property to set the background color to a pretty blue.

<body style="background:  linear-gradient(to top left, #ffffff 0%, #66ccff 100%);">

But I didn't want our input fields and text area to be of that color so that's where the mainform comes into action. We'll style it separately as shown below:

.mainform{
    margin: 50px 230px 50px 230px;
    padding: 2rem;
    border: 1px solid rgb(224,224,224) ;
    border-radius: 15px;
    box-shadow: 10px 7px 0 rgb(224,224,224);
    background-color: white;
    display: flex;
    }

It's just basic business. Add some padding and box-shadow, adjust the margins, set the display to flex and you're all set! You can also make the corner of your form curl by using the border-radius property as I did.

Now we will style all our input fields!

input[type=text], select, textarea {
    display: flex;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

What's a responsive form without any media query? Not responsive! But since we are building a responsive form, let's be friends with media queries for a bit.

@media screen and (max-width: 680px) {
  .header, .mainform, input[type=submit] {
    margin: 0px 0px 0px 0px;
  }
}

By adding these lines of code, you're all set even if a user views your form on a screen with a size less than 680px. If we hadn't added these, all our input fields would be partying wildly on a screen less than 680px. Think of media query as the discipline head of school. Makes sure that all children are in order!

Let's see how our form looks now!

1.png

2.png

I say it looks pretty good! You can get the full code here. Basically, I designed this for my brother and his color sense isn't nice at all. That's why you can see a combo of blue and grey🤦‍♀️ If it were me, the combo would be shades of purple or purple and pink! I added comments in the code to separate various elements so that it would be easier to identify them.

Hope you guys actually learned something! I'd be looking forward to seeing you guys show off with your own responsive forms😏 Making responsive forms is quite easy with Bootstrap. About time all you tailwind folks come to be friends with my buddy bootstrap ;)

Let's connect!

Twitter

Github

 
Share this