Custom GHL Login

Community contribution by: Kyle Jones

CSS

/* Custom GHL Login Screen */
:root {
  --main-body-bg: #fff;

/* Change Image */
--main-body-image: url(https://storage.googleapis.com/msgsndr/wyGfur5GgixhPSNohGQ2/media/68529bb9cce1919cfd714e29.png);
  --main-login-bg: #fff;

/* Change Image */
--login-logo: url(https://storage.googleapis.com/msgsndr/wyGfur5GgixhPSNohGQ2/media/68528bf01d27cf6f550aed42.svg);
  --login-heading-color: #fff;
  --login-input-color: #000;
  --login-input-border: #fff;
  --login-error-color: red;
  --login-forgot-pass-color: #fff;
  --login-button-bg: #404040; /* medium shade of grey */
  --login-button-color: #fff;
  --login-button-hover-bg: #0D7680; /* Darker Coelia Greenshade for hover */
  --login-button-hover-color: #fff;
  --login-foot-note-color: #fff;
  --login-foot-note-link-color: #fff;
}

span.text-gray-700 {
  color: #333;
}

p.ml-2 {
  color: white !important;
}

body .hl_login--body * {
  font-family: var(--main-font);
}

.hl_login {
  background: var(--main-body-bg) !important;
}

.hl_login--header {
  position: absolute;
  background: transparent !important;
  margin-bottom: 0 !important;
  border: none !important;
  z-index: 99;
}

.hl_login--header .container-fluid a img {
  display: none;
}

.hl_login--body .container-fluid {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 0 !important;
  background: #1D1F25;
}

.hl_login--body .card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  border: none !important;
  box-shadow: none !important;
  background: var(--main-login-bg) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}



.hl_login--body .card .card-body {
  display: block;
  margin-top: 40px !important;
  box-sizing: border-box;
  width: 50rem !important;
  text-align: left;
}

/* Button styling */
.hl_login--body .card .card-body button {
  background-color: var(--login-button-bg);
  color: var(--login-button-color);
}

.hl_login--body .card .card-body button:hover {
  background-color: var(--login-button-hover-bg);
  color: var(--login-button-hover-color);
}

.hl_login--body .container-fluid:after {
  content: '';
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  max-width: 70%; /* Adjusted width to fill right side */
  background-image: var(--main-body-image);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #1D1F25;
}

.hl_login--body .card .login-card-heading h2.heading2:before {
  content: '';
  background-image: var(--login-logo);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  display: block;
  margin: 0 auto 10px;
  width: 300px;
  height: 125px;
  left: 0;
  right: 0;
}

/* Responsive Adjustments */

/* Tablet adjustments */
@media (max-width: 1024px) {
  .hl_login--body .card .card-body {
    width: 75%;
    margin-top: 40px;
  }

  .hl_login--body .container-fluid:after {
    max-width: 50%;
    background-position: center;
  }

  .hl_login--body .card .login-card-heading h2.heading2:before {
    width: 250px;
    height: 100px;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hl_login--body .container-fluid {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Original centering */
  }

  .hl_login--body .card {
    height: auto;
    box-sizing: border-box;
    width: auto;
  }

  .hl_login--body .card .card-body {
    width: auto;
    margin-top: -40px !important;
    text-align: center;
  }

  /* Adjust the space above the logo */
  .hl_login--body .card .login-card-heading h2.heading2:before {
    width: 250px;
    height: 150px;
  }

  h2, h1, .heading, .login-card-heading h2.heading2 {
    font-size: 1.5rem;
  }

  .hl_login--body .container-fluid:after {
    display: none; /* Hide background image on small screens */
  }
}

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

Add HTML code to an HTML element under the form
1. Follow instructions to find IDs
Add CSS code to the form Custom CSS box
Save

PreviousGoogle Style Floating Labels NextTexts

Last updated 1 year ago

Was this helpful?

/* Custom GHL Login Screen */
:root {
  --main-body-bg: #fff;

/* Change Image */
--main-body-image: url(https://storage.googleapis.com/msgsndr/wyGfur5GgixhPSNohGQ2/media/68529bb9cce1919cfd714e29.png);
  --main-login-bg: #fff;

/* Change Image */
--login-logo: url(https://storage.googleapis.com/msgsndr/wyGfur5GgixhPSNohGQ2/media/68528bf01d27cf6f550aed42.svg);
  --login-heading-color: #fff;
  --login-input-color: #000;
  --login-input-border: #fff;
  --login-error-color: red;
  --login-forgot-pass-color: #fff;
  --login-button-bg: #404040; /* medium shade of grey */
  --login-button-color: #fff;
  --login-button-hover-bg: #0D7680; /* Darker Coelia Greenshade for hover */
  --login-button-hover-color: #fff;
  --login-foot-note-color: #fff;
  --login-foot-note-link-color: #fff;
}

span.text-gray-700 {
  color: #333;
}

p.ml-2 {
  color: white !important;
}

body .hl_login--body * {
  font-family: var(--main-font);
}

.hl_login {
  background: var(--main-body-bg) !important;
}

.hl_login--header {
  position: absolute;
  background: transparent !important;
  margin-bottom: 0 !important;
  border: none !important;
  z-index: 99;
}

.hl_login--header .container-fluid a img {
  display: none;
}

.hl_login--body .container-fluid {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 0 !important;
  background: #1D1F25;
}

.hl_login--body .card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  border: none !important;
  box-shadow: none !important;
  background: var(--main-login-bg) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}



.hl_login--body .card .card-body {
  display: block;
  margin-top: 40px !important;
  box-sizing: border-box;
  width: 50rem !important;
  text-align: left;
}

/* Button styling */
.hl_login--body .card .card-body button {
  background-color: var(--login-button-bg);
  color: var(--login-button-color);
}

.hl_login--body .card .card-body button:hover {
  background-color: var(--login-button-hover-bg);
  color: var(--login-button-hover-color);
}

.hl_login--body .container-fluid:after {
  content: '';
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  max-width: 70%; /* Adjusted width to fill right side */
  background-image: var(--main-body-image);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #1D1F25;
}

.hl_login--body .card .login-card-heading h2.heading2:before {
  content: '';
  background-image: var(--login-logo);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  display: block;
  margin: 0 auto 10px;
  width: 300px;
  height: 125px;
  left: 0;
  right: 0;
}

/* Responsive Adjustments */

/* Tablet adjustments */
@media (max-width: 1024px) {
  .hl_login--body .card .card-body {
    width: 75%;
    margin-top: 40px;
  }

  .hl_login--body .container-fluid:after {
    max-width: 50%;
    background-position: center;
  }

  .hl_login--body .card .login-card-heading h2.heading2:before {
    width: 250px;
    height: 100px;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hl_login--body .container-fluid {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Original centering */
  }

  .hl_login--body .card {
    height: auto;
    box-sizing: border-box;
    width: auto;
  }

  .hl_login--body .card .card-body {
    width: auto;
    margin-top: -40px !important;
    text-align: center;
  }

  /* Adjust the space above the logo */
  .hl_login--body .card .login-card-heading h2.heading2:before {
    width: 250px;
    height: 150px;
  }

  h2, h1, .heading, .login-card-heading h2.heading2 {
    font-size: 1.5rem;
  }

  .hl_login--body .container-fluid:after {
    display: none; /* Hide background image on small screens */
  }
}

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