Making an Appointment Form Using HTML, CSS, and JS
In web development, getting better needs more than just knowing theories. Doing real projects with HTML, CSS, and JavaScript is important to learn well, solve problems, and make a strong portfolio. Let’s talk about why making an appointment application is great for new developers and how to make it look nice.
Why Making This Project Is a Good Practice
- Making a form for appointments is like what web developers are really do. It’s about users putting in info, submitting the form, checking if it’s right, and giving feedback. These are basics of web development.
- This project uses HTML for structure, CSS for style, and JavaScript for making it work. Using all of these helps you understand how they work together to make a website.
- Doing this project will give you problems to solve, like checking if the form is filled out right or making sure things happen when the user clicks. Solving these problems makes you better at coding.
Making a Nice UI with HTML and CSS
To make the form look nice as shown in the above clips, follow these steps:
- First, use HTML to make the layout. Divide it into parts, like the appointment form and any popups. Below is the example of HTML code that we use for to create form for booking appointments.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appointment Form | pbc-webdev</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="container" id="booking-container">
<h1>Book Your Appointment</h1>
<form id="appointment-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:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" id="date" name="date" required>
</div>
<div class="form-group">
<label for="time">Time:</label>
<input type="time" id="time" name="time" required>
</div>
<button type="submit">Book Appointment</button>
</form>
<div id="message"></div>
</div>
<div id="popup" class="popup sticky">
<div class="popup-content">
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Below is the brief explanation of the above HTML code:
Inside the body tag, there’s a bunch of stuff for a webpage. There’s a big box called a container where you can book appointments. Inside that box, there’s a heading saying “Book Your Appointment” and a form where you can put in your name, email, date, and time for the appointment. Then, there’s a button you can click to book the appointment.
Below the form, there’s another box that will stick to the right side of the web page and it will show social media icons like Facebook, Instagram, and Twitter. Finally, there’s a small space for messages that might appear after you submit the form.
CSS Code:
2. Use CSS to make things look good. Think about fonts, colors, and spacing. To display beautifully above HTML code we will use CSS. CSS makes things look better by changing fonts, colors, and adding shadows etc.
Below is the CSS code that we have used in this project.
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f3f4f6;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 350px;
background-color: #fff;
padding: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
animation: pulse 2s infinite;
transition: right 0.5s ease;
}
h1 {
color: #333;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
label {
color: #555;
font-size: 14px;
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"] {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
}
button {
width: 100%;
padding: 12px;
background-color: #004754;
color: #fff;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #bebd00;
}
#message {
margin-top: 20px;
text-align: center;
color: #004754;
font-size: 14px;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.container {
position: relative;
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
animation: pulse 2s infinite;
}
.popup {
right: 0;
transform: translateY(-50%);
width: 50px;
height: 200px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 999;
animation: pulse 2s infinite;
transition: right 0.5s ease;
}
.popup-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.social-icons a {
margin: 10px 0;
display: block;
}
.social-icons i {
font-size: 24px;
color: #333;
transition: transform 0.3s ease;
}
.social-icons i:hover {
transform: scale(1.1);
}
.paused {
animation-play-state: paused;
}
.popup.sticky {
position: fixed;
top: 50%;
top: calc(50% - 100px);
right: 0;
width: 50px;
height: 200px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 999;
}
Please find below the detailed explanation about what each part does of the CSS code:
1. `body`: This part sets the style for the whole page. It sets the font to be used for text, the background color, and centers everything both horizontally and vertically on the page.
2. `.container`: This part styles a specific section of the page, giving it a white background, some padding, and a shadow to make it stand out a bit. It also animates the section with a “pulse” effect to make it appear to grow and shrink continuously. Additionally, it transitions its position to the right with a smooth effect when needed.
3. `h1`: This part styles the headings on the page, making them a dark gray color and adding some space below them.
4. `.form-group`: This part styles a group of form elements, like labels and input fields. It adds some space below them and aligns the text to the left.
5. `label`: This part styles labels for form fields, making them a lighter gray color and adding some space below them.
6. `input[type=”text”], input[type=”email”], input[type=”date”], input[type=”time”]`: This part styles various types of input fields, like text, email, date, and time. It sets their width, padding, border, and font size.
7. `button`: This part styles buttons on the page, giving them a background color, text color, border radius (to make them round), and a smooth transition effect when hovered over.
8. `button:hover`: This part styles the button when the mouse hovers over it, changing its background color.
9. `#message`: This part styles a message element on the page, giving it some margin at the top, centering the text, and setting its color and font size.
10. `@keyframes pulse`: This part defines a keyframe animation called “pulse” that scales an element up and down to create a pulsating effect.
11. `.popup`: This part styles a popup window on the page, positioning it to the right, vertically centered, and giving it a specific size, background color, border radius, shadow, and z-index to control its stacking order.
12. `.popup-content`: This part styles the content inside the popup window, centering it vertically and horizontally.
13. `.social-icons a`: This part styles links inside the popup window, giving them some margin and making them block elements for better spacing.
14. `.social-icons i`: This part styles icons inside the links, setting their size, color, and adding a transition effect for when they are hovered over.
15. `.social-icons i:hover`: This part styles the icons when they are hovered over, making them slightly larger for a visual effect.
16. `.paused`: This part styles elements that are paused in their animations, setting their animation-play-state property to “paused”.
17. `.popup.sticky`: This part styles a sticky version of the popup window, positioning it fixed to the right side of the viewport and vertically centered with a specific height and width.
JavaScript Code:
3. Finally Add the JavaScript code in your project to make things work properly.
document.addEventListener("DOMContentLoaded", function () {
var popup = document.getElementById("popup");
var container = document.getElementById("booking-container");
var form = document.getElementById("appointment-form");
var formInputs = document.querySelectorAll("#appointment-form input");
// Function to pause animation
function pauseAnimation() {
container.classList.add("paused");
popup.classList.add("paused");
}
// Function to resume animation
function resumeAnimation() {
container.classList.remove("paused");
popup.classList.remove("paused");
}
// Event listener for mouse entering the container
container.addEventListener("mouseenter", function () {
pauseAnimation();
});
// Event listener for mouse leaving the container
container.addEventListener("mouseleave", function () {
resumeAnimation();
});
// Submit form event listener
form.addEventListener("submit", function (event) {
event.preventDefault();
// Pause animation while form is being submitted
pauseAnimation();
// Simulate form submission (replace with actual implementation)
setTimeout(function () {
// Show success message
var messageDiv = document.getElementById("message");
messageDiv.innerHTML = "Appointment booked successfully!";
messageDiv.style.color = "green";
// Clear form fields
form.reset();
// Resume animation after form submission is complete
resumeAnimation();
}, 1000); // Simulate server response time
});
// Pause animation when any form input is focused
formInputs.forEach(function (input) {
input.addEventListener("focus", pauseAnimation);
input.addEventListener("blur", resumeAnimation);
});
});
This JavaScript file contains code that adds interactivity to the webpage, particularly focusing on popup functionality. Let’s break it down:
Popup Functionality
– It adds an event listener for the “DOMContentLoaded” event, which fires when the HTML document has been completely loaded on the web browser.
– Inside this event listener It defines two functions, `pauseAnimation()` and `resumeAnimation()`, to pause and resume animation respectively.
– It adds event listeners for when the mouse enters and leaves the container. When the mouse enters into the booking form, it pauses the animation, and when it leaves, it resumes the animation.
– It displays the success message in green color, once the user submits the data.
Step-by-Step Guide to Making this Project
Follow these steps to make the appointment form:
1. Setting Up
– Make a new folder for your project.
– Inside, make three files: `index.html`, `styles.css`, and `script.js`.
2. Writing HTML
– Copy the HTML code from the above example into your `index.html` file.
– Make sure everything you need is there, like the form fields and where messages show up.
3. Styling with CSS
– Copy the CSS code into your `styles.css` file.
– Change the styles to make it look how you want.
4. Adding JavaScript
– Copy the JavaScript code into your `script.js` file.
– This makes the form works, checks if things are filled out right, and shows a success message in green color after clicking on the Book Appointment button.
5. Test It
– Open `index.html` in a web browser to see if it works.
– Make sure the form works right and check everything. Like, when you take your mouse over the Book Your Appointment form window the animation effect should pause and when you leave your mouse from it, it should resume the animation.
-Try to click on the Book Appointment button without filling the form, It should not work, It should display a warning message.
6. Make It Your Own:
– Try changing the HTML, CSS, and JavaScript to make it your own.
– Add new things in this project or make things better to learn more. Like, add a navigation menu on the top of the page or add some features below the form so that it looks more appealing.
By doing these steps and playing with the code, you’ll learn a lot and make a working appointment form. Keep trying new things and have fun learning!
If your code does not work as expected, or If you are struggling with the code, please click on the Download source code button below and unzip it and open it into any web browser. Now, It should work perfectly.
