1:1 문의 페이지에 안내 문구 노출하기

태그

일반

다중 선택

1 more property

1:1 문의 폼 하단에 안내 메시지를 노출하고 싶다면, 아래의 스크립트 코드를 활용해 보세요. 스크립트를 적용하면 문의 등록 버튼이 포함된 폼 영역 내부에 안내 문구가 자동으로 추가됩니다.

Essential 테마

<script>
  (function () {
    const NOTICE_CLASS = 'qna-notification-notice';

    function insertNotice() {
      // 문의 폼의 등록 버튼 찾기
      const submitButton = Array.from(document.querySelectorAll('button'))
        .find(button => button.textContent.trim() === '등록');

      if (!submitButton) return false;

      // 등록 버튼과 연결된 form 찾기
      const form = submitButton.closest('form') || document.querySelector('form');

      if (!form) return false;

      // form 바로 아래 첫 번째 div 찾기
      const firstDiv = Array.from(form.children)
        .find(element => element.tagName === 'DIV');

      if (!firstDiv) return false;

      // 중복 삽입 방지
      if (firstDiv.querySelector('.' + NOTICE_CLASS)) return true;

      const notice = document.createElement('p');
      notice.className = NOTICE_CLASS;
      notice.textContent =
        '문의 답변 등록 시 알림이 여러 번 발신될 수 있습니다. 알림 수신에 동의하시는 경우에만 문의를 등록해 주세요.';

      notice.style.cssText = `
        margin: 0.5rem 0 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #666;
      `;

      // 첫 번째 div의 마지막에 추가
      firstDiv.appendChild(notice);

      return true;
    }

    function init() {
      insertNotice();

      // 동적으로 생성되는 폼 대응
      const observer = new MutationObserver(() => {
        insertNotice();
      });

      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', init);
    } else {
      init();
    }
  })();
</script>

JavaScript

복사

Grid, Round 테마

<script>
  (function () {
    const NOTICE_CLASS = 'qna-notification-notice';

    function insertNotice() {
      // 등록 버튼 찾기
      const submitButton = Array.from(
        document.querySelectorAll('button')
      ).find(button => button.textContent.trim() === '등록');

      if (!submitButton) return;

      // 등록 버튼이 속한 폼 찾기
      const form = submitButton.closest('form')
        || document.querySelector('form');

      if (!form) return;

      // 폼의 마지막 입력 필드 찾기
      const fields = Array.from(
        form.querySelectorAll('input, textarea, select, [role="combobox"]')
      ).filter(field =>
        field.type !== 'hidden' &&
        field.type !== 'checkbox' &&
        field.type !== 'radio'
      );

      if (!fields.length) return;

      const lastField = fields[fields.length - 1];

      // 마지막 필드를 포함하는 최상위 입력 항목 찾기
      let target = lastField;

      while (
        target.parentElement &&
        target.parentElement !== form
      ) {
        target = target.parentElement;
      }

      // 기존 안내문이 있으면 제거
      document.querySelectorAll('.' + NOTICE_CLASS)
        .forEach(el => el.remove());

      // 안내문 생성
      const notice = document.createElement('p');
      notice.className = NOTICE_CLASS;
      notice.textContent =
        '문의 답변 등록 시 알림이 여러 번 발신될 수 있습니다. 알림 수신에 동의하시는 경우에만 문의를 등록해 주세요.';

      notice.style.cssText = `
        margin: 0.5rem 0 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #666;
      `;

      // 마지막 입력 항목 바로 아래 삽입
      target.insertAdjacentElement('afterend', notice);
    }

    function init() {
      insertNotice();
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', init);
    } else {
      init();
    }

    // 동적 렌더링 대응
    const observer = new MutationObserver(() => {
      if (!document.querySelector('.' + NOTICE_CLASS)) {
        insertNotice();
      }
    });

    observer.observe(document.documentElement, {
      childList: true,
      subtree: true
    });
  })();
</script>

JavaScript

복사

HTML 블록 안내서로 돌아가기

식스샵 프로 가이드로 돌아가기