### Step 1: HTML Structure
Start by creating the basic HTML structure for your contact form. You can include fields such as name, email, message, and a submit button.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
<link rel="stylesheet" href="styles.css">
<title>Contact Us</title>
</head>
<body>
<div class="container">
<h1>Contact Us</h1>
<form id="contact-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
``
### Step 2: CSS Styles
Next, create a CSS file that styles your page, `styles.css`. Use media queries to make the form responsive.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
}
```
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea {
height: 150px;
resize: vertical;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
/* Responsive Styles */
@media (max-width: 600px) {
.container {
padding: 15px;
After
CSS
*
*
h1 {
font-size: 24px;
}
*
button {
padding: 15px;
}
}
```
### Step 3: JavaScript (Optional)
In case you need to add some form validation or you are gonna handle the form submission via javascript you can include a script like this one:
```javascript
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form from submitting the traditional way
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// You can add code here to send the form data to your server
alert(`Thank you for your message, ${name}!`);
document.getElementById('contact-form').reset(); // Reset the form
});
```
Step 4: Testing and Deployment
- **Test your page**: For the responsiveness, resize the browser window and see how it would feel like if the form would respond in case all elements are well aligned and accessible in that particular screen size.
- **Deploy your page**: Once satisfied, you can upload it to your web server.
### Additional Tips
1. **Use a Framework**: You can consider using a CSS framework such as Bootstrap or even Tailwind CSS for faster development and quality options in styling.
2. **Accessibility**: Make your form accessible. Label when necessary, and use ARIA roles where needed.
3. **Validation**: Implement both client-side and server-side data integrity validation of submitted data.
With this, you should have a good start on creating a responsive "Contact Us" page. Feel free to ask for further assistance or more features.
