워드프레스 Contact Form 7 플러그인 설치하기

지난 시간에 워드프레스 홈페이지에 메뉴를 추가하는 방법에 대해서 알아 봤습니다.

추가한 메뉴중에서 'Contact Us' 라고 하는 메뉴가 있었는데요~

해당 페이지에서 제목과 내용을 입력하면 해당 내용이 관리자에게 메일이 발송되도록 하는 입력 폼을 추가해 보도록 하겠습니다.

Contact Us 와 같이 문의하기 입력폼을 만들어 주는 플러그인이 'Contact Form 7' 이라는 플러그인 입니다.

오늘은 Contact Form 7 플러그인을 설치해 보고, Contact Us 페이지 입력폼을 붙여 보도록 하겠습니다.

또 필요한 입력폼 항목도 추가해 보도록 하겠습니다.

1. Contact Form 7  플러그인 설치

플러그인 설치를 위해서 먼저 워드프레스 관리자페이지에서 플러그인 메뉴로 이동합니다.

플러그인 메뉴중에서 '새로추가' 메뉴를 클릭하면 아래와 같이 플러그인 추가 화면이 나옵니다.

우측 상단에 검색 박스에 'contact form 7' 이라고 입력해 보겠습니다.

그럼 아래 화면과 같이 Contact Form 7 플러그인이 검색이 됩니다.

우측 상단에 있는 '지금설치' 버튼을 눌러서 바로 설치를 해보도록 하겠습니다.

설치가 완료되면 '지금설치' 버튼이 '활성화'로 바뀝니다.

사용을 위해서 활성화를 클릭 하도록 하겠습니다.

그럼 관리자화면의 좌측 메뉴중에서 지금까지 없었던 'Contact' 메뉴가 추가되어 있을겁니다.

해당 메뉴를 클릭하시면 아래 화면과 같이 Contact form 1 이라고 하는 입력폼이 기본적으로 하나 생성되어 있습니다.

이 입력폼을 저희 페이지에 한번 추가해 보도록 하겠습니다.

2. Contact Us 입력폼 만들기

아래와 같이 사용자가 입력할수 있는 입력폼을 구성할수 있는 페이지 나옵니다.

먼저 아래 화면처럼 영문 타이틀을 한글로 모두 변경해 보겠습니다.

지금은 입력폼을 추가하지 않고 기본적으로 들어있는것을 그대로 사용하여 등록해 보도록 하겠습니다.

입력폼 추가는 아래쪽에서 추가로 설명을 드리겠습니다.

타이틀을 수정한 뒤에,

Mail 이라는 탭을 클릭하면 아래와 같은 페이지가 나옵니다.

위의 입력폼이 사용자가 입력하는 화면을 구성하는 페이지라고 하면,

아래 mail 탭 페이지는 관리자가 받아볼 메일 내용을 구성하는 페이지 입니다.

기본적으로 입력된 그대로 메일을 발송할꺼기 때문에 내용수정은 하지 않으셔도 됩니다.

대신 타이틀을 Contact Us 라고 수정을 하고 'Save' 버튼을 눌러 저장하도록 하겠습니다.

중간에 있는 파란색 배경의 코드가 있는데, 이 코드를 복사해서 따로 기록해 주세요~

뒤에서 입력폼 페이지를 만들때 사용할 코드 입니다.

3. 입력폼 페이지에 적용

지금까지 입력폼을 만들었으며,

이를 해당 페이지에 적용해 보도록 하겠습니다.

관리자 페이지에서 페이지 메뉴를 클릭하면 우리가 만들어둔 CONTACT US 페이지를 확인할 수 있습니다.

CONTACT US 페이지를 클릭하여 내용 수정을 하도록 하겠습니다.

수정화면에서 내용을 아래와 같이,

앞에서 복사해 둔 코드를 여기에 붙여넣기를 합니다.

그리고 업데이트를 눌러 저장을 합니다.

4. 홈페이지에서 입력폼 확인

지금까지 작업한 내용이 홈페이지에 적용이 되었는지 확인해 보겠습니다.

홈페이지에서 CONTACT US 메뉴를 눌러보면 아래와 같이 입력폼이 적용된 것을 확인하실 수 있습니다.

실제로 내용을 입력하고 보내기를 해 보겠습니다.

그럼 아래와 같이 해당 메일이 오신것을 확인하실 수 있습니다.

5. 입력폼 항목 추가하기

이제는 작업된 입력폼에 전화번호와 문의유형이라는 항목을 2개 추가해 보도록 하겠습니다.

아래 화면에서 이메일 부분의 코드를 복사하여 아래에 붙여넣기를 하고 해당 내용을 수정을 합니다.

그리고 위쪽 버튼중에 'tel'이라는 버튼을 클릭하면 아래와 같은 창이 열립니다.

해당 화면에서 'Required field' 라고 하는 항목에 체크를 하고 'Insert Tag'라는 버튼을 클릭합니다.

Required field는 필수 입력 항목이라는 뜻입니다.

같은 방법으로 문의유형이라는 코드를 아래와 같이 추가를 합니다.

그리고 상단 버튼중에서 'drop-down menu' 버튼을 클릭하면 아래와 같은 창이 열립니다.

여기서 'Required field' 라고 하는 항목에 체크를 하고, Options 에는 아래와 같은 항목을 입력합니다.

그리고 Insert a blank item as the first option 에 체크를 합니다. (첫번재 항목은 기본적으로 빈값이 되도록 하는겁니다.)

2개의 항목이 추가되면 아래와 같은 코드가 추가된 것을 확인 하실 수 있습니다.

다음으로 Mail 탭을 클릭하고,

아래와 같이 항목을 추가해 줍니다.

관리자가 받는 메일의 내용을 아래와 같이 구성하겠다는 뜻입니다.

위까지 적용된 내용을 홈페이지에서 확인해 보면,

아래와 같이 항목이 2개 추가된 것을 확인하실 수 있습니다.

추가로 자신이 필요한 항목을 위와 같은 방법으로 추가 삭제 하시면 됩니다.

이상으로 Contact Form 7 플러그인 설치와 입력폼을 페이지에 적용하는 것에 대해 알아보았습니다.

수고 많으셨습니다. ^^