How to Create a Code-Sharing Box with Syntax Highlighting and Language Labels
This implementation works with WordPress or any PHP-based CMS. For static sites, convert the PHP shortcode to direct HTML markup.
Dive into the world of web development with our in-depth guides and tutorials. Whether you're a beginner taking your first steps or a seasoned developer seeking to refine your skills, this blog is your go-to resource. We break down complex concepts into digestible pieces, covering everything from HTML and CSS fundamentals to advanced JavaScript frameworks and backend integrations. Explore practical examples, discover best practices, and stay updated with the latest industry trends. Learn to build responsive, beautiful, and functional websites and web applications. We also explore topics like UI/UX design, performance optimization, and accessibility, ensuring you create exceptional user experiences. Join our community and elevate your web development journey.
Alright, let's build a beautiful and functional contact form using HTML, and we'll add some CSS to make it visually appealing. We'll focus on clean design and user-friendliness.
HTML (index.html):
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Get in Touch</h1>
<p>Please fill out the form below to contact us.</p>
<form action="#" method="post">
<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:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>CSS (style.css):
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
. .container {
background-color: #fff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
p {
text-align: center;
margin-bottom: 30px;
color: #666;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #333;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
textarea {
resize: vertical;
}
button[type="submit"] {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
width: 100%;
}
button[type="submit"]:hover {
background-color: #0056b3;
}- HTML:
- We create a basic HTML structure with a
divcontainer to hold the form. - The form includes fields for name, email, subject, and message.
- We use
labelelements for clear field descriptions. inputelements are used for text and email input.textareais used for the message.- The
requiredattribute ensures that users fill in essential fields. - A submit button is included.
- We create a basic HTML structure with a
- CSS:
- We style the form for a clean and modern look.
- The container is centered on the page and has a subtle box shadow.
- Form elements are styled with consistent padding and borders.
- The submit button has a distinct background color and hover effect.
- The font is set to sans-serif for readability.
- The form is set to a fixed width, for better appearance on many screen sizes.
How to Use:
- Save the HTML: Save the HTML code as
index.html. - Save the CSS: Save the CSS code as
style.cssin the same directory as the HTML file. - Open in Browser: Open
index.htmlin your web browser.
Enhancements:
- Validation: You can add JavaScript for client-side form validation to provide immediate feedback to users.
- Backend Integration: Add backend code (e.g., using PHP, Python, or Node.js) to handle form submissions and send emails.
- Responsive Design: Add media queries to make the form responsive on different screen sizes.
- Icons: Include icons for the form fields for better visual cues.
- Animations: Adding subtle animations can increase user engagement.
- Error messages: implement visible error messages, when required fields are not correctly filled.
- Success message: Implement a success message, when the form has been correctly submitted.
This basic contact form provides a solid foundation. You can customize the CSS to match your website's design and add more advanced features as needed.
