Contact Form 7 플러그인은 사이트에 대한 피드백을 정리하는 데 도움이 됩니다.

공식 WordPress 웹 사이트에서 Contact Form 7 플러그인을 다운로드할 수 있습니다.

공식 WordPress 웹 사이트에서 really Simple CAPTCHA 플러그인을 다운로드할 수 있습니다.

"" 강의에서 이 플러그인을 설치하고 연결하는 방법을 다루었습니다. 이제 다음을 다룰 것입니다. 추가 기능플러그인 문의 양식 7. 이 양식은 모니터, 태블릿, 휴대폰 및 노트북에서 올바르게 작동합니다. 그건 그렇고, 노트북이 고장 나면 HP 노트북을 수리하는 서비스가 있습니다.

플러그인을 다운로드하고 활성화한 후 다음으로 이동하여 플러그인 설정으로 이동합니다. 새 섹션제어판 "연락처".

양식 이름 위에 마우스를 놓고 "편집"을 선택하십시오.

양식 매개변수를 변경하기 위한 창이 열립니다.

사이트는 하나가 아닌 여러 개의 양식(메시지를 보내는 양식, 전화를 주문하는 양식, 개인정보가 있는 양식)을 사용할 수 있으므로 어떤 양식이 무엇을 담당하는지 혼란이 없도록 해야 합니다. 폼의 이름을 변경합니다. 이렇게 하려면 양식 1 의 이름을 클릭하십시오.

블록 번호 2는 양식의 페이지에 표시될 내용을 표시합니다. 먼저 이 필드의 코드 다음에 필드 이름인 텍스트가 옵니다. 텍스트를 원하는 대로 변경할 수 있습니다.

양식에 새 필드를 추가하려면 드롭다운 목록 3번 - "태그 생성"을 클릭하고 드롭다운 목록에서 필요한 요소를 선택합니다.

  • 텍스트 필드
  • 이메일
  • 전화 번호
  • 번호(스핀박스)
  • 숫자(슬라이더)
  • 텍스트 필드
  • 드롭 다운 메뉴
  • 체크박스
  • 라디오 버튼
  • 수락
  • 의문
  • 보안문자
  • 파일 보내기
  • 제출 버튼

기본적으로 팁과 양식 필드는 다음과 같이 정렬됩니다. 상단에는 힌트가, 하단에는 요소가 있습니다. 설명과 요소를 한 줄에 배치하려면 텍스트 뒤에 있는 태그를 제거하십시오.

. 설명과 요소가 있는 전체 블록은 한 줄에 있어야 하며 태그 안에 있어야 합니다.

텍스트 필드

드롭다운 목록에서 "텍스트 필드" 요소를 선택합니다.

추가하는 기능이 필요한 경우 확인란 1을 선택하고 설명에 작성하는 것을 잊지 마십시오.

입력 필드에 추가할 수 있습니다. 추가 정보양식을 더 쉽게 작성할 수 있습니다. 확인란 2 "자리 표시자로 사용하시겠습니까?" 옆에 있는 필드에 힌트를 입력합니다. 양식에서 이 필드를 채우면 툴팁 텍스트가 사라집니다. 그런 다음 플러그인 프롬프트를 따릅니다. 결과는 완성된 형식의 다음과 같은 필드입니다.

문자 템플릿에 코드를 삽입해야 합니다. 그렇지 않으면 이 필드의 데이터가 메일로 전송되지 않습니다! 이것은 텍스트 필드뿐만 아니라 다른 모든 요소에도 적용됩니다.

이메일

보낸 사람의 사서함 주소를 양식에 전달하는 데 사용됩니다.

URL

양식에 웹사이트 주소를 추가할 수 있습니다.

전화 번호

이 필드에는 숫자만 입력할 수 있습니다.

번호(스핀박스)

제품 등의 수량을 설정할 수 있는 필드입니다. 수량은 위/아래 화살표로 설정됩니다.

날짜

날짜 선택 옵션이 있는 양식에 달력을 삽입합니다. 예를 들어, 호텔의 객실을 예약하는 데 사용됩니다. 도착일, 출발일.

텍스트 필드

네, 놀라지 마세요 🙂 또 다른 텍스트 필드입니다. 이번에는 이 필드가 커서 많은 텍스트를 작성할 수 있습니다. 예를 들어 리뷰, 댓글.

드롭 다운 메뉴

무언가에 대한 많은 옵션이 있고 도시, 거리, 상품 목록과 같은 큰 목록에서 일부 항목을 선택해야 할 때.

목록은 선택 필드에 배치되어야 하며 각 항목은 새 줄에 있어야 합니다.

체크박스

체크박스 또는 개발자 전문용어로 체크박스는 체크박스를 생성하는 요소입니다. 이 필드에는 선택 여부의 두 가지 상태가 있습니다. 다중 선택이 가능합니다. "확인란을 상호 배타적으로 만드시겠습니까?" 그러면 하나의 옵션만 선택할 수 있습니다.

라디오 버튼

스위치(속어. 라디오 버튼)는 제안된 여러 옵션 중에서 하나의 옵션을 선택해야 할 때 사용됩니다. "레이블을 먼저 배치한 다음 확인란을 선택하시겠습니까?" 확인란을 선택합니다. 레이블 및 선택 필드의 위치는 기본적으로 먼저 선택 항목을 변경한 다음 레이블을 변경합니다.

수락

무언가의 확인. 위에서 설명한 조건에 동의한다고 가정합니다.

의문

이것은 가장 기본적인 스팸에 대한 첫 번째 방어선입니다. 설정에서 일종의 질문을 작성하고 숫자를 사용할 수 있으며 문자 또는 둘 다를 사용할 수 있으며 정답을 표시할 수 있습니다. 양식 작성 시 답변이 정확하면 양식이 제출됩니다. 녹색은 이 공식의 어느 부분이 답변 입력 필드 앞의 사이트에 표시되는지를 나타내고, 빨간색은 답변을 나타냅니다. 수식의 정답은 기호 | (세로 막대)

양식에 스팸 방지 기능을 추가합니다.

이 기능이 작동하려면 다른 플러그인이 필요합니다. 플러그인을 다운로드, 설치, 활성화합니다.

설정 변경은 불가능하며, 보내기 버튼 앞 2줄은 복사 붙여넣기 하시면 됩니다.

파일 보내기

메시지 보내기 양식에 파일을 첨부할 수 있습니다. 설정할 수 있는 설정에서 최대 크기바이트 단위 및 업로드에 허용되는 형식(예: .jpg .tiff .doc)

제출 버튼

양식 제출. "바로 가기"섹션의 설정에서 버튼 이름을 지정할 수 있습니다 (보내기, 회신, 보내기 🙂)

연락처 양식 7의 모양 사용자 지정

플러그인에는 업데이트 속성이 있으므로 변경 모습양식은 사이트 테마 스타일 파일 style.css에서 생성됩니다.

코드는 양식, 해당 필드 및 기타 요소를 표시하는 역할을 합니다.

Wpcf7 ( background-color:#ddd; ) /*형식 배경색 */ .wpcf7 input, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16px, 라인 높이: 20px, 테두리: 1px 솔리드 #C7C7C7, box-shadow: 인셋 2px 2px 8px #F9F9F9, -webkit-transition: 모든 0.2초 용이성, -moz-transition: 모두 0.2초 용이성, -o-전환 : 모든 0.2초 용이함, 전환: 모두 0.2초 용이함; ) .wpcf7 .wpcf7-list-item( 패딩 왼쪽: 0; 여백-왼쪽: 0; 여백-오른쪽: 25px; ) .wpcf7 .wpcf7-list-item input( border: 없음; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 입력: hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( background: #FDFDFD; outline: none; )

여기에 무엇이 있습니까?

.wpcf7 입력, .wpcf7 텍스트 영역 - 입력 필드 스타일( 텍스트 필드)

  1. - 내용에서 요소의 테두리까지 들여쓰기를 설정합니다. 여기 - 필드에 입력된 텍스트에서 필드 테두리까지의 들여쓰기입니다. 값은 픽셀 단위로 Xpx로 설정되며, 여기서 X는 픽셀 수입니다. 예: 패딩: 5px 3px 6px 8px;
  2. 색깔- 텍스트 색상.
  3. 글꼴 패밀리- 입력 필드 글꼴.
  4. 글꼴 크기- 글꼴 크기
  5. 줄 높이- 라인 높이
  6. 국경- 입력 필드 주변의 프레임
  7. 상자 그림자블록 그림자. 삽입그림자가 내부에 있음을 나타냅니다. 외부 그림자를 원하면 이 값을 생략하십시오. 2px 2px의 두 번째 값과 세 번째 값은 각각 그림자의 가로 및 세로 혼합을 나타냅니다. 네 번째 값인 8px는 그림자의 흐림 반경을 지정합니다. 다섯 번째 - #F9F9F9 - 그림자의 색상입니다.

문의 양식 7 버튼 사용자 지정

.buttons_form( 패딩: 0px; 높이: 30px; 너비: 150px !중요; 테두리: 없음 !중요; 커서: 포인터; 색상: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5em; 테두리 반경: .5em; 색상: #faddde; 테두리: 단색 1px #980c10; 배경: #d81b21; 배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, from(#ed1c24), to(# aa1317)); 배경: -moz-linear-gradient(top, #ed1c24, #aa1317); 필터: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); )

문의 양식 7 알림 스타일

오류 보고 또는 성공적인 제출에 대한 책임이 있습니다.

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; 경계 반경: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( -반경: 10px; 경계 반경: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( 경계: 없음; 배경색:# 349622; 여백:0; 패딩:20px; -moz-border-radius: 10px; border-radius: 10px; 색상: 흰색; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color :#349622; 패딩:5px; 패딩-왼쪽: 5px; 패딩-오른쪽: 5px; 테두리 반경:10px; 너비: 290px; 색상: 흰색; /* 그림자 효과 */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3), box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )

이제 편의를 위해 주석이 있는 전체 코드:

Wpcf7 ( background-color:#ddd; ) /*형식 배경색 */ .wpcf7 input, .wpcf7 textarea( /* 코드의 이 부분은 입력 필드, 텍스트 영역의 스타일을 담당합니다. */ padding:5px; /* 필드 요소에서 내용 이전에 패딩을 설정합니다. 예를 들어 10px */ color:#1D1D1D; /* 입력 필드의 텍스트 색상 */ font-family:Arial, Helvetica, sans-serif; /* 텍스트 글꼴 in 입력 필드 */ font -size:16px; /* 입력 필드의 텍스트 크기 */ line-height: 20px; /* 입력 필드의 라인 높이 */ border: 1px solid #C7C7C7; /* 필드 주위의 테두리. 첫 번째 값은 너비(픽셀), 두 번째 - 상자 스타일, 세 번째 - 색상 */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Box shadow 2px - x offset, 2px - y offset, 8px - shadow blur 반경, #F9F9F9 - 그림자 색상 */ -webkit-transition: 모든 0.2초 용이함, -moz-transition: 모두 0.2초 용이함, -o-전환: 모두 0.2초 용이함, 전환: 모두 0.2초 용이함, ) .wpcf7 . wpcf7-list- item( 왼쪽 여백: 0; 왼쪽 여백: 0; 오른쪽 여백: 25px; ) .w pcf7 .wpcf7-목록 항목 입력( 테두리: 없음; 패딩 왼쪽: 0; 여백-왼쪽: 0; ) .wpcf7 선택(개요: 없음; 글꼴 크기:16px; 글꼴 패밀리:Arial, Helvetica, sans-serif; ) .wpcf7 입력:hover, .wpcf7 입력:포커스, .wpcf7 입력: 활성, .wpcf7 텍스트 영역: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* 이 부분은 마우스 포인터로 입력 필드를 가리킬 때 입력 필드의 스타일을 담당합니다. */ background: #FDFDFD; /* 입력 필드의 배경 마우스 포인터로 마우스를 가져가면 */ outline : 없음; /* 텍스트 입력 필드의 외부 테두리 */ ) o-transition: 0; transition: 0; border: 없음; /* 버튼 주위의 테두리 */ position: relative; color: #fff; /* 텍스트 색상 */ text-transform: uppercase; /* 텍스트 변환(대문자는 버튼의 텍스트가 표시됨을 의미합니다. 대문자) */ /* 버튼의 모서리를 둥글게 만듭니다. 다음 세 속성의 값은 동일해야 합니다. 다른 브라우저*/ -webkit-border-radius: 6px; /* Chrome의 둥근 모서리 */ -moz-border-radius: 6px; /* Mozilla FireFox의 둥근 모서리 */ border-radius: 6px; /* 모바일을 포함한 다른 모든 브라우저를 위한 둥근 모서리 */ font-size: 14px; /* 버튼 텍스트 크기 */ font-weight: bold; /* 텍스트 스타일(볼드체는 볼드체를 의미) */ padding-top: 11px; /* 요소의 가장자리에서 내용까지의 위쪽 패딩 */ padding-bottom: 10px; /* 요소의 맨 아래에서 내용까지 패딩 */ padding-left: 35px; /* 내용에 대한 요소의 가장자리 왼쪽에 패딩 */ padding-right: 35px; /* 요소의 가장자리에서 내용까지 오른쪽으로 채우기 */ /* 그라데이션 배경 - 그라디언트 버튼 배경 */ background-color: #000000; /* 브라우저에서 그래디언트가 지원되지 않는 경우 버튼의 배경색 */ /* 다음 속성에서 색상은 브라우저마다 다르기 때문에 동일하게 지정해야 합니다. 첫 번째 속성을 살펴보겠습니다. from(#676767), to(#3B3B3B) 부분은 그라디언트를 표시해야 함을 의미합니다. 여기서 color #676767)에서 color #3B3B3B */ background: -webkit-gradient(linear, left top, 왼쪽 하단, from( #676767), to(#3B3B3B)); 배경: -moz-linear-gradient(상단, #349622, #246416); 필터: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - 버튼의 그림자. RGBA에 지정된 그림자 색상 */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); 상자 그림자: 0 2px 5px rgba(0,0,0,0.3); ) /* On hover - 마우스 포인터를 가리킬 때 버튼의 스타일을 지정합니다. 모든 것이 이전 블록과 거의 동일합니다. */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(linear, left top , 왼쪽 하단, from(#246416), to(#349622)), 배경: -moz-linear-gradient(top, #246416, #349622), 필터: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416 ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* 클릭 시 - 버튼 스타일을 클릭하면 거의 이전 블록과 동일 */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* 클릭 시 버튼 텍스트 색상 */ background-color: #000000; background : -webkit-gradient( 선형, 왼쪽 상단, 왼쪽 하단, from(#FF0000), to(#246416)), 배경: -moz-linear-gradient(top, #FF0000, #246416), 필터: progid:DXImageTransform .Microsoft.gradient(startColorstr ="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: 없음; -moz-box-shadow: 없음; 상자 그림자: 없음 ) /* CF7 메시지 - 성공적인 전송, 오류 등에 대한 메시지 스타일 */ .wpcf7 .wpcf7-validation-errors( /* 유효성 검사 오류에 대한 메시지 스타일 */ border:none; /* 메시지 블록 테두리 */ background-color:#246416; /* 배경 */ color:#fff; /* 텍스트 색상 */ margin:0; /* 외부 패딩 */ padding:20px; /* 내부 패딩 */ /* 크로스 브라우저 모서리 라운딩 - 다음 3가지 속성 */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* 성공 메시지 스타일 */ border:none; /* 메시지 블록 테두리 */ background-color:#7ad33f; / * Background */ margin:0; /* 외부 패딩 */ padding:20px; /* 내부 패딩 */ /* 크로스 브라우저 모서리 라운딩 - 다음 3가지 속성 */ -webkit-border-radius: 10px; -moz- 경계 반경: 10px; 경계 반경: 10px; ).wpcf7 .wpcf7-mail-sent-ng( 경계:없음; 배경 색상:#349622; 여백:0; 패딩:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; 색상: 흰색; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; backgrou nd-색상: #349622; 패딩:5px; 패딩 왼쪽: 5px 패딩 오른쪽: 5px; 테두리 반경: 10px; 너비: 290px 색상: 흰색; /* 그림자 그리기 */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 삼); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); 상자 그림자: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( float: left; ) .wpcf7-form .mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form .clear( clear: 둘 다;)

문의 양식은 대부분의 사이트에서 필수적인 속성입니다. 이것이 WordPress 디렉토리에 많은 문의 양식 플러그인이 있는 이유입니다. 가장 인기 있는 것 중 하나는 Contact Form 7입니다. 플러그인을 사용하면 모든 종류의 양식을 만들 수 있습니다. 매우 유연하고 쉽게 설정할 수 있습니다. 수년 동안 개발되어 왔으며 많은 개발 사항이 포함되어 있습니다.

연락처 양식 만들기 및 표시

관리자에서 양식 만들기

플러그인을 설치하면 "Contact Form 7" 메뉴 항목이 나타나 양식을 만들고 삭제할 수 있습니다.

플러그인이 활성화되면 그림의 양식이 자동으로 생성됩니다.

우리는 기본 양식을 사용합니다. 이를 위해 "연락처" 페이지를 만들고 거기에 양식의 단축 코드를 삽입합니다.

사이트 전면

이제 기사를 저장하고 양식이 어떻게 생겼는지 살펴보겠습니다(Twenty Sixteen 테마 사용).

그림은 보낸 편지 이후의 양식을 보여줍니다(양식 하단의 공지로 표시됨).

양식 사용자 정의(복잡한 양식 작성)

위의 예는 기성품의 매우 간단한 문의 양식을 삽입하는 방법을 보여줍니다. 이제 양식을 더 어렵게 만드는 방법을 살펴보겠습니다. 이를 위해 관리자 패널, 양식 관리자로 돌아가 기본 양식 편집으로 이동합니다.

상단 필드 - 양식 이름(관리자 패널에서만 볼 수 있음)에 "사이트에 대한 피드백", "취업 신청서", "양식 피드백" 등.

제목 아래에는 단축 코드가 있습니다. 양식을 표시하기 위해 레코드에서 사용합니다.

그리고 아래에는 4개의 탭이 있습니다.

  1. 양식 템플릿
  2. 편지
  3. 추가 세팅

각 탭을 개별적으로 고려해 보겠습니다.

양식 템플릿

이 탭에서 양식의 필드와 모양을 사용자 정의할 수 있습니다. 작업 공간은 WP HTML 편집기입니다. 일반적인 버튼 대신 다른 양식 필드를 삽입하기 위한 버튼만 표시됩니다.

양식 레이아웃

레이아웃에는 html 태그와 플러그인 단축 코드를 사용할 수 있습니다. 단축 코드는 양식 필드를 추가하고 html 태그를 사용하면 임의의 HTML 구조를 만들 수 있습니다. 예를 들어 기본 양식은 다음과 같습니다.

게시물에 표시되면 다음 HTML로 바뀝니다.

단축 코드 구문

"텍스트" 버튼을 클릭합시다. 텍스트 필드의 속성을 지정할 수 있는 창이 열립니다. "태그 삽입"을 지정하고 클릭합니다.

태그는 나중에 html 코드가 있는 텍스트 필드로 변환됩니다.

단축 코드 생성자를 사용하여 단축 코드를 편리하게 생성할 수 있습니다.

그러나 생성자는 단축 코드를 변경하는 것을 허용하지 않습니다(여기서만 단축 코드를 생성할 수 있음). 단축 코드를 변경하는 방법에는 두 가지가 있습니다.

  1. 생성자를 사용하여 삭제하고 새로 만듭니다.
  2. 구문을 연구하고 필드 단축 코드를 수동으로 수정하십시오.

디자이너와 함께, 당신은 스스로 그것을 알아낼 것입니다.

여기서 우리는 단축 코드의 구문을 분석할 것입니다.


예를 들어, 추가 옵션이 있는 텍스트 필드 태그를 고려하십시오.

텍스트 (필수의)필드 유형: 텍스트, 선택, 비밀번호, 숫자 등 (이 경우 텍스트 필드). 태그가 변환될 양식 요소를 결정합니다. 즉, 어떤 종류의 데이터를 받아들일 것인지를 의미합니다. * 별표는 필드를 필수 항목으로 만듭니다(양식은 제출되지 않으며 필드를 완료해야 한다는 알림이 표시됩니다). 고객 이름 (필수의)필드의 이름은 입력에서 name 속성으로 사용되며, 보낸 편지의 템플릿을 구성할 때도 사용됩니다. id:my-id 값이 my-id인 입력의 id 속성입니다. 장식용으로 사용됩니다. 클래스:내 클래스 클래스 속성값이 my-class인 입력에서. 장식용으로 사용됩니다. 자리 표시자 "(!LANG:이름 입력" Использовать текст "Введите имя" как placeholder. !}

태그 속성의 순서를 따르십시오. 먼저 필드 유형이 오고, 그 다음에는 이름이 오고, 그 다음에는 추가 옵션이 나옵니다.

필드 유형

  • 텍스트 필드: text , email , tel , url , textarea
  • 숫자 필드: 숫자 , 범위
  • 날짜 필드: 날짜
  • 체크박스, 라디오, 목록: 체크박스 , 라디오 , 선택
  • 파일 업로드 필드: 파일
  • 보안 문자: 보안 문자 및 보안 문자
  • 설문조사: 퀴즈
  • "수락" 필드: 수락
  • 제출 버튼: 제출
  • 사용자 정의 필드 유형

편지 템플릿

두 번째 탭에서는 보낸 편지의 템플릿(레이아웃)과 속성을 미세 조정할 수 있습니다. 이 탭의 필드에서 특수 양식 필드 태그를 사용할 수 있습니다. 이렇게 하면 양식에 지정된 데이터를 편지로 보낼 수 있습니다.

태그는 양식 템플릿의 필드 이름으로 구성됩니다. 예를 들어: 라는 텍스트 필드를 만들었습니다. 이제 이메일 템플릿에서 태그를 사용할 수 있습니다. 문자에서 이 태그 대신 사용자가 입력한 필드 값(이름)이 대체됩니다.

이메일 헤더:

    누구에게 - 이메일 상자이메일을 보낼 곳. 쉼표로 구분하여 원하는 만큼 상자를 지정할 수 있습니다.

    보낸 사람 - 편지를 보낸 이름 및 전자 메일. 일반적으로 서버 메일은 여기에 표시됩니다(예: [이메일 보호됨]).

    모든 메일을 지정할 수 있지만 메일 도메인이 사이트 도메인과 다른 경우 양식이 지정되지 않습니다. 테스트 될 것입니다편지는 계속 보내지지만 이 매개변수에서 "맹세"합니다.

    제목 - 이메일의 제목입니다. 데이터가 어떤 형식에서 전송되었는지 분명합니다. 예를 들어 편지의 제목은 "현장 오류", "콜백 주문" 등입니다. 제목을 선택하면 받은 편지를 보다 쉽게 ​​작업할 수 있습니다.

  • 추가 헤더 - 답장: 기본적으로 여기에 작성됩니다. 회신 헤더는 이 이메일에 대해 "회신" 버튼을 클릭하여 응답할 수 있음 메일 프로그램, 그리고 form 태그는 템플릿의 필드 이름입니다. 이 태그 대신 사용자가 지정한 이메일이 삽입됩니다. 답장과 같은 내용이 표시됩니다. [이메일 보호됨].
편지 본문

이것은 이 탭의 다음으로 중요한 부분입니다. 다음은 편지의 내용입니다. 텍스트에서는 동일한 양식 태그(양식 템플릿의 필드 이름)를 모두 사용합니다.

기본 문자를 분석해 보겠습니다.

에서:<>제목: 메시지: -- 연락처 양식 7 플러그인 탐색(http://test-wp.ru) 사이트에서 보냈습니다.

사용자가 작성한 4개의 필드가 있습니다. 이메일을 보낸 후 태그는 값으로 바뀌고 다음과 같은 이메일을 받게 됩니다.

보낸 사람: 드미트리 제목: 문의 양식 7에 대한 질문 메시지: 안녕하세요! Contact Form 7 플러그인에 대해 질문이 있는데 어떻게 설정하나요? -- Exploring Contact Form 7 Plugin (http://test-wp.ru) 사이트에서 전송

이메일 본문의 선택적 필드

사용자가 필드를 채우지 않고 문자의 본문에 사용하면 문자의 본문이 불완전합니다. 예를 들어, 본문에는 Man from the city라고 표시되어 있지만 사용자는 필드를 채우지 않았습니다. 즉, 편지에서 Man from the city를 받게 됩니다. 편지에서 이러한 행은 불필요합니다. 이메일에서 이 줄을 제거하려면 "빈 메시지 태그가 있는 줄의 출력 제외" 확인란을 선택합니다. 이것은 필드 텍스트와 단축 코드가 같은 줄에 있을 때만 작동합니다.

"문자의 HTML 형식 사용" 옵션. 이메일 본문에 HTML 태그를 사용할 수 있습니다. 이 경우 제한된 목록을 사용할 수 있습니다. HTML 태그모두가 아니기 때문에 메일 클라이언트또는 서비스가 복잡한 HTML 마크업을 올바르게 처리할 수 있습니다. 다음을 사용할 수 있습니다. 글머리 기호 목록, 대담함, 단락 등. 자세한 내용은 웹을 검색하십시오.

Contact Form 7을 사용하면 두 개의 주소로 편지를 보낼 수 있으며 각 편지의 설정이 다릅니다. 이것은 사이트 관리자에게 이메일을 보내야 할 때 유용할 수 있습니다. 완전한 정보주문 데이터만 포함하는 관리자에 대한 복제본입니다.

양식 제출 알림

이 탭에서는 주어진 상황에서 양식이 표시하는 메시지를 편집할 수 있습니다.

편지 템플릿 태그는 이 필드에서 작동하지 않습니다.

추가 세팅

이 탭은 고급 사용자를 위한 것이며 JS 코드를 사용하여 양식의 가능성을 확장할 수 있습니다. 예를 들어 분석을 위해 이벤트를 중단합니다.

이 기능의 사용에 대해서는 별도의 기사에서 설명하겠습니다.

모든 사이트 소유자는 사용자로부터 메시지를 보내고 메일로 받기 위한 연락처 양식을 갖고 싶어합니다. 이것은 소위 피드백 양식입니다. 즉, 방문자는 우편함을 열지 않고 사이트에서 직접 웹마스터에게 편지를 보낼 수 있습니다. 이 기능을 구현하는 최고의 플러그인 Contact Form 7은 이메일을 보내지 않습니다. 내 기사는 올바른 설명 Contact Form 7 플러그인 구성모든 것이 올바르게 작동하도록 합니다.

문의 양식 7 플러그인 작동 방식

이 양식은 사이트의 모든 페이지에 있습니다(행을 복사하여 붙여넣기만 하면 됩니다. 올바른 장소). 사이트 방문자는 필수 필드(예: 이름, 이메일, 메시지)와 플러그인을 하나의 사서함( "보내는 사람") 다른 사서함으로 편지를 보냅니다( "받는 사람").

그건, 2개의 우편함을 등록해야 합니다 - 보낸 사람과 받는 사람. Yandex 메일에서 보낸 사람을 만드는 것이 좋으며 받는 사람은 사이트의 공식 사서함입니다.

얼마 동안 Contact Form 7 플러그인이 작동을 멈췄습니다. 편지를 보내지 않고 단순히 다운로드를 비틀었습니다. 해결책을 찾았습니다 - 다른 무료 WPForms Lite 플러그인을 설치했습니다. 설정이 매우 쉽고 메시지 전송을 구성하기 위해 추가 플러그인을 설치할 필요가 없지만 모든 이메일에서 작동하지 않는 것으로 나타났습니다. 한 쪽에서는 편지를 받지 않았지만 다른 쪽에서는 보내졌습니다.

Contact Form 7 플러그인 설정하기.

1) Yandex 메일에 보낸 사람 상자를 등록합니다(무엇이든 상관없이 플러그인이 작동하는 데 이름이 중요하지 않으며 방문자에게 표시되지 않습니다). 그것은 편지의 환적 지점 역할을 할 것입니다.

2) Contact Form 7 플러그인의 Contact Form 설정하기 Click "변화"이후 "양식 템플릿". 다음은 필수 필드인 사용자 이름, 이메일, 메시지 및 제출 버튼이 어떻게 표시되어야 하는지에 대한 예입니다.

귀하의 이름(필수)

귀하의 이메일(필수)

메시지

3) "편지"당신이받는 편지의 모양에 대한 책임이 있습니다.

누구에게- 받는 사람의 사서함 주소

누구에게서 – <адрес ящика отправитель>

주제

편지 본문

따라서 피드백 양식의 완료된 모든 필드가 표시되는 편지를 받게 됩니다. 이것으로 Contact Form 7 플러그인의 구성이 완료됩니다..

주목! Contact Form 7 플러그인이 이메일을 보내려면 다른 WP-Mail-SMTP 플러그인을 설치해야 합니다. 보낸 사람과 받는 사람의 두 메일 주소를 연결하고 편지를 보내기 위한 시스템 기능을 수행하는 사람은 바로 그 사람입니다.

WP-Mail-SMTP 플러그인 설정. 지침

이메일에서- 보낸 사람의 사서함 주소

이름에서– 예를 들어, 귀하의 조직 이름 또는 귀하의 이름

우편 발신인- 편지를 보내는 기능. "SMTP를 통해 모든 WordPress 이메일 보내기"를 선택하십시오.

SMTP 호스트- Yandex 메일용 smtp.yandex.ru

SMTP 포트- Yandex 메일 465용

암호화– SSL 암호화 사용

입증– 예: SMTP 인증 사용

사용자 이름– 메일 발신자에 로그인

비밀번호- 메일 발신자의 비밀번호

설정이 완료되었습니다. 변경 사항을 저장합니다.

페이지에 문의 양식 7을 배치하는 방법

문의 양식 설정에서 맨 위에 있는 줄에 주의하세요.

모든 페이지에 복사하여 붙여넣어야 합니다. 모든 준비가 완료되었습니다.

특히 내 지시에 따라 어려움을 일으키지 않습니다. 모든 것이 잘 작동하고 이메일이 전송됩니다. 또한 WordPress에 가장 적합한 기사를 읽는 것이 좋습니다. 거기에서 많은 흥미로운 것들을 발견할 것입니다.

좋은 오후, 블로그 독자 여러분. WordPress에 대한 피드백 양식 주제를 계속합니다. 그리고 우리는 그들에 대해 이야기하고 있기 때문에 오늘 WP Contact Form 7 플러그인에 대해 이야기 할 것을 제안합니다.다음으로 단계별 플러그인 설정과 이 플러그인의 애드온에 대해 간략하게 설명하겠습니다.

페이지 탐색:

WordPress 문의 양식 7에 대한 설명

2) WordPress 관리자에서 Contact Form 7 플러그인을 활성화합니다.

3) 그림과 같이 새로 생성된 탭으로 이동합니다.

4) "새로 추가" 탭을 클릭하고 기본 양식 언어를 지정하거나 원하는 언어를 선택합니다.

5) 연락처 양식의 이름을 지정하고 저장을 클릭합니다.

6) 이제 양식을 표시하기 위해 게시물이나 사이드바에 이미 복사하여 붙여넣을 수 있는 단축 코드가 있습니다. contact-form-7 id="1252" title="(!LANG:Form number 1" (надо взять в квадратные скобки как на рисунке).!}

7) 이것은 우리의 양식이 어떻게 생겼는지입니다:

물론 아름답지는 않지만 자신만의 스타일을 만들거나 자신만의 양식을 만들고 삽입물을 삽입하는 데 방해가 되는 사람은 없습니다.

템플릿의 임의의 위치에 Contact Form 7을 표시하는 방법

단락 6에서 단계별 설정 CF7 코드 단축 코드를 사용하는 방법을 보여주고 이 코드를 위젯이나 게시물, 페이지에 표시할 수 있다고 추가로 설명했습니다. 또한 템플릿의 아무 곳에나 연락처 양식 7을 표시할 수 있다고 말하고 싶습니다. 이렇게 하려면 다음과 같은 간단한 코드를 삽입하십시오.

그게 전부입니다. 모든 것을 올바르게했다면 WordPress 템플릿의 임의의 위치에 Contact Form 7의 출력을 얻을 수 있습니다.

연락처 양식 7 입력 필드 사용자 정의

덕분에 다음과 같은 상자가 추가로 제공됩니다.

문의 양식 7에 대한 회신 응답 구성

새로운 버전플러그인 CF7 4.4 이상인 경우 개발자는 from 필드에 입력할 것을 권장합니다(여기서는 아래 스킨에 있음).

도메인과 일치하는 올바른 주소. 피부에서 볼 때 이 권장 사항은 문제를 만듭니다.

메일러에서 사용자에게 어떻게 응답합니까?

답변을 클릭하면 자체 메일에 답장을 보내드립니다. 실제로는 스스로 답장을 보내드립니다. 이것은 사용자의 주소를 메일러에 수동으로 복사한 다음 응답해야 하기 때문에 매우 불편합니다.

이 문제에 대한 해결책은 언제나 그렇듯이 간단합니다. 현장에서 필요한 추가 헤더코드 추가:

답장하다:

물론 your-email-sh는 메일 단축 코드로 바꿔야 합니다. 아래 스킨 참조:


이제 WordPress 피드백 편지를 받으면 메일러를 클릭하여 답장을 보낼 수 있습니다. 그러면 답이 올바른 이메일로 전송됩니다.

이 단계를 수행한 후 문제가 발생하면 링크를 클릭하여 게시물을 읽어야 합니다. Contact Form 7 플러그인에는 주요 문제점과 문제점의 원인이 설명되어 있습니다.

그게 다야. 플러그인과 레이아웃이 어떻게 구성되어 있는지 이해하시기 바랍니다.

이 자료는 글로벌 웹에서 WordPress와 같은 사이트를 만들고 홍보하기 위한 인기 있는 플랫폼용 플러그인인 Contact Form 7의 구성에 대해 자세히 설명합니다. 이 소프트웨어 도구를 사용하면 연락처 양식을 만들고 구성할 수 있습니다.

WordPress에 대해 조금

가장 인기 있고 가장 일반적인 개발 및 콘텐츠 도구 중 하나 정보 자원워드프레스입니다. 처음에는 이 소프트웨어간단한 블로그를 만드는 데 중점을 두었습니다. 그러나 전문 전문가가 기능을 보완하여 이 콘텐츠 관리 시스템을 사용하여 다른 인터넷 리소스를 만들 수 있게 되었습니다.

웹사이트 생성 및 홍보를 위한 이 플랫폼의 강점과 약점

이것의 장점 소프트웨어 플랫폼그런:

    소스 코드의 단순성과 개방성.

    엄청난 양의 배경 정보.

    가능한 한 최단 시간에 인터넷에서 주제별 리소스를 개발할 수 있는 능력.

    추가 소프트웨어 애드온(플러그인)이 없는 고성능.

그러나 이 경우의 단점은 다음과 같습니다.

    "Wordpress"를 기반으로 만든 사이트는 과부하에 대처할 수 없습니다.

    추가 미니 프로그램 또는 플러그인(플러그인이라고도 함)을 설치할 때 인터넷 리소스의 성능이 저하됩니다.

WordPress 플랫폼 기반 사이트가 필요한 이유

WordPress와 같은 콘텐츠 관리 시스템의 기본 기능은 매우 단순합니다. 가장 기본적인 블로그와 웹사이트를 개발하는 것만으로도 충분합니다. 소프트웨어 플랫폼의 기능으로 상황을 어떻게든 개선하고 유연성을 추가하기 위해 개발자는 전문 용어로 플러그인이라고 하는 특수 미니 프로그램을 설치해야 합니다. 그 중 하나가 Contact Form 7입니다. 플러그인 설정을 사용하면 콘텐츠 관리 시스템의 특정 페이지에서 확장된 수준의 기능으로 피드백 양식을 만들 수 있습니다.

전문화 "문의 양식 7"

앞에서 언급했듯이 Wordpress 플랫폼을 기반으로 한 인터넷 리소스의 방문자와 관리자 간의 피드백을 만드는 것이 Contact Form 7의 주요 작업입니다. 메일 설정, 템플릿 편집, 다양한 파일 보내기는 가능성의 전체 목록과 거리가 멉니다. 그 미니 프로그램. 동시에 사이트의 하드웨어 리소스에 대한 부하가 상대적으로 적고 사이트 또는 블로그의 성능이 크게 저하되지 않습니다.

플러그인 설치 순서

WordPress 플랫폼에 플러그인을 설치하는 방법에는 세 가지가 있습니다.

    글로벌 웹에서 ZIP 아카이브를 다운로드하고 인터넷 리소스의 해당 디렉토리에 "업로드"합니다.

    다양한 종류의 FTP 클라이언트 사용.

플러그인 설치를 위한 세 가지 옵션 중 가장 안전한 것은 마지막 옵션입니다. 이 경우 프로그래밍 코드공식 사이트에서 다운로드되며 다양한 종류의 악성, 위험한 조각이 포함되어 있지 않습니다. 이 경우 플러그인을 설치하는 순서는 다음과 같습니다.

    WordPress 관리자 패널로 이동합니다.

    그런 다음 "플러그인"섹션으로 이동해야합니다.

    열리는 창에서 "새로 추가"를 선택하십시오.

    검색 창에 플러그인 이름(Contact Form 7)을 입력한 다음 마우스 포인터를 "검색" 버튼 위로 이동하고 한 번 클릭합니다. 그 후 검색 작업이 시작됩니다. 소프트웨어.

    완료되면 발견된 플러그인 목록이 표시됩니다. 이 목록에서 필요한 것을 찾고 맞은편에 있는 "설치" 버튼을 클릭합니다.

    그런 다음 콘텐츠 관리 시스템이 이 플러그인을 자동으로 다운로드하여 설치합니다.

    다음 단계는 설치된 소프트웨어를 활성화하는 것입니다. 이렇게 하려면 "플러그인" 탭으로 이동하여 목록에서 Contact Form7을 찾으십시오. 그 옆에는 "활성화"라는 비문이 있으며 마우스로 한 번 클릭하십시오.

    콘텐츠 관리 시스템의 관리 패널을 업데이트하고 항목 중에서 Contact Form7을 찾습니다. 이것이 이 인기 있고 기능적인 플러그인을 성공적으로 설치하기 위한 조건입니다.

    "연락처 양식 7" 설정 알고리즘

    Contact Form 7 설정은 다음 항목으로 구성됩니다.

      창조 새로운 형태또는 플러그인이 설치될 때 생성된 이전 것을 편집합니다. 경험에 따르면 대부분의 경우 새 양식을 만드는 옵션을 사용하는 것이 좋습니다.

      다음 단계에서 양식의 언어를 선택하고 이름을 설정합니다.

      그런 다음 필요한 경우 템플릿을 재구성합니다.

      변경 사항을 저장합니다.

      이전에 얻은 코드로 새 페이지를 만듭니다.

      마지막 단계에서 사이트로 이동하여 인터넷 리소스의 생성된 인터페이스 요소가 올바르게 작동하는지 확인해야 합니다.

    새 양식 만들기

    활성화 즉시 이 플러그인은 웹사이트 또는 블로그 방문자에게 질문을 하기 위한 기본 양식을 만듭니다. 물론 적절하게 편집하고 구성할 수 있습니다. 그러나 이것을 삭제하고 다음을 사용하여 새로 만드는 것이 훨씬 쉬울 것입니다. 풀세트필요한 모든 기능. 이렇게 하려면 다음 단계를 수행해야 합니다.

      이 플러그인의 메뉴로 이동하여 "양식" 항목을 선택하십시오.

      그 후 열리는 창에서 "문의하기 양식1" 항목 옆에 있는 확인란을 선택해야 합니다.

      그런 다음 그 위에 있는 "작업" 드롭다운 목록에서 "삭제" 항목을 선택합니다.

      이에 대한 응답으로 수행된 작업을 확인하는 질문이 나타납니다. 양식 삭제를 확인하고 "예" 버튼을 클릭해야 합니다.

      다음으로 관리 패널 "Wordpress" "Contact Form7"에서 "새로 만들기" 메뉴 항목을 선택합니다.

      열리는 창의 드롭다운 목록에서 미래 형식의 인터페이스 언어인 "러시아어"를 선택합니다. 그런 다음 "만들기" 버튼을 클릭합니다.

    그 후 기본적으로 WordPress에 대한 새 피드백 양식의 초기 코드가 생성됩니다. 그 후에는 Contact Form 7 설정과 같은 작업을 수행해야 합니다.

    폼의 이름을 설정

    위의 모든 작업을 수행하면 Contact Form 7 Style에 새 양식의 이름을 입력하는 창이 나타납니다. 이것을 정확하게 설정하는 것은 한편으로는 이 간단한 조작으로 시작됩니다. 그러나 양식의 이름은 다음을 기반으로 더 잘 지정됩니다. 검색 엔진 최적화. 따라서 이 경우 예를 들어 "피드백 양식" 또는 "사이트 관리자에게 질문하기"가 가장 최적입니다. 이 인터페이스 요소의 이름을 결정하자마자 쿼리 창의 해당 필드에 입력합니다.

    "연락처 양식 7" 템플릿 편집

    생성된 폼의 이름이 같은 창에 4개의 탭이 있습니다. 첫 번째는 템플릿입니다. 기본적으로 여기에는 5개의 요소만 형성됩니다.

      인터넷 리소스 방문자의 이름을 입력하는 곳입니다.

      질문을 한 방문자의 이메일 주소를 다이얼하는 필드입니다.

      다른 필드에서는 질문의 제목을 입력할 수 있습니다.

      마지막 기본 양식 요소는 제출이라고 표시된 버튼입니다.

    필요한 경우 이 필드의 텍스트를 편집하고 다른 인터페이스 요소를 추가할 수 있습니다. 이렇게하려면 모든 코드를 선택하는 것으로 충분합니다. 텍스트 요소(예를 들어, 메시지의 제목이 표시된 코드 부분을 다음을 사용하여 복사하십시오. 컨텍스트 메뉴같은 필드에서 다른 위치로. 오른쪽에는 관심 요소를 선택하는 매개 변수(다음 단락에서 자세히 설명함)가 있습니다. 그런 다음 드롭다운 목록 옆에 나타납니다. 필수 코드. 그런 다음 이 코드를 복사하여 메시지 제목 코드 대신 붙여넣습니다. 요소의 이름은 재량에 따라 선택됩니다.

    필드 길이 조정 등

    같은 위치에서 Contact Form 7의 입력을 변경할 수 있습니다. 텍스트 필드의 너비 조정은 다음과 같이 수행됩니다.

      예를 들어 인터넷 리소스 방문자 이름의 문자 수를 55자로 늘려야 합니다. 기본적으로 40개가 있습니다.

      이렇게 하려면 끝에 있는 코드에 숫자 60/55를 추가합니다. 결과는 코드가 됩니다. 변경 사항을 저장한 후 이 필드의 길이는 60이 되며 최대 금액입력 가능한 문자 - 55.

      마찬가지로 메시지 텍스트 상자의 크기를 조정할 수 있습니다. 이 경우에만 이 요소의 코드를 다음과 같이 변경해야 합니다. 이 경우 40은 한 줄의 글자 수이고, 30은 Contact Form 7에서 이 인터페이스 요소의 총 용어 수입니다. 양식 자체의 모양은 각 개인의 매개 변수 값을 선택하여 정밀하게 구성됩니다. 요소. 따라서 각 요소의 코드에서 이 절에 주어진 각 매개변수의 구체적인 값을 표시하는 것이 좋습니다.

      기타 양식 탭

      언급한 바와 같이 첫 번째 탭을 양식 템플릿이라고 합니다. 이 창의 다음 항목은 "편지"입니다. 이 인터넷 리소스에서 메일을 보낼 장소의 매개변수를 설정합니다. "알림" 탭에서 메시지 텍스트가 구성되며, 이는 편지를 성공적으로 보낸 경우 표시됩니다. 도구를 사용하여 사이트 관리자에게 연락할 수 없는 경우 메시지를 준비할 수도 있습니다. 마지막 탭문의 양식 7 - "추가 설정". 실제로 매우 드물게 사용되는 매개 변수가 포함되어 있습니다. 예를 들어 Yandex - 메트릭을 사용하여 사용자가 입력한 텍스트의 추적을 설정하는 데 사용할 수 있습니다.

      이 플러그인으로 이 양식에 추가할 수 있는 필드

      Wordpress용 Contact Form 7 사용자 지정을 통해 피드백 양식에 다음 인터페이스 요소를 추가할 수 있습니다.

      • 테스트 필드는 모든 문자 집합을 입력할 수 있는 범용 인터페이스 요소입니다.

        E-Mail - 전자 메일함의 이름을 입력하는 곳입니다.

        URL - 웹 페이지 주소를 입력하는 필드입니다.

        전화번호 - 국제 형식으로 전화번호를 입력할 수 있습니다.

        "숫자(스핀박스)" 요소를 사용하면 정수 값(예: 방문자의 나이)의 입력 필드를 만들 수 있습니다.

        "숫자(슬라이더)" 요소는 지정된 범위에서 숫자 값을 선택할 수 있는 슬라이더를 양식에 추가합니다.

        "날짜" 항목은 필요한 날짜를 지정할 수 있는 특수 입력 필드를 만듭니다. 이 인터페이스 요소가 활성화되면 필요한 날짜를 즉시 선택할 수 있는 달력이 아래에 나타납니다.

        차례로 드롭다운 메뉴 항목 "텍스트 필드"는 이메일의 텍스트 부분을 입력하기 위한 것입니다.

        다음 항목인 "드롭다운 메뉴"를 사용하면 고정 목록에서 필요한 매개변수를 선택할 수 있습니다.

        그러나 "CheckBoxes"는 주어진 목록에서 하나 이상의 값을 선택하도록 설계되었습니다.

        인터페이스 요소 "라디오 버튼"은 이전 요소와 거의 동일합니다. 유일한 차이점은 이 경우 하나만 선택할 수 있다는 것입니다. 올바른 옵션, "CheckBoxes"는 여러 유효한 값을 가질 수 있습니다.

        "수락" 항목을 사용하면 생성된 양식에 확인란을 하나만 추가할 수 있습니다. 원칙적으로 어떤 조건을 숙지하고 동의하지 않으면 향후 전자 메일을 보낼 수 없습니다.

        "메뉴" 항목을 사용하면 스팸으로부터 사서함을 보호할 인터페이스의 특수 섹션을 만들 수 있습니다. 이 경우 보내기 전에 제기된 질문에 대한 정확한 답변을 제공해야 합니다.

        두 번째 보안 옵션은 CAPTCHA입니다. 선택하면 양식에 별도의 섹션이 추가되며 기호가 있는 그림과 기호를 입력하기 위한 추가 필드가 표시됩니다.

        다음 항목은 "파일 보내기"입니다. 리소스 관리자를 위한 다양한 설명과 설명이 있는 파일을 편지의 텍스트에 추가할 수 있습니다.

        마지막 항목인 "제출 버튼"을 사용하면 해당 인터페이스 요소를 추가할 수 있습니다.

      변경 사항 저장

      필요한 값을 설정하고 양식을 제대로 구성했으면 이 모든 것을 저장해야 합니다. 이를 위해 플러그인 편집 창에서 상단으로 올라갑니다. 여기에 저장 버튼이 있어야 합니다. 조작기의 포인터를 해당 위치로 이동하고 한 번 클릭합니다. 응답으로 동일한 마우스 포인터와 복사를 사용하여 선택하는 양식 코드가 나타납니다. 다음으로 "페이지" 항목에서 콘텐츠 관리 시스템의 관리 패널로 이동합니다. 그런 다음 필요한 이름으로 새 페이지를 만듭니다(예: "피드백", "연락처" 또는 "리소스 관리자에게 질문하기"). 그런 다음 다이얼링 커서를 해당 코드의 입력 필드로 변환합니다. 이 경우 옵션 패널에서 코드 다이얼링 모드를 "텍스트"로 전환해야 합니다. 그런 다음 이전에 얻은 양식 코드를 붙여넣습니다. 다음으로 인터페이스의 오른쪽에서 "게시" 버튼을 찾아 마우스로 가리킵니다. 다음 단계에서는 콘텐츠 관리 시스템 인터페이스의 이 요소에서 마우스 왼쪽 버튼을 한 번 클릭합니다.

      결과 확인

      이전에 표시된 조작을 수행한 후 인터넷 리소스의 인터페이스는 다음을 추가해야 합니다. 새 페이지, Contact Form 7에 명시된 요소들이 표시될 것이며, 원칙적으로 인터페이스 설정은 끝난다. 올바른 소프트웨어 설정을 확인하기만 하면 됩니다. 이것을 위해 당신은 가야합니다 홈페이지웹사이트, 블로그 또는 포털. 그런 다음 페이지 목록에서 피드백 양식이 배치된 페이지를 찾습니다. 우리는 그것에 가서 모든 필드에 올바른 매개 변수를 한 번에 입력하고 테스트 편지를 메일로 보냅니다. 이에 대한 응답으로 이 작업이 성공적으로 완료되었다는 정보 메시지를 받아야 합니다. 그런 다음 빈 필드다른 이메일을 보내려고 합니다. 그 후, 확인된 모든 양식 매개변수를 설정해야 한다는 메시지가 나타나야 합니다. 두 경우 모두 앞에서 표시된 결과를 얻은 경우 생성된 피드백 양식이 올바르게 작동합니다.

      플러그인의 장점과 단점. 대안

      초보 개발자가 피드백 양식을 작성하기 위한 훌륭한 솔루션은 Contact Form 7 미니 프로그램입니다.이 경우 메일 전송 설정, 인터페이스 요소 및 기타 중요한 인터페이스 요소 작성은 대부분 자동화되어 있으며 최소한의 사용자 지식만 필요합니다. 따라서 간단한 인터넷 리소스의 경우 입문 단계그리고 초보 관리자와 함께 - 이것은 훌륭한 솔루션입니다. 그러나 결국 모든 플러그인은 웹 페이지 리소스에 대한 추가 부하이므로 성능이 저하됩니다. 결과적으로 고급 사용자는 이러한 환경에서 멀리 이동할 것을 권장합니다. 쉬운 방법피드백 양식을 만듭니다. 당신은 또한 그것을 직접 만들 수 있습니다 HTML 사용, CSS 및 JS, 더 적은 기능에도 불구하고. 이렇게 하면 사이트의 컴퓨팅 리소스에 대한 필요성이 줄어들고 성능 수준이 크게 향상됩니다.

      결과

      이 문서에서는 Contact Form 7 설정을 단계별로 설명합니다.이 플러그인은 실제로 높은 수준의 기능을 가지고 있으므로 피드백 양식을 만드는 데 사용할 수 있습니다. 반면에 콘텐츠 관리 시스템의 일부로 추가 플러그인을 사용하면 하드웨어대지. 따라서 이 콘텐츠 관리 시스템을 기반으로 하는 초보 사이트 관리자는 이러한 용도로 이 플러그인을 사용하는 것이 좋습니다. 음, 고급 사용자는 Contact Form 7 없이도 할 수 있습니다. 이 경우 플러그인을 구성할 필요가 없습니다.