워드프레스에 문의하기 폼 만들기 Contact Form 7 + Gmail SMTP + 구글 reCAPTCHA

홈페이지를 운영하다 보면 이메일로 연락을 받을 수 있는 페이지가 필요한 경우가 있다. 보통은 문의하기와 같은 경우이다.

워드프레스는 문의하기 폼 플러그인이 많이 있어서 하나를 선택해서 문의폼을 만들 수있다.  그리고 문의를 메일로 받으려면 호스팅하는 서버에 메일을 보낼수 있는 SMTP 를 사용할 수 있어야 한다. 내 경우 웹 서버에 SMTP 가 없어서 다른 방법이 필요했다. 그리고 로봇이 문의하기를 보낼 수도 있으므로 캡차를 다는 것도 좋은 것 같다.

내 경우 문의하기 폼을 만들기 위해 아래 세가지를 사용했다.

• 문의하기 폼 플러그인
• Gmail 로 메일 보내는 플러그인
• 캡차

 

문의 하기 폼 만들기

최근에는 워드프레스 WPForms 플러그인 위지윅으로 항목을 드래그앤드롭으로 꾸밀 수 있어서 편한 것 같다. 그러나 메일로 받으려면 유료를 구입해야 한다. 구독형이라서 매년 돈을 내야 한다.

그렇게 복잡한 폼을 만들것이 아니라면 가장 흔하게 사용하는  ContactForm7 을 사용하면 되는 것 같다.

Contact Form 7 플러그인 설치하고, ContactForm 에 새로운 폼을 하나 만든다.

이메일이나 제목, 본문 등의 입력 폼에 대한 규칙은 복집하지 않다. 태그 규칙등은 인터넷에 검색하면 많이 나온다.

그리고 아래와 같은 숏컷이 생기는데, 이걸 문의하기 페이지를 하나만들고 복사해서 붙여 넣기 하면 된다.

[contact-form-7 id="512" title="Contact"]

 

Gmail SMTP 로 메일로 받기

등록하면 기본으로 메일로 온다. 만약 메일로 오지 않을 때에는 웹 서버에 SMTP 가 제공하지 않아서 이다. 어떻게 할까 하다가 GMail 의 있는 내 계정을 통해서 메일을 보내는 방법을 쓰기로 했다. 요즘은 다른 곳에서 사용하려면 SMTP에 그냥 포트와 id, 패스워드를 넣어서 보내는 방법을 사용하지 않고 OAuth를 사용하는데 이 플러그인으로 도움을 받을 수 있다.

동영상을 보고 따라 해보는 것도 좋고, 여기의 글을 보고 따라 하면 된다.

 

 

 

1. Gmail SMTP 플러그인을 설치 한다

 

2. 구글 개발자 콘솔에서 프로젝트를 만들고 OAuth Client ID를 발급 받는다.

 

1.구글 개발자 콘솔에 가서 프로젝트를 만든다

2. 대시보드에서 ‘Gmail API’를 클릭한다.

3. ‘사용설정’을 클릭한다.

4. ‘사용자 인증 정보 만들기’를 클릭한다.

5. 프로젝트 정보를 선택한다.

6.사용자 인증 정보의 OAuth 동의

5.OAuth consent screen 을 클릭하고 필요한 정보를 입력한다.

 

3. 워드프레스 Gmail SMTP 설정에 키를 저장하고 구글 인증한다

워드프레스의 어드민의 설정에서 Gmail SMTP 설정에 클라이언트 ID와 securityu 를 붙여 넣고, Grand Permission 을 툴러서 OAuth 를 진행한다.

 

 

4.프로젝트에 사용자 인증정보를 추가한다.

5. 동의 화면을 만든다

워드프레스 어드민의 Mail SMTP 설정에서 ‘Authoriziation Redirect URI’를 복사해서 OAuth 클라이언트 ID 만들기의 승인된 라다이렉션 URI에 입력한다.

3. 워드프레스 어드민의 설정에서 GMail SMTP 설정 정보를 입력한다.

 

 

이렇게 하면, 기본적으로 워드프레스 코어의 메일 보내기 함수와 연결되어  Contact From 7 뿐만 아니라 워드프레스서 메일을 보내는 것들이 다 된다.

 

문의하기 홈에 캡처 달기

 

로봇이 문의 하기 폼으로 정크 메일을 보내는 것을 줄이기 위해 캡처를 다는 방법이 있다.

이것도 구글의 캡처를 이용할 수있다.

ContactForm7 에 캡처를 다는 것은 별도로 워드프레스 플러그인을 설치하지 않아도 된다. 구글에서 키를 발급 받은 후 ContactForm7 의  Integration 메뉴에 구글 캡차의 Site 키와 Secret  키를 저장하면 된다.

 

1.구글의 reCAPTHA 키 발급 받기

1. 구글의 eCAPTCHA admin page 에 가서
2. ‘Register a new site’ 에서 등록한다.  간단하게 v2의 로봇이 아니라는 것의 checkbox  로 했다.

다음을 누르면 site key와 secret key 가 발급 된다.

2. Contact Form 7 에 site key 와 secret key 등록

워드프레스 어드민의 Contact 를 누르고, Integration 에 아래와 같이 구글 reCAPTHA 어드민에서 site key 와 secret key 를 복사해서 붙여 넣는다.

 

 

3. Contact Form 에 recaptha 항목 추가

[recaptcha] 항목을 추가 한다.

 

자료 출처 : http://dobiho.com/28999/