Stylish Modal Form with HTML, CSS, and Js

Creating a responsive and appealing modal form can beautify the user experience by allowing short interactions on an internet web page without redirection. This challenge publications you through growing a sleek, purposeful modal shape using HTML, CSS, and JavaScript. Our method specializes in consumer-friendliness and modern-day UI layout, making it easy to comply with alongside and enforce for your tasks.

Table Of Contents

Key Features Of Modal Form
Resources
Related Content You Might Enjoy
Source Code
Code & Preview

Key Features Of Modal Form

Smooth Animations: Forms include fade-in and slide-in animations for a beautiful look.
Fully Responsive Design: Works smoothly on devices of all sizes. Adjust the layout for different screen sizes.
Overlay and Close Options: Includes overlay effects to focus attention on the form and multiple ways to close them. This ensures an easy exit option.
Actionable Buttons: There are “Submit” and “Cancel” buttons to easily improve form submission or cancel the action.
Customizable Form Fields: Input fields for name, email, phone number, and password ensure fully functional forms are ready for real-world use.

Resources

Technology: HTML, CSS, Javascript
External Resources: Remix Icon
Responsive: Yes

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>modal form</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Trigger Button -->
    <button id="openPopupBtn">Open modal form</button>

    <!-- Pop-up Structure -->
    <div id="popup" class="popup">
      <div class="popup-content">
        <span class="close-btn" id="closePopupBtn"
          ><i class="ri-close-fill"></i
        ></span>

        <h2 class="popup-title">modal form</h2>
        <form action="" class="form">
          <div>
            <label for="name">full name</label>
            <input
              type="text"
              name="name"
              id="name"
              placeholder="enter full name"
            />
          </div>

          <div>
            <label for="email">email</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="enter email"
            />
          </div>

          <div>
            <label for="phone">phone number</label>
            <input type="number" name="phone" id="phone" placeholder="+88 " />
          </div>

          <div>
            <label for="password">password</label>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="enter password"
            />
          </div>

          <!-- Action Buttons -->
          <div class="popup-actions">
            <button id="saveBtn" class="popup-button save-btn">Submit</button>
            <button id="cancelBtn" class="popup-button cancel-btn">
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}
body {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #f5f5dc; */
}

#openPopupBtn {
  background-color: #3c552d;
  color: #f5f5dc;
  text-transform: capitalize;
  padding: 1rem 1.8rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

/* Pop-up Overlay */
.popup {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s; /* Fade-in animation */
}

/* Pop-up Content */
.popup-content {
  position: relative;
  background-color: #fff;
  padding: 2.5rem;
  border-radius: 0.5rem;
  width: max(300px, 500px);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  animation: slideIn 0.4s;
}

.form {
  position: relative;
  width: 100%;
  /* margin-block: 1rem; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 1rem;
}

.form div {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 0.4rem;
}

.form div label {
  text-transform: capitalize;
  font-size: 15px;
  color: #1a1a19;
}

.form input {
  width: 100%;
  padding: 0.75rem;
}

.form input::placeholder {
  text-transform: capitalize;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #1a1a19;
}

.popup-title {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: capitalize;
  color: #1a1a19;
  margin-bottom: 10px;
}


.popup-actions {
  width: 100%;
  display: flex;
  flex-direction: row !important;
  gap: 10px;
  justify-content: center;
}

.popup-button {
  margin-top: 1rem;
  width: 100%;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Button hover effect */
}

.save-btn {
  background-color: #4caf50;
  color: white;
}

.save-btn:hover {
  background-color: #45a049; /* Hover effect */
}

.cancel-btn {
  background-color: #f44336;
  color: white;
}

.cancel-btn:hover {
  background-color: #d32f2f; /* Hover effect */
}

/* Keyframes for animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-30px);
  }
  to {
    transform: translateY(0);
  }
}

// script.js
document.addEventListener("DOMContentLoaded", () => {
  const popup = document.getElementById("popup");
  const openPopupBtn = document.getElementById("openPopupBtn");
  const closePopupBtn = document.getElementById("closePopupBtn");
  const saveBtn = document.getElementById("saveBtn");
  const cancelBtn = document.getElementById("cancelBtn");

  // Open the pop-up
  openPopupBtn.addEventListener("click", () => {
    popup.style.display = "flex";
  });

  // Close the pop-up when clicking the close button
  closePopupBtn.addEventListener("click", () => {
    popup.style.display = "none";
  });

  // Close the pop-up when clicking the cancel button
  cancelBtn.addEventListener("click", () => {
    popup.style.display = "none";
  });

  // Close the pop-up when clicking outside the content area
  window.addEventListener("click", (event) => {
    if (event.target == popup) {
      popup.style.display = "none";
    }
  });

  // Save button interaction (with a simple confirmation message)
  saveBtn.addEventListener("click", () => {
    alert("Your changes have been saved!");
    popup.style.display = "none"; // Close the pop-up after saving
  });
});

Code & Preview

You can download the source files for free by clicking the Source Files button. Additionally, you can edit and view a live demo by clicking the Edit with CodePen button below.

Source Code

Edit With Codepen

Key Features Of Modal Form

Resources

Related Content You Might Enjoy

Source Code

Code & Preview

Related Posts