Contact Form

admin1234
Jan 30, 2026 5
Live Preview

Live Editor

<form class="contact">
  <h2>Contact Us</h2>

  <div class="field">
    <input type="email" placeholder="Your email">
  </div>

  <div class="field">
    <textarea placeholder="Your message"></textarea>
  </div>

  <button>Send Message</button>
</form>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(circle at top,#6366f1,#020617);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:#fff;
}

/* card */
.contact{
  width:420px;
  padding:28px;
  border-radius:26px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(18px);
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.35);
  position:relative;
  overflow:hidden;
}

/* glow ring */
.contact::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle,#8b5cf6,transparent 60%);
  opacity:.35;
}

/* title */
h2{
  margin:0 0 18px;
  font-size:26px;
  position:relative;
}

/* field */
.field{
  position:relative;
  margin-bottom:18px;
}

input, textarea{
  width:100%;
  padding:16px 14px;
  border-radius:14px;
  border:none;
  outline:none;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:.25s;
}

textarea{
  resize:none;
  height:120px;
}

/* focus */
input:focus, textarea:focus{
  box-shadow:
    0 0 0 2px #8b5cf6,
    0 0 25px rgba(139,92,246,.7);
  background:rgba(0,0,0,.6);
}

/* button */
button{
  width:100%;
  padding:16px;
  border-radius:999px;
  border:none;
  background:linear-gradient(90deg,#8b5cf6,#3b82f6);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

button:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 40px rgba(139,92,246,.6);
}
Categories

Contact Form

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
