문의 페이지 작성하기

정적 페이지의 기능을 이용해서 문의(Contact) 페이지를 작성한다. 이 페이지는 플러그인 Contact Form 7을 이용해서 폼(Form)을 표시한다. 또한 네비게이션에는 문의 페이지로 이동하는 링크를 추가한다.

  1. Contact Form 7 플러그인 이용하기
    Contact Form 7 플러그인을 설치한 후 활성화한다.
  2. 코드 복사하기
    플러그인을 활성화하면 ‘Contact’라는 메뉴가 추가된다.  ‘Contact’를 클릭해서 설정화면을 열면 기본으로  ‘Contact form 1’이라는 폼이 작성되어 있다. 이렇게 기본으로 제공되는 폼을 그대로 표시하기 위해 준비된 코드(shortcode)를 복사한다.
  3. 문의 페이지 작성하기
    새로운 페이지를 작성하고 제목을 ‘문의’로 지정한다. 본문에는 문의에 관한 문장을 입력하고, 줄 바꿈을 한 후 위에서 복사한 코드를 붙여넣기 하고 공개하기 버튼을 클릭해서 페이지를 작성한다.
  4. 문의 페이지로 이동하는 링크 작성하기
    [외모]-[메뉴]에서 문의 페이지로 이동하는 링크를 추가한 후 [메뉴 추가] 버튼을 클릭해서 설정을 저장한다.
  5. 문의 페이지 확인하기
    네비게이션바에서 링크를 클릭하여 문의 페이지로 이동한다.  ‘Contact form 7’의 기본 설정에서는 ‘이름’, ‘이메일’, ‘제목’, ‘메시지’ 4개의 입력 필드와 [전송] 버튼이 표시된다.
  6. ‘제목’ 필드 삭제하기
    ‘Contact form 7’의 설정화면을 열고 ‘폼’의 설정에서 ‘text your-subject’라는 형식으로 입력되어 있는 ‘제목’ 필드를 삭제한다.
  7. 라벨 및 마크업 변경하기
    계속해서 라벨 및 마크업을 변경해서 스타일시트에서 디자인을 적용하기 쉽게 한다. 먼저 각 항목의 라벨과 입력 필드는 <label>을 추가해서 서로 관련이 있음을 나타낸다. 이때 ‘메시지’라는 라벨은 ‘문의 내용’으로 변경한다. ‘(필수)’는 ‘※ 필수’로 변경하고, <span class=”req”>로 마크업한다. 전송 버튼을 마크업한 <p>에는 클래스 이름을 ‘submit’이라고 지정한다.

    <p><label>이름<span class=”req”>※ 필수</span><br />
    [text* your-name] </label></p><p><label>이메일 <span class=”req”>※ 필수</span><br />
    [email* your-email] </label></p><p><label>문의 내용<br />
    [textarea your-message] </label></p><p class=”submit”>[submit “전송”]</p>
  8. 문의 폼 디자인 지정하기
    문의 폼(Contact Form)의 디자인을 지정한다. 폼 전체를 녹색 박스로 장식하고, 입력 필드의 가로 길이와 전송 버튼 등도 지정해서 문의 폼을 완성한다.
  9. 메일 설정하기
    폼의 전송 테스트를 하기 전에 메일을 설정한다. Contact Form 7의 설정화면을 열고 ‘메일’ 설정의 ‘To'(받는 사람)를 확인한다. 폼에서 작성한 문의 내용은 여기에서 지정한 메일 주소로 전송된다.
    메일 주소의 기본은 관리화면의 [설정]-[일반]의 ‘이메일 주소’로 지정한 주소가 입력되어 있기 때문에 필요에 따라 변경한다.
    위에서 ‘제목’ 필드를 삭제했기 때문에 ‘제목’ 필드와 ‘메시지 내용’에 입력된 값을 삽입하는 ‘your-subject’의 지정을 ‘문의’라고 수정해서 입력한다. 설정이 끝나면 [저장] 버튼을 클릭해서 저장한다.
  10. 문의 전송하기
    문의 폼에 내용을 입력하고 전송 테스트를 한다. 전송이 완료되면 메일이 전송되었다는 메시지가 표시된다.
  11. 메일 확인하기
    문의 폼의 내용은 위에서 입력한 메일 주소로 전송된다. 전송된 메일을 확인한다.

->MEMO

Contact Form 7에서  새로운 필드를 추가하기 위해서는 ‘태그 생성’의 풀다운 메뉴로부터 필드를 선택한 후 필수항목으로 할 것인지 등의 옵션을 설정한다.

->TIP

전송된 메일이 발송되지 않을 경우 참고 : http://www.caspianit.co.uk/contact-form-7-wp-mail-smtp-problemsolved/하여  Configure SMTP 플러그인을 설치하여 해결하였다.

출처: 바꾸면서 배우는 워드프레스 디자인

답글 남기기