티스토리 뷰
워드프레스에서 방문자와 원활한 커뮤니케이션을 하기 위해 가장 많이 사용되는 방법 중 하나가 컨택트 폼을 설치하는 것입니다. 이 중에서도 가장 널리 사용되고 있는 플러그인 중 하나는 Contact Form 7입니다. 이 플러그인은 설치가 쉽고, 다양한 설정 옵션을 제공하며, 이메일 양식 작성 기능도 매우 강력합니다. 만약 당신이 워드프레스 사이트를 운영하고 있고, 방문자들이 간편하게 당신에게 문의할 수 있는 양식을 제공하고 싶다면 Contact Form 7이 훌륭한 선택이 될 것입니다.
Contact Form 7은 사용자 친화적이며, 다양한 커스터마이징이 가능해 코드 지식이 없는 사람도 쉽게 양식을 만들고 관리할 수 있습니다. 이 튜토리얼에서는 Contact Form 7을 사용해 워드프레스에서 컨택트 폼을 만드는 전 과정을 설명하겠습니다.
Contact Form 7 플러그인 설치 및 활성화
- 워드프레스 관리자 대시보드에서 플러그인 설치
- 먼저 워드프레스 대시보드로 이동한 후, 좌측 메뉴에서 "플러그인"을 선택합니다.
- 상단의 "새로 추가" 버튼을 클릭한 다음, 검색창에 "Contact Form 7"을 입력하세요.
- "Contact Form 7" 플러그인이 나타나면 "지금 설치" 버튼을 클릭하고, 설치가 완료되면 "활성화" 버튼을 눌러 플러그인을 활성화합니다.
- Contact Form 7 설정 화면 확인
- 플러그인이 활성화되면, 워드프레스 대시보드 메뉴에 "Contact"라는 새로운 메뉴 항목이 나타납니다.
- 이 메뉴를 클릭하면 Contact Form 7의 설정 화면으로 이동할 수 있습니다.
기본 컨택트 폼 생성
- 기본 폼 생성 및 수정
- Contact Form 7 플러그인을 설치하면 기본으로 제공되는 폼이 있습니다. "Contact" 메뉴를 클릭하고, 기본으로 생성된 "Contact form 1"을 확인하세요.
- "Contact form 1"을 클릭하면 폼 편집 화면으로 이동하며, 기본 템플릿이 미리 제공됩니다. 이 템플릿은 이름, 이메일, 제목, 메시지 등을 포함하고 있습니다.
- 만약 이 양식을 그대로 사용하고 싶다면, 별도의 수정 없이도 폼을 사용할 수 있습니다.
- 폼 항목 추가 및 수정
- 기본 제공되는 폼에 항목을 추가하거나 수정하고 싶다면, Contact Form 7이 제공하는 다양한 태그들을 이용하면 됩니다. 예를 들어, 전화번호 입력란을 추가하고 싶다면 다음 태그를 추가할 수 있습니다:
html코드 복사<label> 전화번호 [tel* your-phone] </label>
- 태그에는 text, email, tel, textarea 등 다양한 옵션이 있으며, 이들은 필수 항목으로 설정할 수도 있습니다. 필수 항목은 태그 뒤에 *을 추가해 설정할 수 있습니다.
- 기본 제공되는 폼에 항목을 추가하거나 수정하고 싶다면, Contact Form 7이 제공하는 다양한 태그들을 이용하면 됩니다. 예를 들어, 전화번호 입력란을 추가하고 싶다면 다음 태그를 추가할 수 있습니다:
컨택트 폼을 페이지나 게시물에 삽입하기
- 단축 코드 사용
- 폼을 생성하고 저장하면 해당 폼의 단축 코드(shortcode)가 생성됩니다. 이 코드를 사용하여 페이지나 게시물에 폼을 삽입할 수 있습니다.
- 예를 들어, [contact-form-7 id="1234" title="Contact form 1"]와 같은 단축 코드를 복사한 후, 폼을 삽입하고자 하는 페이지나 게시물의 편집 화면으로 이동합니다.
- 그 페이지의 원하는 위치에 단축 코드를 붙여 넣고, 저장하면 됩니다.
- 블록 편집기를 사용한 삽입
- 워드프레스의 블록 편집기를 사용하는 경우, "블록 추가" 버튼을 클릭한 후 "Contact Form 7" 블록을 선택할 수 있습니다.
- 해당 블록을 페이지에 추가한 후, 드롭다운에서 원하는 폼을 선택하면 폼이 페이지에 삽입됩니다.
폼 제출 후 동작 설정
- 이메일 설정
- 폼이 제출된 후 해당 내용을 이메일로 받을 수 있도록 설정해야 합니다. Contact Form 7 폼 편집 화면 하단의 "메일" 탭을 클릭하면 이메일 설정을 할 수 있습니다.
- "To" 필드에는 문의 내용을 받을 이메일 주소를 입력하고, "From" 필드에는 발신 이메일 주소를 설정합니다. 발신 이메일은 도메인 기반의 이메일 주소를 사용하는 것이 좋습니다.
- 기본적으로 메일 템플릿이 설정되어 있지만, 필요에 따라 템플릿을 수정할 수 있습니다. 이 템플릿은 방문자가 입력한 정보를 그대로 이메일로 전송하는 역할을 합니다.
- 감사 메시지 설정
- 폼이 제출된 후 방문자에게 표시되는 메시지도 설정할 수 있습니다. Contact Form 7은 기본적으로 "Thank you for your message. It has been sent."라는 메시지를 표시하지만, 이를 자유롭게 수정할 수 있습니다.
- 폼 편집 화면에서 "메시지" 탭을 클릭하여 각 상황에 맞는 메시지를 설정할 수 있습니다. 예를 들어, 폼이 성공적으로 제출되었을 때, 오류가 발생했을 때, 필수 항목이 누락되었을 때 등을 각각 설정할 수 있습니다.
스팸 방지 및 보안 강화
- reCAPTCHA 통합
- 스팸성 폼 제출을 방지하기 위해 Google의 reCAPTCHA 기능을 활용할 수 있습니다. Contact Form 7은 reCAPTCHA와 기본적으로 통합되어 있으므로 간편하게 설정할 수 있습니다.
- 워드프레스 대시보드에서 "Contact" 메뉴 아래에 있는 "Integration"을 클릭하고, reCAPTCHA를 설정할 수 있습니다. Google reCAPTCHA 웹사이트에서 사이트 키와 비밀 키를 발급받아 이를 입력하면 설정이 완료됩니다.
- Akismet과의 연동
- Contact Form 7은 워드프레스의 인기 스팸 방지 플러그인인 Akismet과도 연동됩니다. Akismet을 설치하고 활성화하면 폼 제출 시 스팸 필터링을 자동으로 처리할 수 있습니다.
다국어 지원 및 번역 설정
- WPML이나 Polylang 플러그인 사용
- 만약 다국어 사이트를 운영 중이라면 Contact Form 7도 다국어 폼을 지원하도록 설정할 수 있습니다. WPML이나 Polylang 같은 다국어 플러그인을 사용하여 각 언어별로 다른 폼을 만들 수 있습니다.
- 다국어 플러그인 설정에 따라, 각 언어에 맞는 폼을 번역하고 폼을 적용할 수 있습니다.
추가 기능 및 확장
- 다양한 확장 플러그인 활용
- Contact Form 7은 다양한 확장 플러그인을 통해 기능을 확장할 수 있습니다. 예를 들어, Contact Form 7 Dynamic Text Extension 플러그인을 사용하면 방문자가 입력한 데이터를 기반으로 동적인 텍스트 필드를 만들 수 있습니다.
- Contact Form 7 Database Addon을 사용하면 제출된 폼 데이터를 데이터베이스에 저장할 수 있으며, 이를 통해 나중에 데이터를 쉽게 검색하고 관리할 수 있습니다.
- 파일 업로드 기능 추가
- Contact Form 7에서는 파일 업로드 기능을 추가할 수 있습니다. 이를 위해 [file] 태그를 사용하면 됩니다. 예를 들어, 다음과 같이 파일 업로드 필드를 추가할 수 있습니다:
html코드 복사<label> 파일 업로드 [file your-file] </label>
- 업로드된 파일은 이메일을 통해 받을 수 있으며, 업로드 가능한 파일의 종류와 크기도 설정할 수 있습니다.
- Contact Form 7에서는 파일 업로드 기능을 추가할 수 있습니다. 이를 위해 [file] 태그를 사용하면 됩니다. 예를 들어, 다음과 같이 파일 업로드 필드를 추가할 수 있습니다:
마무리
Contact Form 7은 워드프레스에서 가장 널리 사용되는 플러그인 중 하나로, 강력하면서도 사용하기 쉬운 폼 작성 도구입니다. 기본 폼을 활용하거나, 필요에 따라 커스터마이징해서 당신의 사이트 방문자들과 효과적으로 소통할 수 있습니다. 보안 및 스팸 방지 기능을 추가로 설정하면 폼 사용 중 발생할 수 있는 문제도 최소화할 수 있습니다.