Contact Form 7 플러그인으로 문의하기 양식 만들기 (2)

이전 포스팅)

Contact Form 7으로 문의하기 양식 만들기 (1)

문의하기 양식 만들기

일반적인 회사 홈페이지에서 Contact Us 라는 메뉴가 있습니다. 고객은 문의사항이 있을 때 Contact Us를 클릭해서 담당자에게 문의를 합니다.

문의하기 양식 페이지를 만드는 방법은 다음과 같습니다. 먼저 Contact Form 7을 사용해서 컨택폼을 만들고 만들어진 컨택폼에서 생성된 숏코드를 복사해서 문의하기 페이지에 복사한 숏코드를 붙여 넣으면 문의하기 양식이 완성됩니다.

왼쪽 사이드바에서 Contact 메뉴를 클릭하면 컨택트 폼을 추가하고 관리하는 화면이 나옵니다.

왼쪽에서 새로 추가 메뉴를 클릭합니다.

콘택트 폼을 추가하는 화면이 나옵니다. 기본 언어 사용하기의 새로 추가 버튼을 클릭합니다.

아래와 같이 콘택트 폼을 추가하는 화면이 나옵니다. 이 화면에서 문의하기 양식을 만들수 있습니다.

폼 탭 아래에 있는 Textarea 영역에 보면 이름, 이메일, 제목, 메시지, 보내기 버튼이 텍스트로 적혀있습니다.

이 곳을 편집해서 프론트엔드 쪽에서 입력하기 원하는 입력부분을 추가하거나 편집하면 됩니다.

여기에서는 문의하기 화면에 휴대폰 연락처와 문의유형을 두가지 항목을 기존 항목에 추가해 보도록 하겠습니다.

먼저 제목을 문의하기라고 적습니다.

휴대폰 연락처를 입력하기 위해서 tel 버튼을 클릭합니다.

tel 설정 팝업이 뜨면 필드 입력 필수체크 값인 Required field에 체크하고, 이름 란에는 휴대폰 연락처라고 입력하고 Insert Tag 버튼을 클릭합니다.

아래와 같이 태그가 자동으로 생성된 것을 확인할 수 있습니다. 

이 부분을 아래와 같이 변경합니다.

문의유형은 콤보박스로 만들겠습니다. 콤보박스로 만들기 위해서 drop-down menu를 클릭합니다.

필수 항목에 체크를 한 뒤에 Options 항목에 제품서비스 문의, 고객불만, 배송문의, 건의하기를 입력합니다.

첫번째 콤보박스를 아무것도 입력받지 않으려면 Insert a blank item as the first option에 체크박스를 합니다.

입력이 완료되면 Insert Tag 버튼을 클릭합니다.

Insert Tag의 입력이 완료된 뒤에 아래와 같이 문의유형의 텍스트 부분을 편집합니다.

숏코드를 복사

아래 적색 박스 부분이 완성된 컨택폼의 숏코드입니다. 마우스 오른쪽 버튼을 클릭해서 복사합니다.

복사한 숏코드는 문의하기 페이지를 만든 뒤에 붙여넣을 것입니다.

문의받을 메일 설정하기

고객이 문의한 내용에 대해서 관리자는 메일을 확인해야합니다. 자신의 메일 주소를 To 부분에 입력한 뒤에 저장하기 버튼을 클릭합니다. 

문의하기 페이지 만들기

왼쪽 메뉴에서 새 페이지 추가 버튼을 클릭합니다.

제목 란에 문의하기를 입력하고 본문 부분에는 미리 복사해 둔 컨택폼 숏코드를 붙여넣고 공개하기 버튼을 클릭합니다.

Contact Us 메뉴에 문의하기 페이지 연결하기

메뉴를 설정하기 위해서 외모 > 메뉴 를 클릭합니다.

왼쪽 페이지 부분의 모두 보기 탭을 클릭해서 문의하기 페이지를 찾습니다.

문의하기에 체크를 한 뒤에 메뉴에 추가 버튼을 클릭합니다.

맨 아래에 문의하기 메뉴가 추가된 것을 확인할 수 있습니다.

문의하기를 펼쳐서 네비게이션 라벨의 이름은 CONTACT US로 변경합니다. 네비게이션 라벨은 실제 웹사이트의 메뉴에서 보여지는 이름을 말합니다. 워드프레스는 네비게이션 라벨을 별도로 지정할 수 있어서 만들어진 페이지의 이름과 상관없이 자유롭게 메뉴이름을 지정할 수 있습니다. 입력을 완료한 뒤에 메뉴저장 버튼을 클릭합니다.

이제 www.shuman.kr 로 접속해서 메뉴와 문의하기 페이지가 정상적으로 작동하는지 확인합니다.

아래와 같이 조금 전에 만든 CONTACT US 메뉴가 상단 메뉴에 정상적으로 디스플레이 됩니다.

CONTACT US 메뉴를 클릭합니다. 문의하기 페이지가 정상적으로 디스플레이 되는 것을 확인할 수 있습니다.

문의유형 부분을 클릭해보면 등록했던 4가지의 문의유형이 정상적으로 보입니다.

이제는 문의내용을 입력한 뒤에 관리자 메일에 문의사항이 정상적으로 메일링 되는지 확인하도록 하겠습니다.

아래와 같이 입력 후 보내기 버튼을 클릭합니다.

성공적으로 전송되면 다음과 같은 메시지가 보입니다.

컨택폼에서 설정한 메일 계정으로 로그인해서 문의 내용이 정상적으로 메일링 되었는지 확인합니다.

구글로 로그인 해서보니 스팸함에 한 건의 메일이 왔습니다.

스팸으로 분류된 메일을 클릭합니다.

고객의 문의내용은 관리자 메일에 정상적으로 들어왔습니다. 그런데 스팸 메일로 분류되어 들어왔습니다. 

Gmail이나 일반적인 메일 사이트는 메일 발송 도메인과 웹사이트에 설정되어 있는 메일 주소의 도메인이 틀리면 스팸으로 분류를 합니다.

여기에서처럼 메일을 보낸 사이트의 도메인은 shuman.kr 인데 실제 메일 주소는 gmail.com 인 경우입니다. 이렇게 도메인이 다를때 문제가 발생하는 것입니다.

따라서 이럴때는 웹호스팅에서 제공하는 메일을 사용하는 것을 추천합니다. 웹호스팅에서 메일설정을 한 뒤에, 컨택폼의 메일 설정을 admin@shuman.kr과 같이 호스팅하고 있는 도메인 메일로 하는 것입니다.

이에 대한 카페24 호스팅 메일설정은 다음 시간에 계속 진행하도록 하겠습니다.