Free HTML Contact Form Code
Last Updated : Mar 11, 2024
IN - HTML CSS JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of free HTML contact form code and we will discuss about how to create a contact form in HTML.
We also provide you a free example from which you get reference and know about how to create that.
Mostly in all websites, there is an option or a section given with name contact us.
And under this a form is given with labels like name, email, subject, message and feedback. Now, let us understand how we are able to create a contact form.
Step By Step Guide On Free HTML Contact Form Code :-
Now, here below we are going to show you an example in html with the help of which this article can be done.
In the example given below, we are going to use form tag and some CSS also.
Before understanding this article, you must have basic knowledge of form. There is already some articles published on forms, you may go through them for better understanding.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>home page</title> <script src="js/jquery.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="inner"> <div class="welcome"> Contact Us </div> <div class="contact_options"> <form action="" method="post"> <div class="rleft_body"> <label for=""> Your First Name...... </label> <br> <label for=""> Your Last Name...... </label> <br> <label for=""> Please your email here....... </label> <br> <label for=""> Type your subject here........ </label> </div> <div class="rright_body"> <input type="text" name="fname" id=""> <br><br> <input type="text" name="lname" id=""> <br><br> <input type="email" name="email" id=""> <br><br> <textarea name="msg" id="msg" cols="56" rows="5" style="position: fixed;"></textarea> </div> <div class="form_submit"> <input type="submit" value="Submit" id="submit" name="button"> </div> </form> </div> </div> </div> </body> </html>
CSS file: style.css
.main{
height: auto;
width: 100%;
}
.inner{
width: 80%;
height: 580px;
border: 1px solid white;
box-shadow: 0 0 10px black;
margin: 30px auto 30px auto;
}
.welcome{
text-align: center;
padding: 20px;
font-size: 40px;
font-family: cursive;
border-bottom: 1px solid black;
background-color: black;
color: white;
}
.rleft_body
{
width: 50%;
float: left;
margin-top: 90px;
}
.rleft_body label
{
font-size: 20px;
font-style: oblique;
padding: 150px;
line-height: 2.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.rright_body{
width: 50%;
float: left;
margin-top: 100px;
}
.rright_body input{
font-size: 20px;
font-style: oblique;
width: 80%;
border: none;
border-bottom: 1px solid black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.form_submit{
clear: both;
height: auto;
text-align: center;
}
#submit{
font-size: 25px;
background-color: black;
color: white;
padding: 5px 35px 5px 35px ;
border: none;
margin-top: 80px;
}
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page.
- In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
- So, both have </head> and </title> ending tags respectively.
- Here, we create a form that is contact us form and here we link a css file, which is also provide here with html code.
- Now, let us understand structure of webpage. Here, first we create a heading for understanding that what the page is for.
- And under form tag having method post, we create some labels and their respective inputs. They are created under different divisions.
- Now, at last for submission of form we create a submit button. So, that our form gets submitted.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of this article we are able to understand html contact form and get a free html code reference from example. I hope this tutorial on free HTML contact form code helps you.
About Dikshita
