워드 프레스

WordPress 사이트에 대한 문의 양식 7을 구성하는 방법

2021년에는 청중과 지속적으로 소통하는 것이 매우 중요합니다. MailChimp와 같은 서비스로 이메일 목록을 설정하면 구독자에게 콘텐츠를 바로 전달할 수 있습니다.

이메일 목록은 훌륭하지만 독자 또는 잠재 고객이 귀하에게 직접 연락하기를 원할 경우 어떻게 하시겠습니까? 연락처 양식이 필요한 곳입니다! 이 기사에서는 WordPress 사이트에 널리 사용되는 Contact Form 7 플러그인을 구성하는 방법을 다룹니다.

문의 양식 7을 설치하는 방법

Contact Form 7은 2009년부터 사용되어 왔으며 지난 5년 동안 7백만 회 이상의 다운로드를 기록했습니다. Contact Form 7은 WordPress 플러그인 저장소에서 직접 설치할 수 있습니다. "문의 양식 XNUMX"을 검색하면 다양한 추가 기능과 함께 플러그인을 찾을 수 있습니다.

WordPress 플러그인 저장소에서 Contact Form 7 플러그인을 설치합니다.
WordPress 플러그인 저장소에서 Contact Form 7 플러그인을 설치합니다.

플러그인이 설치되면 WordPress 대시보드의 사이드바에 "연락처"라는 메뉴 항목이 표시됩니다. 여기에서 Contact Form 7의 모든 설정을 구성할 수 있습니다.

Contact Form 7 설정을 사용자 지정합니다.
Contact Form 7 설정을 사용자 지정합니다.

문의 양식의 장단점

WordPress 사이트에 대해 Contact Form 7을 구성하는 방법에 대해 알아보기 전에 사이트에 문의 양식을 추가할 때의 몇 가지 장단점을 빠르게 살펴보겠습니다.

문의 양식을 갖는 것의 장점

  1. 연락처 양식을 사용하면 독자, 고객 및 팬이 귀하에게 직접 연락할 수 있습니다. WordPress 사이트의 목적에 따라 방문자가 귀하와 의사 소통하는 기능이 매우 중요할 수 있습니다. 예를 들어 전자 상거래 사이트에 문의 양식을 추가하지 않으면 관심 있는 사람들이 귀하의 제품에 대해 질문이 있는 경우 귀하에게 연락할 수 없기 때문에 귀하의 비즈니스에 재정적 피해를 줄 수 있습니다.
  2. 문의 양식은 WordPress 사이트 또는 비즈니스에 합법성을 추가합니다. 많은 사람들이 연락 양식의 존재를 일종의 신뢰 요인으로 봅니다. 사이트 소유자인 귀하에게 연락할 수 있다는 아이디어는 귀하의 콘텐츠를 더욱 신뢰할 수 있게 만듭니다.

문의 양식을 갖는 것의 단점

  1. 스팸은 댓글 상자 및 문의 양식과 같은 공개 양식에 문제가 될 수 있습니다. 다행히 Contact Form 7을 사용하면 reCAPTCHA로 스팸을 걸러낼 수 있습니다. Cloudflare 페이지 규칙을 구성하여 자신을 더욱 보호할 수도 있습니다. 이 기사의 뒷부분에 있는 문의 양식 7에서 스팸 방지를 설정하는 방법에 대해 자세히 알아보겠습니다.
  2. 사이트에 문의 양식을 추가한 후에는 메시지에 응답하는 데 시간을 할애해야 합니다. 이것은 어떻게 보느냐에 따라 반드시 나쁜 것은 아닙니다. 어떤 사람들은 이메일에 응답하는 과정을 두려워하지만 다른 사람들은 진정으로 그것을 즐깁니다. 경험에 따르면 사이트에 문의 양식이 있을 때 나타나는 관계는 일반적으로 조정 비용보다 중요하므로 이를 통해 강화하는 것이 좋습니다!

문의 양식 7 설정 개요

Contact Form 7 플러그인으로 연락처 양식을 만드는 것은 매우 쉽습니다. 시작하려면 문의> 문의 양식 WordPress 사이드바에서. 이 페이지에서 관련 메타데이터 세부 정보와 함께 모든 연락처 양식을 볼 수 있습니다.

문의 양식 7의 문의 양식.
문의 양식 7의 문의 양식.

Contact Form 7을 처음 설치하면 예제 양식도 생성됩니다. 사용자 지정 문의 양식을 만드는 방법에 대해 알아보기 전에 먼저 문의 양식 7의 작동 방식을 더 잘 이해하기 위해 예제 양식을 살펴보겠습니다. 클릭 문의 양식 1 양식 설정을 봅니다.

WordPress 문의 양식을 구성합니다.
WordPress 문의 양식을 구성합니다.

"문의 양식 편집" 페이지는 XNUMX개의 섹션으로 나뉩니다.

  1. 형태 - "텍스트", "이메일", "확인란" 등과 같은 다양한 필드 옵션으로 HTML 연락처 양식 템플릿을 사용자 정의합니다. 양식 사용자 정의 상자에 사용자 정의 HTML을 작성할 수도 있습니다.
  2. 메일 – 알림 이메일에 사용되는 이메일 템플릿 및 설정을 사용자 정의합니다.
  3. 메시지 – 특정 작업 후에 표시되는 메시지를 사용자 지정합니다. 예를 들어, 누군가가 연락처 양식을 제출한 후 표시할 고유한 메시지를 설정할 수 있습니다.
  4. 추가 세팅 - 구독자 전용 모드, 데모 모드 및 메일 건너뛰기와 같은 추가 기능을 활성화하려면 스니펫을 지정하십시오.

이제 각 섹션을 자세히 살펴보고 맞춤형 문의 양식을 만들어 보겠습니다!

당신은 그들이 말하는 것을 알고 있습니다. 친구를 가깝게 유지하고 청중을 더 가깝게 유지하십시오 ... 또는 이와 유사한 것입니다. 😉
이 인기 있는 플러그인 덕분에 사이트 방문자와 연결 상태를 유지하세요 👇
이야기하려면 클릭

WordPress 문의 양식을 만드는 방법

새 연락처 양식을 만들려면 새로운 추가 "문의 양식" 옆에 있습니다.

문의 양식 7에서 새 문의 양식을 만듭니다.
문의 양식 7에서 새 문의 양식을 만듭니다.

새 연락처 양식에 이름을 지정하고 "저장"을 클릭합니다.

새 WordPress 문의 양식을 저장합니다.
새 WordPress 문의 양식을 저장합니다.

"양식" 섹션에서 연락처 양식에 필요한 HTML을 추가합니다. 다양한 사전 설정 버튼을 사용하여 인기 있는 양식 태그에 대한 단축 코드를 생성할 수 있습니다. 작업을 더 쉽게 하려면 Contact Form 7과 함께 제공되는 사전 설정 양식 태그에 대한 아래 설명을 확인하십시오.

  • 텍스트 – 한 줄의 텍스트에 대한 양식 태그를 만듭니다. 텍스트 필드는 이름, 성 및 여러 줄이 필요하지 않은 기타 텍스트 기반 스니펫에 유용합니다.
  • 이메일 - 이메일 주소에 대한 양식 태그를 만듭니다.
  • URL - URL에 대한 양식 태그를 만듭니다.
  • 전화 – 전화 번호에 대한 양식 태그를 만듭니다.
  • 번호 – 숫자에 대한 양식 태그를 만듭니다. "텍스트" 또는 "텍스트 영역" 입력 필드와 달리 "숫자" 필드는 숫자만 허용합니다.
  • 데이트 - 날짜에 대한 양식 태그를 만듭니다.
  • 텍스트 영역 – 텍스트 영역에 대한 양식 태그를 만듭니다. 일반 "텍스트" 입력 필드와 달리 "텍스트 영역" 필드는 여러 줄의 텍스트를 허용합니다. 메시지 본문을 입력하는 데 이상적입니다.
  • 드롭 다운 메뉴 - 드롭다운 메뉴에 대한 양식 태그를 만듭니다.
  • 체크박스 – 확인란에 대한 양식 태그를 만듭니다.
  • 라디오 버튼 – 라디오 버튼에 대한 양식 태그를 만듭니다.
  • 수락 - 수락 확인란에 대한 양식 태그를 만듭니다.
  • 퀴즈 - 질문-답변 쌍에 대한 양식 태그를 만듭니다.
  • 파일 – 파일 업로드 필드에 대한 양식 태그를 만듭니다.
  • 제출하다 - 제출 버튼에 대한 양식 태그를 만듭니다.

이제 연락처 양식을 사용자 지정해 보겠습니다. 완전성을 위해 Contact Form 7에서 사전 설정된 모든 양식 태그를 사용하는 연락처 양식을 만듭니다.

"텍스트" 양식 태그

Contact Form 7에서 미리 설정된 양식 태그를 클릭하면 아래와 같은 팝업 메뉴가 나타납니다. 이 메뉴에서 양식 태그의 설정을 구성할 수 있습니다. 하단에 연락처 양식 템플릿에 포함할 수 있는 단축 코드가 표시됩니다.

문의 양식 7의 "텍스트" 양식 태그.
문의 양식 7의 "텍스트" 양식 태그.

"텍스트" 양식 태그의 경우 아래 설정을 사용하여 이름에 대한 입력 필드를 만듭니다.

  • 필드 유형 – 필수 입력란
  • 이름 – text-711(자동 생성됨)
  • 기본값 – 귀하의 이름(기본 자리 표시자 텍스트로 사용됨)
  • Akismet – 검사되지 않은
  • 아이디 속성(CSS) – cf7-당신의 이름
  • 클래스 속성(CSS) – cf7-당신의 이름

이러한 설정은 아래의 단축 코드를 생성합니다.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

지금은 태그 삽입 버튼을 눌러 연락처 양식 템플릿에 양식 태그를 추가합니다. 나중에 양식을 구성하기 위해 더 많은 HTML 태그를 추가할 것입니다.

"이메일" 양식 태그

다음으로 연락처 양식이 이메일 주소를 수집할 수 있도록 하는 이메일 양식 태그를 생성합니다.

문의 양식 7의 "이메일" 양식 태그.
문의 양식 7의 "이메일" 양식 태그.

"이메일" 양식 태그에 대해 아래 설정을 구성했습니다.

  • 필드 유형 – 필수 입력란
  • 이름 – 이메일-632(자동 생성됨)
  • 기본값 - 귀하의 이메일
  • Akismet – 선택하지 않음.
  • 아이디 속성(CSS) – 귀하의 이메일
  • 클래스 속성(CSS) – 귀하의 이메일

이러한 설정은 아래의 단축 코드를 생성합니다.

[email* email-632 id:email class:email placeholder "Your Email"]

"URL" 양식 태그

어떤 경우에는 다른 사람의 웹사이트를 수집하기 위해 연락처 양식에 입력 필드를 원할 수 있습니다. 기술적으로 Contact Form 7에서 일반 "텍스트" 양식 태그를 사용할 수 있지만 대신 "URL" 양식 태그를 사용하는 것이 좋습니다. "URL" 형식 태그는 형식이 올바른지 확인하기 위해 URL의 유효성을 검사하는 입력 필드를 생성합니다.

문의 양식 7의 "URL" 양식 태그.
문의 양식 7의 "URL" 양식 태그.

"url" 양식 태그의 경우 아래 설정을 구성했습니다.

  • 이름 – url-601(자동 생성됨)
  • 기본값 – 귀하의 웹사이트
  • Akismet – 선택하지 않음.
  • 아이디 속성(CSS) – cf7-귀하의 웹사이트
  • 클래스 속성(CSS) – cf7-귀하의 웹사이트

이러한 설정은 아래의 단축 코드를 생성합니다.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

"전화" 양식 태그

URL과 유사하게 표준 "텍스트" 양식 태그를 사용하여 전화번호를 수집할 수도 있습니다. 그러나 전화번호가 유효한지 확인하려면 대신 "tel" 형식 태그를 사용하는 것이 좋습니다.

문의 양식 7의 "전화" 양식 태그.
문의 양식 7의 "전화" 양식 태그.

"tel" 형식 태그의 경우 아래 설정을 구성했습니다.

  • 이름 – tel-842(자동 생성)
  • 기본값 - 전화 번호
  • 아이디 속성(CSS) – cf7-전화번호
  • 클래스 속성(CSS) – cf7-전화번호

이러한 설정은 아래의 단축 코드를 생성합니다.

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

"날짜" 양식 태그

Contact Form 7의 "날짜" 양식 태그를 사용하면 달력 스타일의 날짜 선택기를 생성할 수 있습니다. 이 "날짜" 입력 필드는 연락처 양식에 약속 날짜를 지정하는 데 유용합니다.

문의 양식 7의 "날짜" 양식 태그.
문의 양식 7의 "날짜" 양식 태그.

"날짜" 양식 태그의 경우 아래 설정을 구성했습니다.

  • 이름 – date-389(자동 생성됨)
  • 기본값 – 약속 날짜
  • 범위 – 우리의 사용자 정의 날짜 범위.
  • 아이디 속성(CSS) – cf7-약속-날짜
  • 클래스 속성(CSS) – cf7-약속-날짜

이러한 설정은 아래의 단축 코드를 생성합니다.

[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]

"텍스트 영역" 양식 태그

"textarea" 양식 태그를 사용하면 방문자가 더 긴 메시지를 제출할 수 있는 여러 줄의 텍스트 상자를 만들 수 있습니다. 텍스트 영역은 메시지 본문을 캡처하는 데 가장 유용합니다.

문의 양식 7의 "텍스트 영역" 양식 태그.
문의 양식 7의 "텍스트 영역" 양식 태그.

"textarea" 양식 태그의 경우 아래 설정을 구성했습니다.

  • 이름 – textarea-795(자동 생성)
  • 기본값 – 귀하의 메시지
  • 아이디 속성(CSS) – cf7-당신의 메시지
  • 클래스 속성(CSS) – cf7-당신의 메시지

이러한 설정은 아래의 단축 코드를 생성합니다.

[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]

"드롭다운 메뉴" 양식 태그

Contact Form 7의 "드롭다운 메뉴" 양식 태그를 사용하면 여러 옵션이 있는 드롭다운 메뉴를 만들 수 있습니다. 드롭다운 메뉴는 방문자가 양식과 함께 제출할 특정 옵션을 선택하도록 하려는 경우에 유용합니다. 예를 들어 WordPress 유지 관리 회사를 운영하는 경우 방문자가 제공하는 서비스 중에서 선택할 수 있는 드롭다운 메뉴를 구성할 수 있습니다.

Contact Form 7의 "드롭다운 메뉴" 양식 태그.
Contact Form 7의 "드롭다운 메뉴" 양식 태그.

"드롭다운 메뉴" 양식 태그에 대해 아래 설정을 구성했습니다.

  • 이름 – menu-24(자동 생성됨)
  • 옵션 – 옵션 1, 옵션 2, 옵션 3, 옵션 4
  • 다중 선택 허용 – 검사
  • 첫 번째 옵션으로 빈 항목 삽입 – 검사
  • 아이디 속성 – cf7 드롭다운 메뉴
  • 클래스 속성 – cf7 드롭다운 메뉴

이러한 설정은 아래의 단축 코드를 생성합니다.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

"확인란" 양식 태그

확인란 양식 태그를 사용하면 HTML 확인란을 만들 수 있습니다. 드롭다운 메뉴와 마찬가지로 확인란을 사용하여 미리 정의된 옵션을 선택할 수도 있습니다. 문의 양식의 특성에 따라 드롭다운 메뉴보다 확인란이 더 잘 작동할 수 있습니다. 예를 들어 선택할 수 있는 옵션이 적은 경우 확인란을 선택하면 선택하는 데 필요한 클릭 수가 줄어듭니다. 반면에 연락처 양식에 많은 옵션이 있는 경우 드롭다운 메뉴가 세로 공간을 덜 차지하기 때문에 더 잘 작동할 수 있습니다.

문의 양식 7의 "확인란" 양식 태그.
문의 양식 7의 "확인란" 양식 태그.

"checkbox" 양식 태그에 대해 아래 설정을 구성했습니다.

  • 이름 – 확인란-948(자동 생성됨)
  • 옵션 – 옵션 1, 옵션 2, 옵션 3
  • 레이블 요소로 각 항목 포장 – 검사
  • 아이디 속성 – cf7-체크박스
  • 클래스 속성 – cf7-체크박스

이러한 설정은 아래의 단축 코드를 생성합니다.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

"라디오 버튼" 양식 태그

"라디오 버튼" 형식 태그를 사용하면 여러 옵션이 있는 라디오 버튼을 만들 수 있습니다. 확인란 및 드롭다운 메뉴와 달리 라디오 버튼을 사용하면 단일 옵션만 선택할 수 있습니다.

Contact Form 7의 "라디오 버튼" 양식 태그.
Contact Form 7의 "라디오 버튼" 양식 태그.

"라디오 버튼" 양식 태그의 경우 아래 설정을 구성했습니다.

  • 이름 – radio-708(자동 생성)
  • 옵션 – 옵션 1, 옵션 2, 옵션 3
  • 레이블 요소로 각 항목 포장 – 검사
  • 아이디 속성 – cf7-라디오
  • 클래스 속성 – cf7-라디오

이러한 설정은 아래의 단축 코드를 생성합니다.

[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]

"수락" 양식 태그

Contact Form 7의 "acceptance" 양식 태그는 이용 약관에 동의하기 위한 단일 확인란을 생성하는 데 사용할 수 있습니다. 수락 양식 태그 설정을 사용하여 표시할 메시지를 지정할 수 있습니다.

문의 양식 7의 "수락" 양식 태그.
문의 양식 7의 "수락" 양식 태그.

"acceptance" 양식 태그에 대해 아래 설정을 구성했습니다.

  • 이름 – 수락-545(자동 생성됨)
  • 상태 - 약관에 동의하려면 이 확인란을 선택합니다.
  • 아이디 속성 – cf7-수락
  • 클래스 속성 – cf7-수락

이러한 설정은 아래의 단축 코드를 생성합니다.

[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]

"퀴즈" 양식 태그

"퀴즈" 양식 태그를 사용하여 연락처 양식에 기본 질문 및 답변 퀴즈를 만들 수 있습니다. 퀴즈 질문을 만들려면 다음 형식을 사용하여 질문과 답변을 분리하십시오 – 질문|답변. 아래 스크린샷에서 우리의 질문은 "WordPress가 출시된 연도는 무엇입니까?"이고 대답("|" 문자로 구분)은 2003입니다.

문의 양식 7의 "퀴즈" 양식 태그.
문의 양식 7의 "퀴즈" 양식 태그.

"퀴즈" 양식 태그의 경우 아래 설정을 구성했습니다.

  • 이름 – 퀴즈-461(자동 생성)
  • 상태 - 약관에 동의하려면 이 확인란을 선택합니다.
  • 아이디 속성 – cf7-퀴즈
  • 클래스 속성 – cf7-퀴즈

이러한 설정은 아래의 단축 코드를 생성합니다.

[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]

"파일" 양식 태그

Contact Form 7의 "파일" 양식 태그를 사용하면 연락처 양식에 파일 업로드 기능을 추가할 수 있습니다. 이것은 방문자가 양식과 함께 제출할 이미지 또는 PDF 파일을 업로드할 수 있기를 원하는 상황에 유용합니다. 예를 들어, 게스트 제출물을 게시하는 사진 갤러리가 있는 사진 블로그를 운영하는 경우 사람들이 이미지를 업로드할 수 있도록 파일 업로드 기능을 추가할 수 있습니다.

양식 태그 설정에서 다양한 설정을 지정하여 양식을 보호할 수 있습니다. 악의적인 사용자가 대용량 파일을 업로드하지 못하도록 항상 파일 크기 제한을 설정하는 것이 좋습니다. 마찬가지로 "허용되는 파일 형식"을 지정하면 원하는 파일 형식으로 양식을 잠그는 데 도움이 됩니다. 사진 블로그 예를 염두에 두고 파일 크기를 1MB(1024KB)로 제한하고 허용되는 파일 형식을 JPG 및 PNG와 같은 알려진 이미지 형식으로 제한할 수 있습니다.

문의 양식 7의 "파일" 양식 태그.
문의 양식 7의 "파일" 양식 태그.

"file" 형식 태그의 경우 아래 설정을 구성했습니다.

  • 이름 – file-658(자동 생성됨)
  • 파일 크기 제한 – 1024kb
  • 허용되는 파일 형식 – jpg|png|gif
  • 아이디 속성 – cf7 파일
  • 클래스 속성 – cf7 파일

이러한 설정은 아래의 단축 코드를 생성합니다.

[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]

"제출" 양식 태그

마지막으로 문의 양식 7의 "제출" 양식 태그입니다. 짐작할 수 있듯이 이 양식 태그를 사용하면 문의 양식에 대한 제출 버튼을 생성할 수 있습니다.

문의 양식 7의 "제출" 양식 태그.
문의 양식 7의 "제출" 양식 태그.

"제출" 양식 태그에 대해 아래 설정을 구성했습니다.

  • 라벨 - 제출하다
  • 아이디 속성 – cf7-제출
  • 클래스 속성 – cf7-제출

이러한 설정은 아래의 단축 코드를 생성합니다.

[submit id:cf7-submit class:cf7-submit "Submit"]

양식 태그를 사용하여 연락처 양식을 구성하는 방법

이제 모든 양식 태그가 설정되었으므로 연락처 양식을 만들 차례입니다. 이 시점에서 문의 양식 설정은 아래 스크린샷과 같아야 합니다. 위에서 만든 모든 양식 태그를 기록해 둡니다. 양식 태그가 있으면 다음을 사용할 수 있습니다. [contact-form-7] WordPress 게시물 또는 페이지에 양식을 포함하는 단축 코드.

contact-form-7 단축 코드를 사용하여 문의 양식을 포함합니다.
contact-form-7 단축 코드를 사용하여 문의 양식을 포함합니다.

WordPress 편집기에서 단축 코드를 빈 블록에 붙여넣습니다.

게시물 또는 페이지에 Contact Form 7 단축 코드를 추가합니다.
게시물 또는 페이지에 Contact Form 7 단축 코드를 추가합니다.

WordPress Classic Editor를 사용하는 경우 콘텐츠 편집기의 아무 곳에나 단축 코드를 붙여넣을 수 있습니다.

WordPress Classic Editor와 함께 Contact Form 7을 사용하십시오.
WordPress Classic Editor와 함께 Contact Form 7을 사용하십시오.

이제 Contact Form 7 단축 코드를 추가한 페이지에서 연락처 양식을 볼 수 있습니다. 위에서 언급한 설정에 대한 문의 양식은 다음과 같습니다. 보시다시피 Contact Form 7은 자동으로 양식 태그를 WordPress 테마에 포함된 기본 CSS 스타일로 렌더링되는 유효한 HTML로 변환합니다.

문의 양식 7로 만든 문의 양식입니다.
문의 양식 7로 만든 문의 양식입니다.

현재 상태의 문의 양식은 좋은 출발점이지만 한 가지 핵심 기능이 부족합니다. "텍스트", "이메일" 및 "URL"과 같은 양식 태그는 자리 표시자를 지원하지만 "체크박스" 및 "라디오 버튼"과 같은 다른 요소는 지원하지 않습니다. 적절한 레이블이 없으면 확인란과 라디오 버튼은 컨텍스트가 없기 때문에 방문자에게별로 유용하지 않습니다. 운 좋게도 Contact Form 7에 레이블을 추가하는 것은 매우 쉽습니다!

문의 양식 7에 양식 태그 레이블을 추가하는 방법

Contact Form 7 양식 태그에 레이블을 추가하는 방법에는 두 가지가 있습니다. 아래 form 태그의 경우 form 태그를 다음으로 간단히 감쌀 수 있습니다. 꼬리표.

  • 본문
  • 이메일
  • URL
  • 전화
  • 번호
  • 날짜
  • 텍스트 영역
  • 수락
  • 놀리다
  • 입양 부모로서의 귀하의 적합성을 결정하기 위해 미국 이민국에

아래 "텍스트" 양식 태그의 예를 살펴보십시오.

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

이 양식 태그에 레이블을 추가하려면 양식 태그를 아래 스니펫으로 교체할 수 있습니다. 개봉 직후 '너의 이름은' 추가 인스턴스 주목 꼬리표.

느린 호스트가 지겹습니까? Behmaster 속도와 성능을 염두에 두고 제작되었습니다. 우리의 계획을 확인하십시오

이 변경 사항이 문의 양식에 표시되는 내용은 다음과 같습니다. 이 경우 새로 생성된 레이블은 자리 표시자와 동일한 용도로 사용됩니다. 그러나 양식 태그 내에 자리 표시자를 지정하지 않으려면 레이블이 특정 입력 상자의 목적을 식별하는 데 도움이 됩니다.

Contact Form 7의 양식 태그에 레이블을 추가합니다.
Contact Form 7의 양식 태그에 레이블을 추가합니다.

다음과 같은 여러 양식 컨트롤을 렌더링하는 양식 태그의 경우 체크박스, 라디오 버튼, 드롭다운 메뉴, 양식 태그를 내부에 래핑 태그로 인해 오류가 발생합니다. 이것은 때문에 발생합니다 태그는 단일 양식 컨트롤에서만 사용해야 합니다. 확인란, 라디오 버튼 및 드롭다운 메뉴 옵션의 특성에는 여러 양식 컨트롤이 포함되므로 기본 레이블 지정 솔루션과 호환되지 않습니다.

체크박스, 라디오 버튼, 드롭다운 메뉴의 경우 use_label_element 단축 코드 내의 매개변수. 아래의 확인란 양식 태그 예를 살펴보십시오. use_label_element 굵게 표시됩니다.

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

한 번 use_label_element 매개변수가 추가되면 연락처 양식 편집기에서 양식 태그 바로 위에 레이블을 추가할 수 있습니다.

Contact Form 7의 확인란, 라디오 버튼 및 드롭다운 메뉴에 레이블을 추가합니다.
Contact Form 7의 확인란, 라디오 버튼 및 드롭다운 메뉴에 레이블을 추가합니다.

완전성을 기하기 위해 연락처 양식의 모든 양식 태그에 레이블을 추가했습니다. 일부 양식 태그에는 이미 자리 표시자가 포함되어 있으므로 프로덕션 사이트에서는 이 작업을 수행할 필요가 없을 것입니다. 그럼에도 불구하고 우리는 레이블이 어떻게 작동하는지 보여주고 싶었습니다.

문의 양식은 다음과 같습니다.

레이블이 있는 문의 양식입니다.
레이블이 있는 문의 양식입니다.

연락처 양식 7에서 메일 설정 구성

이제 문의 양식의 구조를 구성했으므로 문의 양식 7의 이메일 배달 설정을 살펴보겠습니다. 기본 메일 배달 설정은 대부분의 사이트에서 잘 작동하지만 다양한 사이트 또는 사용 사례에 특별한 구성이 필요한 경우를 위한 설정입니다.

메일 배달 설정에 액세스하려면 문의 양식 편집기로 이동하여 "메일" 탭을 선택합니다.

연락처 양식 7의 메일 배달 설정.
연락처 양식 7의 메일 배달 설정.

Contact Form 7의 메일 배달 설정을 사용하면 누군가가 양식을 제출한 후 알림을 생성하고 보내는 데 사용되는 템플릿과 매개변수를 사용자 지정할 수 있습니다. 잘못된 설정을 사용하면 양식 제출에 대한 알림을 받지 못할 수 있습니다. 따라서 문의 양식을 만들고 설정을 변경한 후 양식 전달을 테스트하는 것이 중요합니다.

문의 양식 7을 사용하여 다음 메일 배달 설정을 구성할 수 있습니다.

  • - 알림을 보낼 이메일 주소.
  • 에서 – 알림을 보낼 이메일 주소.
  • 주제 - 알림 이메일의 제목입니다.
  • 추가 헤더 – "답장"과 같은 추가 이메일 헤더를 지정하십시오.
  • 메시지 본문 – 알림 이메일의 본문입니다.
  • 파일 첨부 – 알림 이메일에 포함할 첨부 파일을 지정합니다.

이제 각 설정을 살펴보고 이러한 설정이 Contact Form 7의 메일 배달에 어떤 영향을 미치는지 더 잘 이해할 수 있습니다.

"받는 사람" 필드

"받는 사람" 설정에 대해 실제 이메일 주소를 지정해야 합니다. 기본적으로 Contact Form 7은 WordPress 사용자 계정과 연결된 이메일 주소를 "받는 사람" 설정에 할당합니다. WordPress 이메일 주소가 유효하지 않은 경우 프로필 설정에서 업데이트하고 Contact Form 7에서도 이메일 주소를 변경하십시오.

"시작" 필드

"From" 설정은 다음 형식을 사용해야 합니다. Your Name. 문의 양식 메일 설정에는 다음을 사용하고 있습니다. behmasterlife .

기본적으로 Contact 7은 이 필드를 다음으로 채웁니다. wordpress@your-domain.com. 일부 WordPress 호스트는 잘못된 주소로 보내는 이메일을 차단하므로 이 이메일 주소가 유효한지 확인하는 것이 좋습니다. 이 이메일 주소를 유효하게 만드는 방법에는 여러 가지가 있습니다. wordpress@your-domain.com에 대한 전용 이메일 계정을 설정하거나 이메일 서비스 제공업체에서 포괄 기능을 활성화할 수 있습니다. 이 이메일 주소를 설정할 수 없는 경우 배달 문제를 방지하기 위해 유효한 이메일 주소로 변경하는 것이 좋습니다.

"주제" 필드

"제목" 설정을 사용하여 알림 메일의 제목을 지정할 수 있습니다. 기본적으로 Contact Form 7은 제목을 다음과 같이 설정합니다. Site Name “[your-subject]” – Contact Form 7의 기본 양식 템플릿에 있는 제목 이름.

양식에 "[your-subject]"라는 양식 태그가 없으면 다른 것으로 변경해야 합니다. 예를 들어 방문자의 이름(예: [귀하의 이름])을 캡처하는 양식 태그만 있는 경우 제목을 다음으로 변경할 수 있습니다. You’ve Received a Message from [your-name].

"추가 헤더" 필드

"추가 헤더"에서 회신, 참조 및 숨은 참조와 같은 이메일 헤더를 지정할 수 있습니다. 기본적으로 Contact Form 7은 다음 헤더를 추가합니다. Reply-To: [your-email]. 이 헤더를 사용하면 제출된 연락처 양식에 지정된 이메일 주소에 회신할 수 있습니다.

Contact Form 7의 기본 이메일 양식 태그를 사용하는 경우 기본 회신 헤더는 괜찮습니다. 그렇지 않은 경우 이메일 양식 태그의 이름과 일치하도록 변경해야 합니다. 문의 양식의 경우 이메일 양식 태그의 이름은 "email-632"이므로 회신 양식 태그를 다음으로 변경해야 합니다. Reply-To: [email-632].

"메시지 본문"

다음은 알림 이메일의 본문 내용을 결정하는 "메시지 본문"입니다. Contact Form 7의 기본 템플릿은 [your-name], [your-email], [your-subject] 및 [your-message] 양식 태그를 사용하며 다음과 같습니다.

From: [your-name] 
Subject: [your-subject]
Message Body:
[your-message]
-- 
This e-mail was sent from a contact form on behmasterlife (http://behmasterlife.com)

연락처 양식 템플릿에서 사용하지 않는 경우 이러한 양식 태그를 변경해야 합니다. 우리가 만든 문의 양식은 많은 정보를 수집하므로 다음과 같은 추가 양식 태그를 사용하여 메시지 본문을 설정할 수 있습니다.

Hello Brian, you’ve received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795
Contact Form 7 알림 이메일의 메시지 본문을 사용자 지정합니다.
Contact Form 7 알림 이메일의 메시지 본문을 사용자 지정합니다.

연락처 양식 7 메일 설정 – 첨부 파일

연락처 양식에 파일 업로드가 포함된 경우 알림 이메일에 파일을 포함할 수 있습니다. 문의 양식에는 "[file-658]"이라는 파일 업로드 양식 태그가 있습니다. 따라서 "파일 첨부" 아래에 이 양식 태그를 추가하여 파일이 이메일 알림에 포함되도록 할 수 있습니다.

Contact Form 7 알림 이메일에 첨부 파일을 포함하십시오.
Contact Form 7 알림 이메일에 첨부 파일을 포함하십시오.

연락처 양식 7 메일 배달 문제

Contact Form 7에서 이메일을 보내지 않는 경우 WordPress 개발자에게 도움을 요청하기 전에 확인할 수 있는 몇 가지 사항이 있습니다.

  1. 서버에서 다른 유형의 이메일을 보내고 있는지 확인하십시오. 이를 테스트하기 위해 블로그 게시물에 테스트 댓글을 작성하거나 WordPress 로그인 페이지에서 비밀번호 재설정 요청을 제출하여 다른 이메일 전송 작업을 트리거할 수 있습니다. 이러한 작업 중 하나를 수행한 후 이메일을 받은 경우 문제는 문의 양식 7의 구성과 관련이 있을 수 있습니다. 이메일을 받지 못한 경우 호스트의 지원 팀에 연락하여 이메일 전달에 문제가 있음을 알리십시오.
  2. 연락처 양식의 메일 배달 설정에 있는 "받는 사람" 및 "보낸 사람" 필드가 올바르게 구성되어 있는지 확인하십시오. Contact Form 7이 제대로 작동하려면 두 필드 모두 실제 이메일 주소로 채워야 합니다.

연락처 양식 7 양식 제출 메시지

Contact Form 7을 사용하면 다양한 양식 제출 메시지를 사용자 지정할 수 있습니다. 이러한 메시지는 특정 조건이 충족된 후에 표시됩니다. 예를 들어 방문자가 필수 필드를 채우는 것을 잊어버린 경우 Contact Form 7은 "필드는 필수입니다"라는 메시지를 표시합니다. 대부분의 사용 사례에서 기본 메시지가 제대로 작동해야 합니다. 그러나 메시지를 사용자 정의하려면 문의 양식 편집기에서 "메시지" 탭을 클릭하면 됩니다.

Contact Form 7 상황 메시지를 사용자 정의합니다.
Contact Form 7 상황 메시지를 사용자 정의합니다.

연락처 양식을 보호하는 방법

자동화된 봇이 수년에 걸쳐 더 똑똑해지고 널리 퍼짐에 따라 스팸은 연락처 양식의 주요 문제가 되었습니다. 연락처 양식은 일반적으로 공용 인터넷에 공개되어 있기 때문에 웹 스크레이퍼가 이를 감지하고 이메일 받은 편지함으로 스팸 메시지를 보내는 것은 매우 쉽습니다. 다행히 스팸 발송자를 차단하고 연락처 양식을 보호할 수 있는 다양한 방법이 있습니다.

reCAPTCHA로 연락처 양식 7 보호

인터넷에서 양식을 제출한 적이 있다면 자동화된 봇 동작을 식별하기 위해 Google에서 개발한 기술인 reCAPTCHA에 이미 익숙할 것입니다. 이전 버전의 reCAPTCHA(V2)에서는 사용자가 퍼즐이나 챌린지를 통과해야 했습니다.

최신 버전의 reCAPTCHA(V3)는 사용자의 상호 작용이 필요하지 않습니다. 대신 백그라운드에서 사용자 활동을 투명하게 모니터링하여 사람과 봇 방문자를 구분합니다. Contact Form 7은 reCAPTCHA V3를 지원하므로 방문자에게 더 나은 사용자 경험을 제공하기 때문에 이 최신 버전을 사용하는 것이 좋습니다.

reCAPTCHA를 설정하려면 먼저 API 키를 생성해야 합니다. 이렇게 하려면 Google 계정에 로그인하고 reCAPTCHA 설정 페이지로 이동합니다.

reCAPTCHA 통합을 위한 새 사이트를 등록합니다.
reCAPTCHA 통합을 위한 새 사이트를 등록합니다.

등록 양식을 작성하여 reCAPTCHA를 만드십시오.

  • 라벨 – 선택한 레이블을 지정합니다.
  • reCAPTCHA 유형 – 문의 양식 7은 reCAPTCHA v3을 지원하므로 해당 버전을 선택하십시오.
  • 도메인 – 사이트에서 루트 도메인을 사용하는 경우 www가 없는 도메인 및 www 버전을 추가하십시오. 사이트에서 하위 도메인을 사용하는 경우 하위 도메인을 추가하기만 하면 됩니다.
  • 소유자 – Google 계정과 연결된 이메일 주소는 기본적으로 소유자로 추가됩니다. 필요한 경우 이메일 주소를 추가할 수 있습니다.

모든 옵션을 입력한 후 구독하기. 그런 다음 사이트별 "사이트 키" 및 "비밀 키"가 표시됩니다. 이 키는 Contact Form 7에 추가해야 하므로 안전한 곳에 보관하십시오.

Google reCAPTCHA 사이트 및 비밀 키.
Google reCAPTCHA 사이트 및 비밀 키.

다음으로 WordPress 대시보드 사이드바에서 "연락처"를 클릭하고 통합. reCAPTCHA 옵션을 선택하고 사이트 키와 비밀 키를 해당 필드에 붙여넣습니다. 마지막으로 클릭 저장 (Save Changes) reCAPTCHA 통합을 완료합니다.

문의 양식 7에서 reCAPTCHA를 구성합니다.
문의 양식 7에서 reCAPTCHA를 구성합니다.

문의 양식 7에서 reCAPTCHA를 구성하면 문의 양식 페이지의 오른쪽 하단 모서리에 reCAPTCHA 로고가 표시됩니다. 즉, reCAPTCHA가 활성화되어 스팸 제출로부터 연락처 양식을 보호합니다.

reCAPTCHA V3로 보호되는 WordPress 문의 양식.
reCAPTCHA V3로 보호되는 WordPress 문의 양식.

Cloudflare로 연락처 양식 보호(선택 사항)

Cloudflare를 사용하여 사이트를 보호하는 경우 연락처 양식 페이지에 대한 특수 페이지 규칙을 설정하여 스팸 문의 양식 제출을 줄일 수 있습니다.

Cloudflare로 연락처 양식을 보호하세요.
Cloudflare로 연락처 양식을 보호하세요.

페이지 규칙을 추가하려면 "페이지 규칙" 탭을 클릭하고 다음 설정을 사용하여 연락처 페이지를 보호하십시오.

  • URL이 일치하는 경우 – *your-domain.com/your-contact-page/*
  • 브라우저 무결성 검사 – On
  • 보안 레벨 - 높은

Cloudflare의 "브라우저 무결성 검사" 기능은 HTTP 헤더를 분석합니다. 자동화된 봇 및 스패머가 일반적으로 사용하는 HTTP 헤더를 감지하면 사이트에 대한 요청을 거부합니다. "보안 수준"을 높음으로 설정하면 지난 XNUMX주 동안 악의적인 행동을 보인 모든 방문자에게 문제가 발생합니다.

이러한 설정을 URL 일치 규칙이 있는 연락처 페이지로 제한하면 사이트의 다른 페이지가 이러한 페이지 규칙의 영향을 받지 않습니다. 사이트의 일반 "읽기 전용" 페이지에는 일반적으로 강화된 보안 수준 설정이 필요하지 않으므로 이 구성을 권장합니다.

청중을 읽게 두지 마십시오. 👀 Contact Form 7 플러그인을 통해 독자 및 잠재 고객과 직접 연락하세요 ⬇️이야기하려면 클릭

요약

Contact Form 7은 가장 인기 있는 문의 양식 플러그인이며 그럴만한 이유가 있습니다! 기본 연락처 양식에서 질문 답변 퀴즈, 첨부 파일 및 드롭다운 메뉴를 지원하는 복잡한 양식에 이르기까지 모든 것을 만드는 데 사용할 수 있습니다.

무엇보다도 스패머로부터 연락처 양식을 보호하는 데 도움이 되는 reCAPTCHA 지원이 내장되어 있습니다.

WordPress 사이트에서 Contact Form 7을 사용합니까? 그렇지 않다면 선호하는 선택은 무엇입니까? 아래 의견 섹션에서 알려주십시오!

관련 기사

1 댓글
인라인 피드백
모든 댓글보기
익명
1 달 전

흐발라! 스파실리 스테미!! 😊

맨 위로 가기 버튼