We all have seen wonderfully designed forms on sites which compel us to fill the form without giving a reason to skip. Right? Yes, and that is the achievement of the coder and the sales team to get one more user, subscriber or lead.
USABilla defines webforms as something that is used by customers to reach the business and for businesses to generate leads.
Basically, there are multiple purposes of adding a form to our website. And more often than not it is sales, but the coder has a vital role to play. WPForms lists out some very important reasons you might need a form for your website.
We will learn how to add forms and later how to decorate it to lure the visitor to fill in. Let’s check the basic code for adding a simple form.
<html> <head> <title> How to add forms using CSS </title> </head> <body> <p> Type 1:- Full width </p> <form> <label for="hola"> First Name </label> <input type="text" id="fname" name="fname"> </form> <p> Type 2:- Half width </p> <form id="check"> <label for="hola"> First Name </label> <input type="text" id="fname" name="fname"> </form> </body> </html>
CSS File:
input {
width: 100%;
}
#check {
width:50%;
}
Here’s how the output will be:
In the above code we have used <label> and <input> as nested tags inside <form> and every time we use the tag <form> it adds a field for collecting data. The attributes used in the <input> tag, type can have different values like text, number, password, etc.
The asterisk sign which you see while filling on any website comes on because the type of the input text would have been set to “password”. We have used text here.
The id property used in the <input> tag is useful when using a PHP file to take action and also to store the data.
The property used in the CSS file is width which helps us to set the size of the field to enter the data. We have used 100% & 50% to show how it varies in the final image.
Also, understand how we have called these tags in the CSS file. #check specifically orders the form with id=check and overrides the input method. If we remove the id of the form and delete the #check, both forms will be of full width as written inside the input{}.
Different Fields
Let’s learn some different fields by adding borders around the box, background color, or small icons in the field. In the following code, we have used three different fields.
The first one is with a green border with a 2px line around and it is called without using any id. The other two input tags have been assigned an attribute id ‘name’ & ‘check’. These are used to call in the CSS code to give a red background color and to add attribute value.
The attribute value used here is CSSNewbies which will be displayed in the field by default over the background color green. So, let’s see the code below:
<html> <head> <title> How to add forms in HTML </title> </head> <body> <p> Different fields </p> <form> <label for="fname"> Name 1 </label> <input type="text" id="fname" name="fname"> </form> <form> <label for="fname"> Name 2 </label> <input type="text" id="name" name="fname" value="CSSNewbies"> </form> <form> <input type="text" id="check" name="search" placeholder="Search.."> </form> </body> </html>
CSS File:-
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 6px 0;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
}
#name {
width: 60%;
padding: 14px 20px;
margin: 10px 0;
box-sizing: border-box;
background-color: red;
color: white;
}
#check{
width: 100%;
box-sizing: border-box;
border: 2px solid grey;
font-size: 20px;
background-color: white;
background-position: 10px 10px;
padding: 14px 18px 14px 30px;
}
Here’s the output for the above code:
Conclusion
In this guide, we saw how to add forms in CSS. We learned how to add a simple form and then how to add background color, border, etc. to the form. You can write your own codes to practice different kinds of forms.
To keep learning such amazing CSS codes, subscribe to our blog!
To learn how to add CSS Box Model, visit our previous blog!