LEARN HOW TO CREATE CONTACT US PAGE WITH HTML ONLY
How to create a Contact US page with HTML only.
- Use Table Tags to structure a Contact US page.
- Create two columns the first column to get data from visitors, and the second column to display Contact Info.
The source code for this project is available for download by clicking ‘Download Now’ or cloning the GitHub repository.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
</head>
<body bgcolor="#005151">
<br><br>
<font color="#ffffff">
<h1 align="center" >
Contact Us
</h1>
<hr width="50" color="#934c93">
</font>
<table height="180" border="0" width="90%" cellspacing="0" cellpadding="10" align="center">
<tr>
<td align="center" valing="middle">
<font face="arial" size="6" color="#ffffff">
<br>
WE'RE READY, LET'S TALK.
</font>
</td>
<td align="center" valing="middle">
<font face="arial" size="6" color="#ffffff">
<br>
Contact Info.
</font>
</td>
</tr>
<tr>
<tdalign="center"valign="top">
<table>
<tr>
<td width="30%">
<font face="arial" size="4" color="#ffffff">
Name
</font>
</td>
<td width="70%">
<font face="arial" size="4" color="#ffffff">
<input type="text" size="45">
</font>
<br><br>
</td>
</tr>
</table>
</td>
<td align="center">
<font face="arial" size="5" color="#ffffff">
<b>Address</b>
<br>
</font>
<font face="arial" size="4" color="#ffffff">
SKS Office , Tarlai Islamabad , Pakistan
</font>
</td>
</tr>
<tr>
<tdalign="center"valign="top">
<table>
<tr>
<td width="30%">
<font face="arial" size="4" color="#ffffff">
</font>
</td>
<td width="70%">
<font face="arial" size="4" color="#ffffff">
<input type="email" size="45">
</font>
<br><br>
</td>
</tr>
</table>
</td>
<td align="center">
<font face="arial" size="5" color="#ffffff">
<b>Email</b>
<br>
</font>
<font face="arial" size="4" color="#ffffff">
Email Us Admin@SparkifySolutions.com
</font>
</td>
</tr>
<tr>
<tdalign="center"valign="top">
<table>
<tr>
<td width="30%">
<font face="arial" size="4" color="#ffffff">
Message
</font>
</td>
<td width="70%">
<font face="arial" size="4" color="#ffffff">
<textarea name="" id="" cols="43" rows="7"></textarea>
</font>
<br>
</td>
</tr>
</table>
</td>
<td align="center">
<font face="arial" size="5" color="#ffffff">
<b>Call Us</b>
<br>
</font>
<font face="arial" size="4" color="#ffffff">
+92 319 2171807
</font>
</td>
</tr>
<tr>
<tdalign="center"valign="top">
<table>
<tr>
<td width="30%">
<font face="arial" size="4" color="#ffffff">
</font>
</td>
<td width="70%" >
<button >
<font face="arial" size="4" color="black" >
Submit
</font>
</button>
<br><br><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
EXPLANATION
Overall Structure:
The code creates a simple contact form with two important sections:
A section for user input, which includes fields for name, email, and message.
Second section is for contact information, showing the organization’s address, email, and phone number.
The form is visually divided into two columns using a table layout.
The color scheme is dark blue (#005151) with white textual content (#ffffff).
Page content:
Heading: A large “Contact Us” heading centered on the page.
Horizontal Rule: A purple line visually sets apart the heading from the rest of the content material.
Table: The main structure for the form, set to 90% width.
Rows: Each row contains a label and input field for a particular piece of information (name, email, message), or contact details for the company (address, email, phone number).
Cells: Divide the form into sections for user input and contact information.
Input Fields: Text boxes for user input (name, email, message).
Submit Button: A button for submitting the contact form.
Contact details: Display the company address, email, and phone number.
Formatting:
Background Color: Dark blue color (#005151) is selected as a background color for the web page.
Text Color: White (#ffffff) is selected for contact.
Font Face, Size, Alignment: The font face, size, and alignment are specified for various elements using the font tag.
Table Alignment: Align=”center” attribute is used to centerize the page.
Thanks for reading this article.