Why this works

Animating a checkmark gives users immediate, satisfying feedback that their submission was successful, enhancing UX with minimal coding overhead.

Source Code

<form id="successForm" class="form-checkmark">
  <input type="text" class="form-control mb-3" placeholder="Your Name" required>
  <button type="submit" class="btn btn-primary w-100">Submit</button>
</form>
<div id="checkmarkAnimation" class="checkmark-container">
  <svg viewBox="0 0 52 52" class="checkmark">
    <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
    <path class="checkmark-check" fill="none" d="M14 27l7 7 16-16"/>
  </svg>
</div>

<style>
.form-checkmark {
  max-width: 400px;
  width: 100%;
}
.checkmark-container {
  display: none;
  margin-left: 2rem;
  align-items: center;
  justify-content: center;
}
.checkmark {
  width: 100px;
  height: 100px;
  stroke: #28a745;
  stroke-width: 2;
  stroke-miterlimit: 10;
  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}
.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #28a745;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}
@keyframes stroke {
  100% { stroke-dashoffset: 0; }
}
@keyframes scale {
  0%, 100% { transform: none; }
  50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes fill {
  100% { fill: #28a745; }
}
</style>

<script>
const form = document.getElementById('successForm');
const checkmark = document.getElementById('checkmarkAnimation');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  form.style.display = 'none';
  checkmark.style.display = 'flex';
});
<\\/script>