Creating and designing a website is simple but the tough part comes in creating a contact us form with responsive. Every form is different and designed by depends on their requirement needs.
Different contact forms are
- Contact form in design in HTML and CSS for contact page & home page
- Register form design in HTML and CSS
- Email subscription form design in HTML and CSS
- Login form design in HTML and CSS
These are the forms we mostly use in our daily code design in websites.
Content of Article:
- Learn Basics of Form tags and attributes
- HTML text field in contact form
- HTML text area field in the contact form
- HTML phone number field in the contact form
- HTML radio buttons in contact form
- HTML checkboxes field in contact form
- HTML file upload in contact form
- The HTML password field in the contact form
- HTML dropdown in contact form
- HTML submit button in contact form
- HTML reset button in contact form
In this article we learn the basics of every field needed in contact form and tested in live. These fields may use in your contact form by your requirement needed.
We show you how to create a contact form in html css code and it would be responsive in all devices and friendly usage form. We look into each tag usage and it’s importance in the fields.
This tutorial will help you to create your own form depends on your requirements needed. You can just copy and past the code in code editor to design your contact form or any type of form you need to design for your website you want it.
Learn Basics of Form tags and attributes
Before we creating an any type of form we look into the tags and attributes are used in form fields. How they work and what the important of those tags and attributes.
<form action="send.php" method="post">
</form>
The above code shows the basic tags to create a any form. In this form tag contains various parameters options available let we look into it briefly
- Action: this attribute tells your form where to go after submission or in other words this attribute contains a value with a file which validates your form submission.
- Method: These attributes have two values are “POST” & “GET”. Most of the form contain with POST value. (GET – will attach the form data to be on the page URL, which is not the best practices & not good for secure your data). Where here we created a send.php file to validate the contact form.
HTML text field in contact form (Single line text area)
<form action="send.php" method="post">
<label for=""><b>First Name: </b></label> <br><br>
<input type="text" name="firstname" id="">
</form>
Label in the above code which help to show the text in the contact form and it works as a default as inline style.
Input – this element is used to accept the data form the used. This input element contains with different attribute based on the field we need in contact form.
- type: this type attribute contains different values are – ( button, checkbox, color, date, email, file, hidden, image, number, password, radio, range, reset, search, submit, tel, text, time, URL ).
- We discuss all the type attribute one by one below sections.
- Text: the text value to the type attribute which creates a text field area to accept data.
HTML textarea field in the contact form (multiple line text area)
<form action="send.php" method="post">
<label for=""><b>Message: </b></label> <br><br>
<textarea name="message" id="" cols="30" rows="10"></textarea>
</form>
textarea – textarea field will gives an option to create a multiple line text area. Which mostly we use this textarea field for message or query field areas.
HTML phone number field in contact form
<form action="send.php" method="post">
<label for=""><b>Mobile Number: </b></label> <br><br>
<input type="tel" name="phone" id="" minlength="10" maxlength="12">
</form>
tel – this value to type attribute will controls a phone number in the field and take only numbers as input.
Minlength & maxlength will control the length of the phone number, show the user can’t do malfunction of entering more or less numbers in phone number field.
HTML radio buttons in contact form
<form action="send.php" method="post">
<label for=""><b> Gender:</b></label>
<input type="radio" name="gender" id="" value="male"> Male
<input type="radio" name="gender" id="" value="female"> Female
<input type="radio" name="gender" id="" value="others"> Others
</form>
radio – radio is a value to type attribute to create radio button set, as the above code shows the user to pick his gender.
name = “gender” – here the name attribute has same value for all 3 inputs, because the all inputs contain to the one field.
value = “valuename” – when user choose the one option then that value data is taken as input to store data.
HTML checkboxes field in contact form
<form action="send.php" method="post">
<label for=""><b> Select your Branch:</b></label>
<input type="checkbox" name="select" id="" value="ece" checked> ECE
<input type="checkbox" name="select" id="" value="eee"> EEE
<input type="checkbox" name="select" id="" value="CSE"> CSE
<input type="checkbox" name="select" id="" value="mech"> MECH
<input type="checkbox" name="select" id="" value="civil"> CIVIL
</form>
checkbox – checkbox is similar to the radio but, the difference is a square box. Test the checkbox by replace the type attribute value radio as checkbox.
Checked – the new attribute checked which will select the user answer by default check as you can check in above example.
HTML file upload in contact form
<form action="send.php" method="post">
<label for=""><b> Upload your photo:</b></label>
<input type="file" name="upload-photo" id="">
</form>
In some of registration applications you have observed the option of upload the Student photo & student signature. Mostly you see this option in competitive exams registration form.
file – use the file value to the type attribute to create this option. Check the above example.
HTML password field in contact form
<form action="send.php" method="post">
<label for=""><b> User Name:</b></label>
<input type="text" name="user-name" id=""> <br><br>
<label for=""><b>Password:</b></label>
<input type="password" name="password" id="">
</form>
The above fields used in login forms. To create the user form us the one input field as password value to the type attribute.
HTML dropdown in contact form
<form action="send.php" method="post">
<label for=""><b> Select your snacks:</b></label>
<select name="select-food" id="">
<option value="tea">Tea</option>
<option value="biscut">Biscut</option>
<option value="coffee">Coffee</option>
<option value="soft-drink">Soft Drink</option>
</select>
</form>
When you want your users to select the options which you listed as like in food delivery apps you observe the select the food and number of quantity you need. See the above example we created the select food you like which we provide.
By default one of the option is to be select so we used the one food item by default selection.
HTML submit button in contact form
<form action="send.php" method="post">
<label for=""><b> Select your snacks</b></label>
<select name="select-food" id="">
<option value="tea">Tea</option>
<option value="biscut">Biscut</option>
<option value="coffee">Coffee</option>
<option value="soft-drink">Soft Drink</option>
</select>
<input type="submit" value="Send form">
</form>
Finally we need to submit the filled form data to the website handler. So, for that we use the submit button.
Submit – use the submit value to the type attribute
Value attribute takes the text which will show on the button. As you can observer this in above example we added the submit button to the select section.
When you submit the form then the action file will take action to send the information to the website owner.
HTML reset button in contact form
<form action="send.php" method="post">
<label for=""><b> Select your snacks</b></label>
<select name="select-food" id="">
<option value="tea">Tea</option>
<option value="biscut">Biscut</option>
<option value="coffee">Coffee</option>
<option value="soft-drink">Soft Drink</option>
</select>
<input type="reset" value="reset form">
</form>
If you want to provide an option to the users to reset the filled data in the form then, use the reset value to the type attribute.
Conclusion:
Till upto now I have covered all the fields which we use in the form field. Now you can create your custom form by used above examples just copy and past it.
At below I providing you a sample contact form to you, just copy and past in your website.
<!DOCTYPE html>
<html lang="en">
<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>Creating Contact form</title>
<style>
#shivaform {
background-color: aquamarine;
margin: 20px;
padding: 20px;
width: 400px;
}
label {
font-weight: bold;
}
.butt {
background-color: blue;
color: whitesmoke;
font-weight: bold;
padding: 10px 20px;
border-radius: 40px;
}
</style>
</head>
<body>
<!-- form tag used to create a contact form & all the input fields must in under this tag -->
<form action="#" method="POST" id="shiva-form">
<!-- labels are used to place the name fields -->
<label for="">First Name:</label>
<input type="text" placeholder="Enter your first name"> <br><br>
<label for="">Second Name:</label>
<input type="text" placeholder="Enter your second name"><br><br>
<!-- mobile number with range -->
<label for="">Mobile Number:</label>
<input type="tel" size="12" name="mobile" id=""><br><br>
<!-- email id -->
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required> <br><br>
<!-- radio button option -->
<label for="">Enter your gender</label>
<input type="radio" name="gender" id="" value="male">Male
<input type="radio" name="gender" id="" value="female">Female
<input type="radio" name="gender" id="" value="others">others<br><br>
<!-- check button option -->
<input type="checkbox" name="TC" id="" required>
<label for="">Are you accepting our terms</label>
<br><br>
<!-- submit button -->
<input type="submit" value="submit" class="butt">
</form>
</body>
</html>
If you have any query in the above any area, comment below it will provide the solution to you. If you need the custom registration form / contact form / login form just comment below we help you.
