> For the complete documentation index, see [llms.txt](https://docs.allthingsghl.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.allthingsghl.com/forms/editor.md).

# Google Style Floating Labels

[Preview Link](https://go.growcrm.co/widget/form/LMJooqORZBylcpi6wBnH?notrack=true)

<figure><img src="/files/xAT9YSMliibISWErBLVf" alt="" width="486"><figcaption></figcaption></figure>

## CSS

```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:wght@200..800&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

```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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.allthingsghl.com/forms/editor.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.