Customize Onboarding Forms

This page will be updated with customization tips for the onboarding form. The following examples assume the file names onboarding.css and onboarding.js.

⚠️ The code below is for reference only. Adjust it according to your metafield definitions, label text, and other configuration.

Show the Privacy Policy in a modal

This example opens a modal when customers click the Privacy Policy link instead of sending them to an external page. The display text is switched so French is the primary language and all other languages use English.

onboarding.js

function createPrivacyModal() {
  if (document.getElementById("alcms-privacy-modal")) return;

  const modal = document.createElement("div");
  modal.id = "alcms-privacy-modal";
  modal.className = "alcms-modal";
  modal.setAttribute("aria-hidden", "true");

  modal.innerHTML = `
    <div class="alcms-modal__overlay" data-alcms-modal-close></div>

    <div class="alcms-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="alcms-privacy-modal-title">
      <button type="button" class="alcms-modal__close" aria-label="Close" data-alcms-modal-close>
        ×
      </button>

      <h2 id="alcms-privacy-modal-title" class="alcms-modal__title">
        Privacy Policy
      </h2>

      <div class="alcms-modal__body">
        <p>
          This is a sample privacy policy text.
        </p>
        <p>
          We collect and use your information only for the purpose of providing this service.
          Your personal information will be handled appropriately in accordance with applicable laws and regulations.
        </p>
        <p>
          Ceci est un texte d'exemple pour la politique de confidentialité.
          Les informations collectées seront utilisées de manière appropriée pour fournir le service et assist customers.
        </p>
      </div>

      <div class="alcms-modal__footer">
        <button type="button" class="alcms-modal__button" data-alcms-modal-close>
          Close
        </button>
      </div>
    </div>
  `;

  document.body.appendChild(modal);

  modal.addEventListener("click", (event) => {
    if (event.target.matches("[data-alcms-modal-close]")) {
      closePrivacyModal();
    }
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") {
      closePrivacyModal();
    }
  });
}

function openPrivacyModal() {
  createPrivacyModal();

  const modal = document.getElementById("alcms-privacy-modal");
  if (!modal) return;

  modal.classList.add("is-open");
  modal.setAttribute("aria-hidden", "false");
  document.body.classList.add("alcms-modal-open");
}

function closePrivacyModal() {
  const modal = document.getElementById("alcms-privacy-modal");
  if (!modal) return;

  modal.classList.remove("is-open");
  modal.setAttribute("aria-hidden", "true");
  document.body.classList.remove("alcms-modal-open");
}

function updatePrivacyLabel() {
  const privacyCheckbox = document.querySelector(
    'input[name="metafield[custom.privacy_policy_consent]"]',
  );
  if (!privacyCheckbox) return;

  const label = privacyCheckbox.closest("label");
  if (!label) return;

  const params = new URLSearchParams(window.location.search);
  const locale = (params.get("locale") || "").toLowerCase();
  const htmlLang = (document.documentElement.lang || "").toLowerCase();

  const isFrench = locale === "fr" || htmlLang.startsWith("fr");

  label.innerHTML = "";
  label.appendChild(privacyCheckbox);

  const link = document.createElement("a");
  link.href = "#alcms-privacy-modal";
  link.style.textDecoration = "underline";

  link.addEventListener("click", (event) => {
    event.preventDefault();
    openPrivacyModal();
  });

  if (isFrench) {
    label.appendChild(document.createTextNode(" J'accepte la "));
    link.textContent = "Politique de confidentialité";
    label.appendChild(link);
  } else {
    label.appendChild(document.createTextNode(" I agree to the "));
    link.textContent = "Privacy Policy";
    label.appendChild(link);
  }

  const requiredSpan = document.createElement("span");
  requiredSpan.className = "required";
  requiredSpan.textContent = " *";
  requiredSpan.style.color = "red";
  label.appendChild(requiredSpan);
}

document.addEventListener("DOMContentLoaded", () => {
  updatePrivacyLabel();
  createPrivacyModal();
});

onboarding.css

.alcms-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.alcms-modal.is-open {
  display: block;
}

.alcms-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.alcms-modal__dialog {
  position: relative;
  width: calc(100% - 32px);
  max-width: 640px;
  max-height: calc(100vh - 80px);
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  overflow-y: auto;
  box-sizing: border-box;
}

.alcms-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.alcms-modal__title {
  margin: 0 32px 16px 0;
  font-size: 20px;
  line-height: 1.4;
}

.alcms-modal__body {
  font-size: 14px;
  line-height: 1.7;
}

.alcms-modal__footer {
  margin-top: 24px;
  text-align: right;
}

.alcms-modal__button {
  padding: 10px 18px;
  border: 1px solid #222;
  border-radius: 6px;
  background: #222;
  color: #fff;
  cursor: pointer;
}

.alcms-modal-open {
  overflow: hidden;
}