How to Create HTML Contact Page: Contact page is very important for a user friendly website. This page is very important for a website. When a user has a problem, the user can contact the maintenance department of the website through this page for help.
Different websites create html contact page in different ways. It is often seen that the user can communicate with any kind of problem from this contact page. Many times in this contact different types of companies or organizations make different parts for their communication.
Also Read: How to add Simple html Page in our website – Website Design Step 3
Today we will learn in this article how to create a contact page using html code and how to make a work in this article we will discuss. We learned in the third step of this website design and development session how to create an html page and there we have already created a contact page. Today we will design this contact page using html code.
If you are new to this article, I would say that you must follow the previous articles, then you will understand the whole thing.
What is the contact page?
Contact page is the most important page of a website. Users use this page to contact the website maintenance department or the website’s communication department about their problems. When you visit a website you will see that there must be a contact page. Creating this page is very important when creating a website and it is compulsory.
The communication page on the website of a company or organization can be different, for example they can create a communication page in their contact with just email id or mobile number or create a communication form where you can enter your name, mobile number, email id and your problem the submit the form.
Based on the information from this contact page, the helpline of those websites will help you. If there is no communication system on your website then users will be reluctant to use your website because they will see that there is no system here to help me if I have any problem.
How to Create HTML Contact Page?
Friends, I hope you remember where we will create all the HTML files of our website. We all know the place where we need to create all the files that are needed for our website, not just HTML. Similarly, to create all the pages we need today, we need to login to our web hosting cPanel.
After logging in to cPanel we need to open the file manager option then from there we need to open the folder of public_html.
After login in to cPanel -> Click file manager -> Click public_html -> Click on +File from menu bar -> Enter file name -> Click Create New File.
New file Create Process
How Create html contact form?
Now to make our contact page beautiful with HTML code we need to edit the contact page. I hope you remember how to edit an HTML file.
Right click on contact html file -> Click Edit option -> Again click Edit option -> Then This contact file editor open new tab.
How to edit contact html file?
<form action="#" method='POST'>
<br>
<center><font size='6' face='Rockstar-ExtraBold'><strong><u>Contact with us </u></strong></font></center>
<hr>
<p>
<input name='name' type='text' required placeholder='Enter your full name'>
</p>
<p>
<input name='mno' type='number' required placeholder='Mobile number'>
</p>
<p>
<input name='email' type='email' required placeholder='Your Email id'>
</p>
<p>
<textarea name="message" type='text' placeholder="Message" required></textarea>
</p>
<br>
<div align='center'>
<input name='submit' type="submit" class="btn btn-default"
style=' float: center;
height: 39px;
overflow: hidden;
margin: 0px 0 0 0px;
padding: 0 25px;
outline: none;
border: 0;
font: 300 15px/39px ;
text-decoration: none;
color: #fff;
cursor: pointer;
background-color:green;
'/>
</div>
<br>
</form>
If you wish, you can copy and paste this code into your contact page and then save the page by clicking Save Change.
I have taken four input fields in this form. The input fields are discussed below –
#1 <input name=’name’ type=’text’ id=’name’ required placeholder=’Enter your full name’> Here 1st input field for User full name – Here the user will enter his name i.e. the user who wants to communicate will have to enter his name in this input fields.
- name=’name’ – its input field box name
- type=’text’ – its input field box type i.e. What kind of data can be entered in the input box.
- required – This means that the user will not be able to submit the form without any data in this cell, which means it is compulsory.
- placeholder=’Enter your full name’ – This means, The input field box will show what the user will type in this input field box.
- id=’name’ – ID means the ID of this input box, can we use it as we need, that is, we can provide the ID of the input box as we need.
#2 <input name=’mno’ type=’number’ required id=’mno’ placeholder=’Mobile number’> You can see that there is only one change in this input box and all of them are the same as the previous input box so let’s find out the reason for this change.
- type=’number’ – We already know that the word input box type means, what kind of data can be entered in the input box. Here we enter number. This means that only we can use numbers in the input box, that is, we cannot add any special characters or alphabets.
#3 <input name=’email’ type=’email’ required id=’email’ placeholder=’Your Email id’> You can see that there is also only one change in this input box and all of them are the same as the previous input box so let’s find out the reason for this change.
- type=’email’ – There is an input field type email here, which means we can only use the email id in this box and not anything else. The format of an email ID will be entered here as it is used. Otherwise the web browser will give you an alert notification as it is not an email ID.
#4 <textarea name=”message” type=’text’ id=’message’ placeholder=”Message” required></textarea> Multiline it to the input box. that is, many lines are used for writing. You will understand this when you run your website contact page.
Also Read: Responsive Navigation Menu CSS – Website Design Step-2
#4 <input name=’submit’ type=”submit” value=’Submit Now’ > This is a button, after giving all the details, by clicking on this button the user sends all his problems to the communication helpline.
- value=’Submit Now’ – Value means that the button here is used to determine what the name will be.
- type=”submit” – When we enter the input type key in an input field it will change to a button.
So guys I hope you find it very simple and there is no complication in this. I hope that with all these details you can easily create a contact form using HTML code. I shared the code of the complete contact form here using HTML and CSS code below.
<form action="" method='POST' class="sky-form">
<br>
<center><font size='6' face='Rockstar-ExtraBold'><strong><u>Contact with us </u></strong></font></center>
<hr>
<p>
<input name='name' type='text' id="name" required placeholder='Enter your full name' style='width:100%;font-size:18px;font-family: Times New Roman, Times, serif;text-indent:10px;'>
</p>
<p>
<input name='mno' type='text' maxlength="10" id='mno' required placeholder='Mobile number' style='width:100%;font-size:18px;font-family: Times New Roman, Times, serif;text-indent:10px;'>
</p>
<p>
<input name='email' type='text' id="email" required placeholder='Your Email id' style='width:100%;font-size:18px;font-family: Times New Roman, Times, serif;text-indent:10px;'>
</p>
<p>
<textarea rows="4" name="message" placeholder="Message" id="message" required style='width:100%; height:100px; font-size:18px;font-family: Times New Roman, Times, serif;text-indent:10px;'> </textarea>
</p>
<br>
<div align='center'>
<input name='submit' type="submit" class="btn btn-default"
style=' float: center;
height: 39px;
overflow: hidden;
margin: 0px 0 0 0px;
padding: 0 25px;
outline: none;
border: 0;
font: 300 15px/39px ;
text-decoration: none;
color: #fff;
cursor: pointer;
background-color:green;
'/>
</div>
<br>
</form>There are some HTML tags and CSS codes in this coding that we haven’t discussed yet. Friends, we will gradually discuss all the codes to understand the whole thing properly.
You can copy and paste this code into the contact page on your website and save it and run the page to see if the code is working properly. If there is any problem in the contact page then you must let us know in the comment box.
The last few words
Friends, I hope you enjoyed today’s article. You may have missed a lot of this article, so if you think you do not understand something, please let us know in the comment box. You must share this article with your friends and family.
If you have any queries regarding this article please let us know in the comment box and we will try to resolve your comment as soon as possible.