Google Style Floating Labels

Preview Link

CSS

/* 
===========================================
🎯 REPLACE THESE IDs WITH YOUR FORM'S IDs
===========================================
*/

/* 
STEP 1: Replace this base ID with your form's base ID:
FIND:    el_LMJooqORZBylcpi6wBnH
REPLACE: [YOUR_BASE_ID]

STEP 2: Update field-specific IDs if needed:
- header_0 (form title)
- first_name_0 (first name field)  
- last_name_1 (last name field)
- phone_2 (phone field)
- email_3 (email field)
- [radio_button_id] (radio button field)
*/

@import url("https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap");

/* Form Title Styles Start  */
#el_LMJooqORZBylcpi6wBnH_header_0 p {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #2d3748, #4a5568);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  font-family: "Manrope", sans-serif;
  margin-bottom: 20px !important;
}
#el_LMJooqORZBylcpi6wBnH_header_0 p strong {
  background: #6a64f1ff;
  background-clip: text;
}
/* Form Title Styles End  */

/* Input Fields and Labels Styles Start */
#el_LMJooqORZBylcpi6wBnH_first_name_0 label,
#el_LMJooqORZBylcpi6wBnH_last_name_1 label,
#el_LMJooqORZBylcpi6wBnH_phone_2 label,
#el_LMJooqORZBylcpi6wBnH_email_3 label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: all 0.2s ease;
  background: white;
  padding: 0 4px;
}

#_builder-form #el_LMJooqORZBylcpi6wBnH_first_name_0 input,
#_builder-form #el_LMJooqORZBylcpi6wBnH_last_name_1 input,
#_builder-form #el_LMJooqORZBylcpi6wBnH_phone_2 input,
#_builder-form #el_LMJooqORZBylcpi6wBnH_email_3 input {
  font-size: 16px;
  outline: none;
  transition: color 9999s ease-out, background-color 9999s ease-out;
  -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

#_builder-form .form-builder--item input[class="form-control"]:focus {
  border: 1px solid #6a64f1 !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
}

#el_LMJooqORZBylcpi6wBnH_first_name_0 .form-builder--item.focused > label,
#el_LMJooqORZBylcpi6wBnH_last_name_1 .form-builder--item.focused > label,
#el_LMJooqORZBylcpi6wBnH_phone_2 .form-builder--item.focused > label,
#el_LMJooqORZBylcpi6wBnH_email_3 .form-builder--item.focused > label,
#el_LMJooqORZBylcpi6wBnH_first_name_0 .form-builder--item.filled > label,
#el_LMJooqORZBylcpi6wBnH_last_name_1 .form-builder--item.filled > label,
#el_LMJooqORZBylcpi6wBnH_phone_2 .form-builder--item.filled > label,
#el_LMJooqORZBylcpi6wBnH_email_3 .form-builder--item.filled > label {
  top: 0;
  font-size: 12px;
  color: #6a64f1;
}
/* Input Fields and Labels Styles End */

/* Radio Buttons Styles Start */
#el_LMJooqORZBylcpi6wBnH_4G3x8gjEk8Sra0q9KpGx_4 label:first-child {
  color: #07074d !important;
}
#el_LMJooqORZBylcpi6wBnH_4G3x8gjEk8Sra0q9KpGx_4 input {
  display: none;
}
#el_LMJooqORZBylcpi6wBnH_4G3x8gjEk8Sra0q9KpGx_4 .flex-col label {
  cursor: pointer;
  background: #eee;
  padding: 5px 15px;
  border-radius: 30px;
  color: #444;
  border: 2px solid transparent;
  margin-left: 0 !important;
}
#el_LMJooqORZBylcpi6wBnH_4G3x8gjEk8Sra0q9KpGx_4 input:checked + label {
  border-color: #6a64f1ff;
}
#el_LMJooqORZBylcpi6wBnH_4G3x8gjEk8Sra0q9KpGx_4 .flex-col > div {
  display: flex;
  gap: 15px;
}
#el_LMJooqORZBylcpi6wBnH_4G3x8gjEk8Sra0q9KpGx_4 .option-radio {
  width: fit-content !important;
}
/* Radio Buttons Styles End */

HTML

<!-- Add this code component at the end of your form -->
<script>
/* 
===========================================
🎯 REPLACE THESE IDs WITH YOUR FORM'S IDs
===========================================
*/

// STEP 1: Replace the base ID below with your form's unique base ID
const BASE_ID = "el_LMJooqORZBylcpi6wBnH";

// STEP 2: Update these field suffixes to match your form structure
const FIELD_CONFIG = {
  firstName: `#${BASE_ID}_first_name_0`,
  lastName:  `#${BASE_ID}_last_name_1`,
  phone:     `#${BASE_ID}_phone_2`,
  email:     `#${BASE_ID}_email_3`,
  // Add more fields here if needed:
  // company: `#${BASE_ID}_company_4`,
  // message: `#${BASE_ID}_message_5`,
};

/* 
=========================================
⚠️  DON'T EDIT ANYTHING BELOW THIS LINE
=========================================
*/

// Convert config object to array for processing
const fields = Object.values(FIELD_CONFIG);

function initField(field) {
  const wrapper = document.querySelector(`${field} .form-builder--item`);
  const input = wrapper?.querySelector("input");
  
  if (!wrapper || !input) {
    console.warn(`Enhanced field not found: ${field}`);
    return;
  }

  // Add focus/blur event listeners
  input.addEventListener("focus", () => wrapper.classList.add("focused"));
  
  input.addEventListener("blur", () => {
    wrapper.classList.remove("focused");
    wrapper.classList.toggle("filled", input.value.trim() !== "");
  });

  // Set initial filled state
  if (input.value.trim()) wrapper.classList.add("filled");

  // Handle error layout shift prevention
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (
          node.nodeType === 1 &&
          (node.classList?.contains("error") || node.id === "error-container")
        ) {
          node.remove();
          wrapper.parentNode.insertBefore(node, wrapper.nextSibling);
        }
      });
    });
  });
  
  observer.observe(wrapper, { childList: true, subtree: true });
}

// Initialize when DOM is ready
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => fields.forEach(initField));
} else {
  fields.forEach(initField);
}
</script>

Instructions

1. Add HTML code to an HTML element under the form

   1. Follow instructions to find IDs

2. Add CSS code to the form Custom CSS box

3. Save