JetFormBuilder: Enhanced floating placeholders and conversion of placeholder text to label text

gistfile1.txt

This code snippet enhances traditional form input fields with a dynamic floating placeholder effect. 
When a user focuses on an input field or begins to type, the placeholder text transitions upwards, 
mimicking a label. This transition provides a clear indication that the field is active and maintains 
the label-like placeholder visible above the input, even after the user starts typing. The effect reverts 
only when the input is cleared and loses focus, ensuring a clean and user-friendly interface that enhances 
the usability and aesthetic of web forms.

1. First of all, copy the HTML snippet code and create a new snippet ( HTML ).
2. Add your form field names, and do not type in any label name, and instead add placeholder name.
3. The placeholder text become automatic to label text.

_________________________________________________________________

<style>
/* Basic styling for the input fields */
.jet-form-builder__field {
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s;
  position: relative;
  font-weight: 400 !important;
}

/* Label styling, initially centered vertically */
.label-float {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 50%; 
  transform: translateY(-50%); 
  transition: top 0.3s, transform 0.3s, background-color 0.3s, padding 0.3s;
  border-radius: 30px !important;
  font-weight: 400 !important;
}

/* Focus style */
.jet-form-builder__field:focus {
  outline: none;
}

/* When focused, align the label to 30 above the top center line */
.jet-form-builder__field:focus + .label-float,
.jet-form-builder__field:not(:placeholder-shown) + .label-float {
  top: 0; 
  transform: translateY(-30%); 
  background-color: white; 
  padding: 5px; 
  background-color: #ffffff;
  border-radius: 30px !important;
  border: 1px solid #FA949D;
  color: #FA949D;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Return to center when unfocused and empty */
.jet-form-builder__field:placeholder-shown + .label-float {
  top: 50%; 
  transform: translateY(-50%); 
}
/* Remove the default active border when clicking on an input field */

*:focus {
    outline: none !important;
}

</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.jet-form-builder__field').forEach(input => {
    let placeholderText = input.getAttribute('placeholder');
    if (placeholderText) {
      input.setAttribute('placeholder', '');
      let label = document.createElement('label');
      label.classList.add('label-float');
      label.textContent = placeholderText;
      input.parentNode.insertBefore(label, input.nextSibling);

      input.addEventListener('focus', function() {
        // Label moves to 30 above the top center when focused
        label.style.top = '0px';
        label.style.transform = 'translateY(-30%)'; // Move label 30 above the top
      });

      input.addEventListener('input', function() {
        // Ensure label stays 5% above the top while typing
        label.style.top = '0px';
        label.style.transform = 'translateY(-30%)'; // Keep consistent with the focus behavior
      });

      input.addEventListener('blur', function() {
        // Label returns to center if input is empty
        if (this.value === "") {
          label.style.top = '50%';
          label.style.transform = 'translateY(-50%)';
        }
      });
    }
  });
});
</script>