How To Create A Modern HTML Form With CSS
Introduction
With the proliferation of free services in exchange for personal information, a modern HTML form has become more important in the capture of email addresses, passwords, usernames, etc. The inability to offer a seamless and pleasant experience in the informational exchange might cause your users to throw up their hands and rethink their want to use your service. In addition, today’s web is leaps and bounds better looking than years before. With more and more website builders becoming mainstream and offering modern themes it’ll be harder to convince users that your product is exciting if your HTML form is bland and unthoughtful. In this tutorial, I’ll show you how you can go from this …
To this …
Plan Of Attack
The steps for this tutorial fall into three categories:
- Create HTML Skeleton
- Position HTML Form
- Style HTML Form
Step #1: Create HTML Skeleton
Thankfully forms aren’t all that hard to write so we can get to the fun stuff (Styling the HTML form) quicker. However, there are a couple of things we need to discuss before we rush off to do our styling. Let’s begin…
To start off we’ll just create the basic structure of an HTML Document
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>A Better Form</title>
</head> <body id="body">
</body></html>
Once we have the basic structure down for our HTML Document lets build out the form within the body tag
.
.
.<body id="body">
<div class="formContainer">
<h1>Sign Up</h1>
<form onSubmit=formSubmit(event)>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br>
Favorite Color:<br>
<input type="text" name="color"><br>
Favorite Food:<br>
<input type="text" name="food">
<br>
<input type="submit" value="Submit">
</form>
</div>
</body>
<script>
function formSubmit(event) {
event.preventDefault();
}
</script>
.
.
.
Nothing too interesting here. We’ve created a top-level container named “formContainer” to hold our form. This will be essential for step two when we try positioning the form. In regards to our form, we have specified that when we click the submit button we want to call “formSubmit(event)” with the event that triggered the function. Within the function, we just call “event.preventDefault();” so that if we accidentally hit the submit button our page doesn’t get refreshed. Just a minor thing, not really important to the overall purpose of this article.
Your form should now look something like this …
Step 2: Position HTML Form
Here is the portion which people might have the hardest time getting their form to look just right. However, a lot of layout issues/hacks can be resolved with CSS Flexbox and that’s what we’ll be using today.
We’ll be centering the form both vertically and horizontally. This is easily achievable with just three attributes: “display: flex”, “justify-content: center”, “align-items: center”.
Our first attribute “display: flex” signifies that we’ll be using CSS Flexbox. The next one “justify-content: center” horizontally centers the element within our form container. Lastly, we have “align-items: center” which vertically centers our content.
Let’s actually apply this to our code. At the top of the CSS file add this …
body {
display: flex;
justify-content: center;
align-items: center;
}You might notice that the form doesn’t seem to be quite centered. That’s because of the height of our body tag. Let’s fix that with one line …
body {
.
.
.
height: 100vh;
}Cool. Now we have a vertically and horizontally centered form. The next thing we’ll do is start tweaking the layout of our form container.
Go ahead and add this to the bottom of your CSS file …
.formContainer {
display: flex;
justify-content: center;
align-items: center;
}You will now see that the Sign Up header is to the left of our form instead of on top. This is actually expected. The way CSS Flexbox handles its elements by default is putting each child element in a row type direction. We can change this behavior with the “flex-direction: column” attribute. Add it to the bottom of the formContainer class like so …
.formContainer {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}Awesome so now we should see the Sign Up header at the top of our form.
With that addition, we have a final product that looks like this …
Step #3: Style HTML Form
Here is the real focus of our article. Spicing the form up with some extra CSS styles.
Because we’ll be switching the font color to white let us change our background color first.
A really good way to spruce up your form’s page is to have a compelling high-quality background image. We can achieve this with just linear gradients and a selection of complementary colors. For the color selection, I’ll be using www.material-ui.com/style/color/
I generally find a diagonal gradient to be best. Go ahead and drop these three lines in our body class
body {
.
.
.
background: linear-gradient(to top left, #4A148C, #C51162);
background-repeat: cover;
color: white;
}Because minimalism is a great way to make your design feel modern lets get rid of every line in each of our input boxes except the bottom one, creating a nice white underline. Add this to the bottom of the CSS file
input {
margin-bottom: 5vh;
border-right: none;
border-top: none;
border-left: none;
background-color:transparent;
outline: none;
color: white;
caret-color: white;
}And because we don’t want any wasted space lets go ahead and change up our form to use placeholder text for the inputs titles
<form onSubmit=formSubmit(event)>
<input type="text" id="firstname" name="firstname"
placeholder="First
Name" onfocus="this.placeholder=''" onblur="this.placeholder='First
Name'"><br> <input type="text" id="lastname" name="lastname" placeholder="Last
Name" onfocus="this.placeholder=''" onblur="this.placeholder='Last
Name'"><br> <input type="text" id="favoritecolor" name="favoritecolor"
placeholder="Favorite Color" onfocus="this.placeholder=''"
onblur="this.placeholder='Favorite Color'"><br>
<input type="text" id="favoritefood" name="favoritefood"
placeholder="Favorite Food" onfocus="this.placeholder=''"
onblur="this.placeholder='Favorite Food'"><br>
<br>
<input type="submit" value="Submit">
</form>
This is good but we still need to style the placeholder text as it doesn’t look good grayed out. Place this block at the bottom of your CSS file.
input[type=text]::placeholder {
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
We are almost done.
The next item we need to change is the submit button. Add this to the bottom of your CSS file
input[type=submit] {
background: rgba(255,255,255,.2);
width: 100%;
padding: 2vh;
border: none;
cursor: pointer;
border-radius: 4px 4px;
}Adding opacity to your buttons can make them blend in more to the background yet still have some sort of separation. We also add in a change to the buttons borders. Essentially sanding off the edges to make it a smoother design.
Our final adjustment is to make sure our form is always a relative size to the screen. Add this to the bottom of the CSS file …
.formContainer {
.
.
.
height: 80vh;
width: 20vw;
}This gives us an upright rectangle which suits the column layout we specified for our usage of CSS Flexbox.
Our final product should look like this …
Conclusion
Like stated earlier, forms are becoming more essential as we transition to a world of information collection. A good way to entice your users is to make sure when you are asking them for their personal information the process is as pleasant and frictionless as possible. Creating modern beautiful looking forms can help alleviate any reservations a person might have about forking over private data. You could go so far as to inject CSS animations into your form if you wanted too. However, with this tutorial, you should now at least have an understanding of what goes into making a simple modern HTML form.
