How to Create a Contact Us Page in HTML
Every website should have some type of contact on that page. Whether it's a customer inquiry or its a job inquiry, a contact page makes the website professional and reliable. In this beginner friendly guide you will learn how to make a simple and clean contact page by only using HTML and CSS without using any advance tools.
This is perfect if you're working on your first project or planning to build your own personal website.
let's learn step by step
Why a Contact Us Page is Important
A Contact Us page is an important part of a website. This gives your visitors a way to get in touch, whether with a question or to provide feedback.
By making a Contact Page you can do the followings
You can build trust with your users
Provides a direct communication line
Makes your website look professional
Even if you're a beginner, a contact page shows that you're taking your website seriously.
Step 1: Setting Up the HTML Structure
First, we need to create a basic HTML structure that is enough for the Contact Us page. This structure will have a heading, form elements (such as name, email, and message fields), and a submit button.
Here is a simple example:
<!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>
<h1>Contact Us</h1>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" required></textarea><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>
Key Elements:
Form: This is a container that wraps your input fields.
Label: Gives a description for each input field (such as Name, Email, Message).
Input: These are the fields where the user will type his information.
Textarea: This is a long area where the user can type his message.
Submit Button: This is the button that will send the form data.
Step 2: Styling the Contact Page with CSS
Now, we will make our contact page a little more beautiful with some textures. This step will improve the user experience by adding proper spacing and alignment.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
h1 {
text-align: center;
color: #333;
margin-top: 50px;
}
form {
width: 300px;
margin: 30px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
label {
font-size: 14px;
color: #555;
}
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #007BFF;
color: white;
cursor: pointer;
border: none;
padding: 10px;
border-radius: 4px;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
What it will do:
Body Styling: Sets a simple font and background color.
Form Styling: Centers the form, adds padding, background, and rounded corners.
Input Styling: Makes fields cleaner, with padding, borders, and width adjustments.
Submit Button Styling: Creates a clickable button that changes color when hovered.
Preview of the Contact Us Form
This is how your form will look after applying basic HTML and CSS:
Step 3: Adding a Thank You Message (Optional)
Now what's this JavaScript code will do:
Prevents the form from reloading the page when submitted.
Displays an alert box with a thank you message to the user.
Resets the form fields.
Sample Form Data
Form Submission with Thank You Message
When a user submits the form, a thank you alert is shown using JavaScript:
Form Reset After Submission
The form fields are cleared automatically after submission, making it ready for the next message:
Test Your Contact Page
Once you add the HTML structure and text, you'll need to test your contact page. Check this by opening your file in a web browser:
Form should be clean and well spaced
Every input field should be
The submit button should be functioning and an alert or thank you message should be shown.
Frequently Asked Questions (FAQs)
Do I need to use JavaScript for that page?
Answer: No, JavaScript is optional. You can create a simple form using only HTML and CSS. JavaScript is required only if you want to show a thank you message or validate the form.
Can I have the form submitted to my email?
Answer: In this tutorial we have not added any backend functionality like email sending. If you want form submissions to go to your email, you will need to use server-side coding like PHP or any backend language
How can I make my form mobile-friendly?
Answer: You can make the form mobile-friendly by ensuring that CSS is responsive. Like using percentage instead of fixed pixel sizes and apply media queries that adjust the layout on smaller screens.
Conclusion: A Simple, Effective Contact Page
Creating a Contact Us page with HTML and CSS is a basic skill you should learn. This page will build trust with your visitors and give them a simple way to get in touch. It's an important addition to your personal website, portfolio, or business page.
We have learned
How to style it to look clean and professional
How to display a thank you message using JavaScript
The submit button should be functioning and an alert or thank you message should be shown.
Remember, this is just the beginning. As your skills improve, you can add more advanced features like form validation, email functionality, and spam protection. But for now, this simple Contact Us page is perfect for you.
Now create your contact page, Happy coding
