연락 Form 동작 구현

웹사이트의 연락처 폼은 사용자로부터 입력받은 정보를 이메일로 전송하는 기능을 자주 제공합니다. 이 섹션에서는 이메일 클라이언트를 사용하여 이러한 정보를 전송하는 기능을 JavaScript로 구현하는 방법을 설명합니다.

sendEmail 함수 설명

이 함수는 사용자로부터 입력받은 정보를 이용하여 연락처 정보를 이메일로 전송하는 동작을 처리합니다.

변수 설정

button: 문서에서 ID가 'send-button'인 요소를 선택합니다. 이는 사용자가 클릭하여 정보를 전송할 버튼을 참조합니다.

const button = document.getElementById('send-button');

이벤트 리스너 추가

button에 'click' 이벤트 리스너를 추가하고, 클릭 이벤트 발생 시 실행될 콜백 함수를 정의합니다.
콜백 함수에서는 폼의 기본 제출 동작을 방지하기 위해 e.preventDefault()를 호출합니다.
그 후, 연락처 폼에 입력된 각 정보를 가져옵니다.

button.addEventListener('click', function (e) {
  e.preventDefault();
  const name = document.getElementById('input-name').value;
  const phone = document.getElementById('input-phone').value;
  const email = document.getElementById('input-email').value;
  const message = document.getElementById('input-message').value;
  // ...
});

이메일 전송

가져온 정보를 이용하여 이메일 주소, 제목, 내용을 정의합니다.
window.location.href를 사용하여 메일 클라이언트를 열고 이메일을 작성합니다. 이때, 메일의 제목과 본문은 앞서 정의한 변수를 사용하여 작성됩니다.

const subject = 'Contact Information';
const body =
  'Name: ' +
  name +
  '%0D%0A' +
  'Phone: ' +
  phone +
  '%0D%0A' +
  'Email: ' +
  email +
  '%0D%0A' +
  'Message: ' +
  message;

window.location.href =
  'mailto:recipient@example.com?subject=' + subject + '&body=' + body;

위 코드를 사용하면, 사용자가 연락처 폼의 'send-button'을 클릭할 때, 폼에 입력한 정보를 이용하여 이메일 클라이언트가 열리고 해당 정보를 포함한 이메일을 작성할 수 있습니다.

여기서 'recipient@example.com'은 수신자의 이메일 주소로 변경해야 합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!

연락 Form 동작 구현

sendEmail 함수 설명​

다음 내용이 궁금하다면?

sendEmail 함수 설명