워드프레스로 웹 페이지 만들기 - Contact 페이지

Contact 페이지는 사용자가 가능하면 편하게 연락할 수 있도록 최대한 가능성을 높여야 합니다. 그러기위해서는 Contact 페이지에 몇가지 내용을 추가하면 좀 더 연락을 쉽게 할 수 있을 것입니다.

 

Contact 페이지의 핵심요소를 살펴보면,

• 이메일 응답 시간을 작성해 주는 것입니다. 방문자가 얼마후에 응답을 받을수 있는지를 예상할 수 있도록 해주는 것입니다.

• 바로 연락할 수 있는 전화번호를 보여 준다면 훨씬 더 연락 하기가 쉬울 것입니다.

• 국내같은 경우 대부분의 사람들이 카카오톡을 사용하고 있기때문에 카카오톡 아이디를 보여주면 도움이 될것입니다.

• 컨택트 페이지에 입력하는 사항들은 가능한 입력 내용을 최소화 해야 쉽게 입력을 유도할 수 있습니다.

 

저는 워드프레스에서 제공하는 Accelerate 테마를 가지고 블로그용으로 웹 사이트를 만드는 것이기 때문에 앞서 설명한 이론적인 내용은 생략하고 워드프레스의 기능적인 사용법 위주로 설명하겠습니다.

Contact 페이지에 내용을 추가하기 위해서 지난번에 "Contact Form 7" 이라는 플러그인을 설치해서 컨택트 폼을 만들어 보았습니다. 이 Contact 페이지에서 작업해 보겠습니다.

 

워드프레스 알림판의 페이지에서 Contact 페이지의 '편집'을 클릭합니다.

 

Contact 페이지에 컨택트 내용을 추가하기 위해서 미리작성해 놓은 내용을 복사해서 폼 소스코드 위에 붙여넣기 해 줍니다. 응답시간, 전화번호 이렇게 입력해서 보여주면 훨씬 더 쉽게 연락을 할수 있을것 입니다.

 

이렇게 작성하고 업데이트를 클릭하면 완성된 Contact 페이지를 사이트에서 확인할 수 있습니다.

 

컨택트 디폴트 폼에는 Name, Email, Subject, Message 순으로 폼에 입력하게 되어 있습니다. 여기서 Subject 를 없애고 phone number를 입력할 수 있도록 수정해 보겠습니다.

Contact 폼 에서 수정 할 내용은 아래와 같습니다.

• 입력 폼 필드 추가

• 알림 메일 수정

• 1인 이상 알림 메일 추가

• 입력한 사람에게 복사 메일 발송

 

먼저, 입력 폼 필드를 추가해 보겠습니다. 폼을 수정하기 위해서 Contact < Contact Forms 로 들어가서 '편집' 링크를 클릭합니다.

 

이렇게 들어가게되면 컨택트 폼의 소스 코드를 볼 수 있습니다. 저는 코드 이해를 쉽게하기 위해서 사이트의 컨택트 페이지에서 폼 이미지를 캡처해서 우측에 배치했습니다.

 

소스 코드 중에서 Subject 부분을 없애버리고 이 부분에 Your Phone 을 입력해 보겠습니다.

 

Subject 부분을 지우고 그 자리에 Your Email 부분을 복사해와서 갖다 붙여줍니다. 그리고나서 폼 윗부분에 'tel' 이라는 버튼을 클릭해주면 팝업창이 뜹니다.

 

여기서 'Required field' 항목을 체크해 주고나서 아래 부분에 보면 코드가 있습니다. 이 코드를 복사하고 창을 닫고 나옵니다.

 

다시 컨택트 폼 수정 페이지로 와서 복사한 코드[tel* tel-113]를 위와 같이 붙여주고 label 이름도 "Your Phone"으로 수정해 줍니다. 이렇게하면 컨택트 폼이 수정된 것입니다. Save 하고 나와서 사이트에서 새로고침 해보면 Subject 부분이 Your Phone으로 수정된 것을 확인 할 수 있습니다.

사용자가 이름을 입력하고, 전화번호를 입력하고, 메시지를 입력해서 보내기를 하면 제가 메일로 받아 봐야 합니다. 제가 메일로 사용자의 정보를 받을 수 있는 방법을 아래에서 설명하겠습니다.

 

먼저 이메일에 관련된 정보를 볼려면 Form 탭 옆에 Mail 탭을 클릭해 줍니다.

 

1번) 여기에 내가 받을 이메일 주소를 입력합니다. 여기에 이메일 주소를 또 추가하고 싶으면 콤마를 찍고 입력하면 되는데 이때 원하는만큼 계속 입력하면 추가됩니다. 가입된 호스팅 업체나 서버에서 자동적으로 메일을 발송해 줄 것입니다.

 

2번) 제목 부분에는 Your Subject을 지워났기 때문에 이 부분을 수정해야 됩니다. 이 부분을 Your Phone으로 수정하기위해 'tel' 코드를 받았기 때문에 Your Subject을 지우고 복사한 코드 -> [tel* tel-113] 을 붙여넣습니다.

 

3번) 메시지 내용중에 제목(subject) 부분도 마찬가지로 Your Subject을 지우고 복사한 코드 -> [tel* tel-113] 을 붙여넣습니다.

 

이렇게 수정한대로 사용자에게 메시지 내용이 들어가게 됩니다.

 

아래에 보면 Mail (2)가 보입니다. 이것은 자동으로 발송되는 이메일입니다. 입력자한테 카피본이 이메일로 가는 것인데 이것을 체크해 줍니다. Mail (2)에서 Subject 부분에도 Your Subject을 지우고 복사한 코드 -> [tel* tel-113] 을 붙여넣기 해줍니다.

 

이렇게 작성하고 저장하기를 누른후 사이트에서 새로고침하면 완성된 Contact 페이지를 확인할 수 있습니다.

 

지금까지 컨택트 폼에서 전화번호 내용을 변경해서 수정했고, 받는사람을 설정해서 추가했고, 제목도 변경했고, 메시지 내용도 변경했고, 입력한 사람에게 자동으로 메일발송도 설정해 보았습니다. 이렇게 컨텍트 폼을 수정하면 됩니다.

 

 

지금까지 워드프레스에서 Contact 페이지를 만들어 보고 Contact  Form 내용을 수정해 보았습니다.