How to Create a Simple Form Using Flex box

A form is one component that almost all websites do have,  but the easier and well designed your form appears, the better it is for your site visitors who are going to use the form. We will be learning how tio use flex box to design a simple form. The reason for choosing flex box is that

1.Flex box offers a flexible and easy design. In addition,

2. flex box also offers responsive design.

 however, there are some default properties set once you display an item flex, a very good example is the content  justification which is set to stretch . By default, the value of justify content is set to stretch, if this value is not changed or overridden, you will be left with the option of margin to correctly justify a flex box content. Designing a form, be it a contact form or a registration form or any kind of form, you may always want it to be well aligned at the center of the page.

Two Good Reasons Why You Should Have a Simple form

  1. It will be easier for your site visitor to use and essentially the right data to submit
  2. And it will help the site owner to as well get the right data needed from your site visitors   

Below is a simple example of how to correctly create a form that is correctly aligned using flex box.

 <section class=”main-container”>

      <h2>CONTACT US</h2>

      <form >

        <div>

          <!– name –>

          <label for=””>Name</label>

          <input type=”text” placeholder=”” id=”name” />

          <!– subject –>

          <label for=””>Subject</label>

          <input type=”text” placeholder=”” id=”subject” />

          <!– number –>

          <label for=””>Phone</label>

          <input type=”number” placeholder=”” id=”phone” />

          <!– email –>

          <label for=””>Email</label>

          <input type=”email” name=”” placeholder=”” id=”email” />

          <!– textArea –>

          <label for=””>Leave a Message</label>

          <textarea cols=”33″ rows=”6″ placeholder=”” id=”textarea”></textarea>

          <button>Submit</button>

        </div>

      </form>

    </section>

You might just be annoyed seeing your from at the moment without any styling.

using flexbox to design the form, click here to learn the different way to correctly align flex box contents

CSS

body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  width: 100%;

  background-color: #008793;

}

.main-container {

  padding: 10px 20px;

  width: 300px;

  background-color: white;

  border-radius: 7px;

}

h1 {

  text-align: center;

  margin: 20px;

}

.main-container input {

  display: block;

  padding: 8px;

  margin: 10px 0;

  width: 100%;

  font-weight: bold;

  border-radius: 7px;

  border: 2px solid gray;

}

.main-container textarea {

  font-weight: bold;

  padding-left: 10px;

  padding-top: 10px;

  border-radius: 7px;

  border: 2px solid gray;

}

.main-container button {

  background-color: #008793;

  width: 100%;

  padding: 10px;

  border-radius: 10px;

  color: white;

  font-weight: bold;

  outline: none;

  border: none;

  margin-top: 20px;

  cursor: pointer;

}

form small screen

And there you have a very simple and nice form, but there is a flavor I would like to add. if you look at the desiing on the big screen,  its just not too interesting to me (just my opinion) and so, I want a different look on a bigger screen. And here is how we go

@media screen and (min-width: 768px) {

  body {

    justify-content: flex-start;

        background: url(“../images/contact-nurse.jpeg”) right/70% no-repeat,

      linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);

  }

  .main-container {

    margin-left: 4rem;

    width: 500px;

  }

}

you should have a more nice form on the bigger screen like the one below.

form bigger screen

Again, it is just my opinion to add those extra lines of codes, So the main idea remain the same, which is about making a simple form.

Leave a Comment

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