문의 폼 중복 접수는 대부분 두 가지에서 생깁니다. 전송이 늦을 때 버튼을 여러 번 누르는 경우와, 전송 직후 새로고침을 눌러 같은 내용이 다시 넘어가는 경우입니다.
버튼 잠금은 화면에서, 재전송 방지는 서버에서 처리해야 깔끔하게 끝납니다. 실제 고객사 사이트에 적용하는 순서대로 정리했습니다.

1. 전송 버튼은 submit 이벤트에서 잠그기

버튼의 click 이벤트가 아니라 form의 submit 이벤트에서 잠그는 것이 핵심입니다. submit 이벤트는 required 같은 브라우저 기본 검사를 통과한 뒤에만 발생하기 때문에, 필수 항목을 빠뜨렸을 때 버튼만 잠겨 버리는 사고를 피할 수 있습니다.

<form id="qaForm" method="post" action="/inquiry">
  ...
  <button type="submit">문의 보내기</button>
</form>

<script>
document.getElementById('qaForm')
  .addEventListener('submit', function (e) {
    var btn = this.querySelector('[type=submit]');
    if (btn.disabled) { e.preventDefault(); return; }
    btn.disabled = true;
    btn.innerText = '보내는 중...';
  });
</script>

주의할 점이 하나 있습니다. disabled가 된 버튼의 name과 value는 전송 데이터에 포함되지 않습니다. 버튼 값으로 어떤 폼인지 구분하고 있었다면 그 값은 input type="hidden"으로 옮겨 두세요. fetch로 비동기 전송을 한다면 실패했을 때 버튼을 다시 풀어 주는 코드도 꼭 넣어야 합니다.

2. 새로고침 재전송은 서버에서 리다이렉트로

전송 결과를 같은 주소에서 바로 보여 주면, 방문자가 새로고침할 때 브라우저가 "양식 다시 제출" 확인 창을 띄우고 확인을 누르면 같은 데이터가 다시 넘어갑니다. 저장이 끝나면 완료 페이지로 리다이렉트하는 방식(Post/Redirect/Get)으로 바꾸면 새로고침해도 완료 페이지만 다시 열립니다.

<?php
// 저장 처리 후
save_inquiry($_POST);
header('Location: /inquiry/done', true, 303);
exit;

3. 그래도 남는 경우를 위한 마지막 확인

버튼 잠금은 자바스크립트가 꺼져 있거나 네트워크가 끊겼다 이어지면 뚫릴 수 있습니다. 그래서 서버 쪽에도 한 번 더 막아 두는 것이 안전합니다.

• 폼을 열 때 일회용 토큰을 숨은 값으로 넣고, 저장할 때 이미 쓴 토큰이면 저장하지 않습니다.
• 같은 연락처와 같은 내용이 짧은 시간 안에 다시 들어오면 새로 저장하지 않고 기존 건으로 처리합니다.
• 완료 페이지에는 "접수되었습니다"와 함께 답변 예정 시간을 적어 두면, 확인이 안 돼서 다시 보내는 일 자체가 줄어듭니다.