Overview
이번시간에는 워드프레스 웹사이트에서 폼양식을 만들고 거기다가 사용자가 이름과 메세지를 적어서 접수하면 사이트 관리자에게 이메일이 전달되는 기능을 구현해보고자 합니다.
SMTP 메일 서버 설정
어떤 앱이든 이메일을 보내려면 이메일을 보내는 서비스를 제공하는 이메일 서버가 있어야합니다. 우리가 아웃룩이나 핸드폰에 이메일을 받기위해 설정을 할때 SMTP나 POP3, IMAP 서버의 호스트를 설정하는 이유가 바로 여기에 있습니다. POP3나 IMAP은 이메일을 받을때 사용하는 서버들인데 그중 POP3는 나온지 오래되서 IMAP사용을 권장합니다. 그리고 이메일을 보내려면 SMTP서버가 필요한데 그건 호스팅업체나 이메일 서비스 업체를 통해서 미리 정보를 가지고 계셔야합니다. 혹시 블루호스트 사용자시라면 여기를 참조해서 이메일을 생성해주세요.
WordPress에서 이메일을 보내려면 본인이 소유한 이메일의 SMTP서버로 데이타를 전송할 플러그인을 설치하셔야 하는데요. Plugins > Add New Plugin 클릭후에 WP Mail SMTP라는 플러그인을 찾아서 Install Now 버튼을 눌러서 설치하세요.
설치가 완료된 후 Active버튼을 눌러서 플러그인을 활성화 시켜줍니다.
그러면 SMTP서버 설정하는 위자드가 시작됩니다. Let’s get started!
사용하고 있는 메일이 어떤 회사껀지 물어보네요. 저는 자체 회사 이메일을 사용하고 있으므로 Other SMTP를 선택하겠습니다.
본인의 이메일을 제공하는 회사를 선택한 뒤 Save and Continue버튼을 클릭하세요. 가장 먼저 SMTP Host를 물어보네요. 이메일 생성하면서 받았던 SMTP서버 정보와 포트번호를 넣습니다. 참고로 블루호스트의 SMTP 호스트는 mail.본인도메인이고 포트번호는 465입니다.
암호화 방식은 현재 SMTP서버가 지원하는 방식으로 선택하셔야합니다. Bluehost는 465포트로 SSL방식을 지원합니다. Bluehost는 TLS는 지원을 하지 않으므로 Disable시킵니다. 지원하지 않는 암호화방식을 선택하면 추후에 이메일전송 테스트할때 524 Timeout에러가 나서 어차피 설치를 완료하지 못하니까 반드시 SMTP가 어떤 포트를 사용하는지를 확실히 알고 계셔야합니다.
밑으로 스크롤을 하면 SMTP 사용자 이름과 비번 넣으라고 하는데 사용자이름은 이메일 주소입니다. 그리고 From Name은 저는 홈페이지에서 고정으로 보내는 거니까 Contact Us라고 할게요. 하지만 실제로 보낼때 이름을 바꿔서 보낼수 있도록 Force From Name은 OFF로 둘게요. 그리고 From Email도 기본적인거 회사메일 하나 넣어두고 Force From Email은 OFF로 해서 사용자가 Email을 입력하면 그걸로 대체하도록 할게요.
Save and Continue버튼을 눌러서 플러그인의 설정을 저장합니다. 플러그인의 기본기능은 공짜지만 더 자세한 서비스를 원하면 Pro서비스를 구매하라고 나옵니다. 그냥 원래 선택되어 있던 대로 두고 Save and Continue를 누릅니다.
자체서비스 기능개선을 위해 정보수집에 응해달라고 부탁합니다. 저는 별로 이메일 받고 싶은 마음이 없으므로 체크박스 체크하지 말고 그냥 Skip this Step누르세요.
플러그인 라이센스 키를 넣으라고 나오지만 저는 공짜버젼을 선택했으므로 그냥 Skip this Step누르고 넘어갑니다.
설정이 제대로 되었는지 검사중이라고 합니다.
성공적으로 설치가 되었습니다.
Contact Us 양식 만들기
그럼 Contact Us 양식을 만들어 볼까요? 워드프레스 어드민페이지에 로그인하시면 왼쪽 메뉴에 Contact이라는 메뉴가 있는 워드프레스버젼도 있고 없는 버젼도 있을거에요. 만약에 Contact메뉴가 없으면 플러그인을 설치하셔야합니다. Plugins메뉴를 클릭하고 위에 Add New Plugin버튼을 클릭하세요. 그리고 Contact Form 7을 검색해서 Install Now 버튼을 눌러 설치하신 후에 Active버튼을 클릭해서 활성화 시켜주세요.
그러면 아래와 같이 플러그인이 목록에 들어옵니다.
이제 좌측메뉴를 보시면 Contact이라는 메뉴가 생겼을거에요. 그리고 Contact Forms에 보시면 샘플로 Form이 하나 만들어져 있어요.
그거 클릭하면 폼이 어떻게 구성되어있는지 보여주고
위에 Mail탭을 클릭하면 누구에게 보내고 어디서 왔다고 표시를 할지를 정할 수 있습니다.
Body에서 손님이 입력한거 다 보여주게 추가해볼게요. Save버튼눌러서 저장합니다.
From: [your-name] [your-email]
Subject: [your-subject]
Message Body:
Name: [your-name]
Email: [your-email]
Subject: [your-subject]
Message: [your-message]
--
This is a notification that a contact form was submitted on your website ([_site_title] [_site_url]).저장하고 나오면 목록에 Shortcode라고 뜰거에요. 그거를 일단 복사해두세요.
그리고 이제 손님들이 와서 이메일 보낼 폼을 넣을 워드프레스 페이지를 한개 만드세요. 저는 Contact Us라고 만들었습니다. 그리고 이메일 양식이 들어가야하는 곳에 아까 복사한 코드를 붙여넣었어요.
저장하고 나와서 해당 페이지를 열어보니까 아까 Contact Form 7을 통해서 만든 양식이 그대로 들어가서 보이네요.
제 이름이랑 이메일이랑 제목이랑 내용 넣고 한번 눌러봤어요. 그랬더니 잘 갔다는 메세지가 밑에 뜨네요. 그리고 관리자 Inbox에 가서 메일이 왔나 봤는데 설정한대로 아주 잘 들어와 있더라구요.
여기까지 WP Mail SMTP를 이용하여 SMTP서버를 설정하고, Contact Form 7을 이용하여 Contact Us페이지를 만드는걸 해보았습니다. 함께 해주셔서 감사합니다.