Guidelines
Practice
연락 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'은 수신자의 이메일 주소로 변경해야 합니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help