Web Pro Dragons

Internal Dev Library

Gravity Form Opacity JS

				
					<script>
  window.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('gform_1');

    // Select all inputs (except submit), selects, and textareas
    const fields = form.querySelectorAll('input:not([type="submit"]), select, textarea');

    fields.forEach(field => {
      // Set initial opacity
      field.style.opacity = '0.5';

      // On focus, make fully visible
      field.addEventListener('focus', () => {
        field.style.opacity = '1';
      });

      // On blur, return to semi-transparent if empty
      field.addEventListener('blur', () => {
        if (!field.value) {
          field.style.opacity = '0.5';
        }
      });
    });
  });
</script>