안녕하세요. 린치핀소프트 한광희입니다.

이번 포스트에서는 아주 중요하고 편리한 플러그인 하나를 소개해보려고 합니다.

 

 

screenshot-www.linchpinsoft.com 2015-08-07 20-09-38

 

 

기업 홈페이지 또는 개인 블로그에서도 사이트 관리자와 이용자의 소통은 중요한 요소입니다. 많은 방법들이 있지만 일반적으로 사용하는 방법이 “댓글”,”게시판”,”트랙백”,”Share”등이 있습니다.

또 한가지더 자주 사용되는것이 “콘택트 폼” 입니다. 워드프레스 플러그인중에는 이 콘택트폼기능을 아주 쉽고 편리하게 구현할수 있는 플러그인이 많습니다.

대표적인 플러그인인 “Contact Form7” 과 “Ninja Form” 입니다.

오늘 이 글에서는 Contact Form7 플러그인을 이용하여 쉽게 페이지,포스트에 콘택트폼을 추가해보겠습니다.

 

screenshot-wordpress.org 2015-08-07 19-20-21

 

콘택트폼7 플러그인은 워드프레스 플러그인 공식 홈페이지에서 검색하여 다운로드 받거나 관리자 페이지의 플러그인 추가하기에서 검색하여 해당 플러그인을 설치할수 있습니다.

2015.8월 기준 현재 대략 100만이 넘는 이용자가 현재 설치하여 이용하고 있습니다. 워드프레스는 4.3버전까지 호환되고 있습니다!

 

1. 콘택트폼 추가

screenshot-www.linchpinsoft.com 2015-08-07 19-20-52

콘택트폼7 플러그인을 설치하면 위처럼 좌측에 “contact”라면 메뉴가 생성되며 이 메뉴를 통해 콘택트폼을 여러개 생성/관리 할수 있습니다.

저희는 여기서 새롭게 콘택트폼을 하나 생성해보겠습니다. 상단의 “새로추가”버튼을 클릭합니다.

 

2. 콘택트 폼 구성

“새로추가”버튼을 눌러 새로운 콘택트폼을 구성하는 화면을 보실수 있습니다. 우선 좌측은 콘택트폼을 구성하는 화면이고 우측은 콘택트폼에 추가할 필드를 구성하는 메뉴입니다.

우측에서 필드를 생성하여 좌측에 추가해주는 시스템입니다.

먼저 필드를 추가하기 위해 우측의 필드를 생성하는 부분부터 살펴보겠습니다.

“태그생성”의 드롭다운메뉴를 클릭하면 생성할수 있는 필드의 목록이 보여집니다.

screenshot-www.linchpinsoft.com 2015-08-07 19-27-34

 

텍스트필드/이메일/URL/라디오버튼/파일 업로드/제출(보내기) 필드등 대부분의 콘택트폼에서 필요로하는 필드를 구성할수 있습니다.

여기서 우리는 “라디오”필드를 만들어보겠습니다.

“라디오 버튼”은 여러가지의 옵션 버튼으로 사용자가 옵션을 선택하되 복수의 선택이 허용되지 않고 하나의 옵션만 선택하는 버튼입니다.

라디오버튼은 다수의 옵션중 하나를 선택하는 버튼이므로 “선택”란에 옵션들을 기입해야 합니다. 한 라인당 하나의 옵션이 됩니다.

여기서 저는 “워드프레스 개발”, “IT솔루션 강의”, “테마&플러그인 컨설팅” 이라는 세 가지 옵션을 만들어서 사용자가 해당 옵션중에 하나를 선택할수 있게끔 구성하였습니다.

 

screenshot-www.linchpinsoft.com 2015-08-07 19-25-13 (2)

 

상단의 화면을 참고하면 “이코드를 복사해서 폼의 왼쪽에 붙여넣으세요” 라는 요소와(빨간색 박스)

“그리고 이 코드를 아래의 메일 입력란에 입력하세요”(보라색 박스) 가 있습니다.

 

여기서 빨간색 박스의 코드를 복사하여 “콘택트 폼”을 구성하는 부분에 붙여넣어야 콘택트폼에 필드가 정상등록됩니다.

그리고 보라색 박스의 코드는 아래 하단의 “메시지 내용”이라는 부분에 복사하여 붙여 넣습니다.

1) 필드를 생성한다.

2) 생성된 필드를 좌측의 콘택트폼에 추가한다.

3)생성된 필드를 하단의 메시지 내용에 추가한다.

 

위의 순서가 필드를 추가하는 일반적인 과정입니다.

3)의 메시지 내용에 추가하는 부분은 이 메시지 내용이 콘택트 폼에 의해 전송된 “이메일”을 구성하는 부분입니다.  메시지 내용에도 해당 필드를 추가하면 이용자가 콘택트폼에서 선택한 필드의 내용이 이메일을 통해서 전달받을수 있게 됩니다.

 

 

 

screenshot-www.linchpinsoft.com 2015-08-07 19-25-13 (1)

 

 

상단의 화면은 방금 생성한 “라디오 버튼”을 콘택트폼 필드에 추가한 화면입니다.

Contact Form7플러그인에서 콘택트폼을 구성하는 화면은 Html 입력이 허용됩니다. 그러므로 콘택트폼의 DOM의 구성은 html에 친숙하신분이라면 많은 부분을 커스텀할수 있습니다.

 

이 외에도 많은 콘택트폼에 추가가 필요한 필드들을 위와 같은 방법으로 추가하시면 됩니다.

보통 이름/이메일/내용/전송 버튼을 일반적으로 구성합니다.

이때, 발신자의 이메일이나 내용은 꼭 정보가 입력되어야 발신이 허용되는 “<필수>” 필드로 지정될수 있습니다.

이메일의 필드는 [email* your-email] 과 같은 형식으로 콘택트폼에 추가되는데 이때 ” * ” 기호가 필수적으로 입력받아야 하는 영역임을 표시합니다.

필수 필드의 경우 * 부분을 필드명 뒤에 붙이면 됩니다!

 

3. 콘택트폼 숏코드확인 및 페이지/포스트에 추가하기

 

필드를 구성하고 우측 상단의 “저장하기”버튼을 누르면 아래와 같이 방금 생성한 콘택트폼의 숏코드가 생성됩니다.

이 숏코드를 통해 포스트/페이지/사이드바에 콘택트폼을 삽입 할수 있습니다.

보통은 Contact Us와 같은 페이지를 만들고 해당 페이지의 본문에 숏코드를 삽입합니다.

(contact form으로 생성된 숏코드의 id와 title은 각 워드프레스의 환경과 콘택트폼 입력내용에 따라 다른 값이 부여됩니다)

screenshot-www.linchpinsoft.com 2015-08-07 19-27-34 (1)

위의 숏코드를 복사하고 아래 처럼 새페이지를 작성하고 해당 페이지의 내용에 숏코드를 붙여넣었습니다!

screenshot-www.linchpinsoft.com 2015-08-07 19-28-34

 

 

4. 추가된 콘택트폼 확인

생성한 페이지를 가서 확인해보면 제가 생성한 필드인 이름/이메일/제목/메시지/라디오버튼/보내기 버튼이 생성되어 있는것을 확인할수 있습니다.

콘택트폼의 모양이나 스타일은 CSS를 통해 수정할수 있습니다!

screenshot-www.linchpinsoft.com 2015-08-07 19-29-42

 

5. 수신된 이메일 확인

위의 콘택트폼을 통해 내용을 입력하고 “보내기”버튼을 눌러 실제로 메일이 전송되는지 확인해보겠습니다.

전송후에는 아래와 같이 제가 콘택트폼에 입력한 내용이 콘택트폼에 지정된 이메일로 전송되어 왔습니다.

 

screenshot-mail.naver.com 2015-08-07 19-30-43

 

가끔 콘택트폼7을 통해 이메일이 전송이 안될때가 있는데 이때는 워드프레스를 호스팅하고 있는 업체에 SMTP 포트의 개방여부와 호스팅업체에서 이메일발신을 지원하는지등을

확인해보셔야 합니다. 그리고 가끔 AWS와 같은 해외에 클라우드 서비스를 이용하는 경우에는 발신하고 수신받는데 시간이 소요될때도 있습니다.

 

 

링크 : Contact form DB 플러그인 알아보기

콘택트 폼 7 플러그인을 보완해주는 Contact Form DB 플러그인에 대한 소개 포스트입니다.