Creating a Basic Web Form With CSS in Minutes

Creating a Basic Web Form With CSS in Minutes!

(Updated on Jan 28, 2022)

This article demonstrates how to create fancy web forms with HTML and CSS. Included are three examples with step-by-step instructions.

So you want to create a basic styled HTML web form? Well, it’s easy! First, we will make all the elements in HTML so we can style them. Below we’ve included HTML code examples illustrating the HTML elements used to create this form. We wrap all the elements in an HTML form element.

<form>
  <div class="super-container">
    <div class="container">
      <h4>Sign Up</h4>
      <div class="username-input">
        <input type="text" placeholder="Username">
      </div>
      <div class="email-input">
        <input type="text" placeholder="Email">
      </div>
      <div class="password-input">
        <input type="password" placeholder="Password">
      </div>
      <div class="confirm-password">
        <input type="password" placeholder="Confirm Password">
      </div>
      <button type="submit">Continue</button>
    </div>
  </div>
</form>

As you see above we’ve wrapped all the elements in an HTML form element. The form element enables the form to be submitted to a server using HTML without JavaScript. In order to get this web form working, we’ll actually need more attributes in the form element to make the form work.

<form>
  <!-- HTML elements -->
</form>

What does the HTML look like without CSS?

If no CSS styles are provided, browser rendering is pretty simple; it will render without user-defined CSS styles and apply the browser default styles. The HTML we provided will render something like this below.

Creating an HTML Form Layout With No CSS
Creating an HTML Form Layout With No CSS

How to style a web form using CSS properties?

There are many different CSS properties. Below we’ll have step-by-step instructions for designing a great form layout that’s easy to use and accessible. The structures are initially created using HTML, but we enhance the form to look the way we want with many CSS styles. We’ll also throw in alternative form designs, such as a colored version and a dark theme.

Three different HTML form themes with CSS

How to create a white form theme?

A white form layout is easy to create, and the absence of color makes a white form easy to develop. Below you see the theme we will be creating.

Light Basic Web Form
Light Basic Web Form

We will use the CSS class .super-container to create the white form theme. Below you see we’ve used the background property to give the super container a light gray color.

background: #fafafa;

This tutorial includes a CSS box-shadow property to give the form a raised effect that differentiates it from the white background. We use this property on all three form themes.

box-shadow: 0 2px 4px rgb(0 0 0 / 50%);

The last task is giving the button some color to increase the click-through rate and establish a healthy user inference feel. We wouldn’t want the user spending more time on this form than necessary, and colors are essential to increase useability. The color we use is a simple blue and change the text color to white.

color: #fff;
background: #2872fa;

Below are the complete CSS properties used to create this form. We’ve omitted them when discussing the properties above to highlight the colors used to create the form. There are seven classes below.

html, body {
  font-family: Roboto,arial,sans-serif;
  height: 100%;
}

input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 10px;
    line-height: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin: 0 0 8px 0;
    border-radius: 4px;
}

.super-container {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    margin-top: 30px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
    margin-top: 40px;
}

.container {
  margin: 30px
}

button {
  height: 40px;
  width: 100%;
  margin-top: 10px;
  color: #fff;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  background: #2872fa;
}

How to create a dark form theme?

Now how do we create a dark theme? Well, if you think about it, it’s the opposite of white. We’ll be using dark colors!

The first dark color we’ll use is setting the web page background to black. As you see below, we use the CSS background property with the html and body element CSS selectors.

html, body {
  background: black;
}

Once you add the background color, the entire webpage turns black. Next, we need to look at our form container again, the .super-container class. As the first theme, we’ve created, we use the same background color, a light gray again.

background: #fafafa;

The button will get a yellowish CSS linear gradient this time. This gradient has a degree of 135 and uses two colors, #ffdb84 and #d7ad42.

background: linear-gradient(135deg,#ffdb84,10%,#d7ad42);

Below are the complete CSS properties for the dark form theme.


html, body {
  font-family: Roboto,arial,sans-serif;
  height: 100%;
  background: black;
}

input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 10px;
    line-height: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin: 0 0 8px 0;
    border-radius: 4px;
}

.super-container {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    margin-top: 30px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
    margin-top: 40px;
}

.container {
  margin: 30px
}

button {
  height: 40px;
  width: 100%;
  margin-top: 10px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  background: linear-gradient(135deg,#ffdb84,10%,#d7ad42);
  color: #000;
}

How to create a colored form theme?

The colored form theme might be the most fantastic in this tutorial. We use multiple CSS background gradients to create extraordinary color effects.

As in the previous theme, we need to set the page background color. We use a linear gradient that contains two colors, purple and blue, to achieve the colors in the photo above.

Web Page With a Gradient Background
Web Page With a Gradient Background
html, body {
  background: linear-gradient(135deg,#002c68 10%,#411b5a);
}

Moving further, we need to style the form background and the button. Again the form background says the same color.

background: #fafafa;

On the other hand, the button color changes to a color gradient similar to the page background but brighter. We use two hex colors, #0045a2 and #a644e5. This will be applied to the button element by using the button selector, button { /* Background Gradient */ }. Below you see the background property with a linear gradient value.

An HTML Button With a Gradient Background
An HTML Button With a Gradient Background
background: linear-gradient(135deg,#0045a2 10%,#a644e5);

Below are the complete CSS properties for the colored form theme.

html, body {
  font-family: Roboto,arial,sans-serif;
  background: black;
  height: 100%;
  background: linear-gradient(135deg,#002c68 10%,#411b5a);
}

input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 10px;
    line-height: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin: 0 0 8px 0;
    border-radius: 4px;
}

.super-container {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    margin-top: 30px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
    margin-top: 40px;
}

.container {
  margin: 30px
}

button {
  height: 40px;
  width: 100%;
  margin-top: 10px;
  color: #fff;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  background: linear-gradient(135deg,#0045a2 10%,#a644e5);
}

Wrapping up here

Now that we’ve walked through creating three different themes for HTML forms. If your form is as simple as ours, we can notice a trend; you only need to style three web form parts to create a “theme”. These parts include the web page background, the form background, and the button. Once you master creating color schemes, nothing will stop you from creating endless color possibilities!

Recommended Articles

Comments

Tip: Thoughtful and well written comments are voted up more often.
0 Comments

No Comments.