양식의 모든 필드(태그). 연락처 양식 7 wordpress용 플러그인 양식의 모든 필드(태그)

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

추가하는 기능이 필요한 경우 확인란 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 버튼 사용자 지정

문의 양식 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; /* 입력 필드의 텍스트 글꼴 */ font -size:16px; /* 입력 필드의 텍스트 크기 */ line-height: 20px; /* 입력 필드의 라인 높이 */ border: 1px solid #C7C7C7; /* Border 첫 번째 값은 너비(픽셀), 두 번째 값은 상자 스타일, 세 번째 값은 색상 */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Box shadow 2px - x offset, 2px - y offset, 8px - 그림자 흐림 반경, #F9F9F9 - 그림자 색상 */ -webkit-transition: 모두 0.2초 완화, -moz-transition: 모두 0.2초 완화, -o-transition: 모두 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: 6픽셀 /* 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: 둘 다; )

Contact Form 7은 상당히 간단한 마크업으로 양식 및 메일의 내용을 유연하게 사용자 정의할 수 있는 수많은 문의 양식을 관리할 수 있습니다. 양식은 Ajax 제출, CAPTCHA, Akismet의 스팸 필터 등을 기본적으로 지원합니다.

문서 및 지원

스크린샷

설치

1. 전체 contact-form-7 폴더를 /wp-content/plugins/ 디렉토리에 업로드합니다.
2. WordPress 대시보드의 플러그인 페이지에서 플러그인을 활성화합니다.

WordPress 대시보드 메뉴에서 '피드백' 탭을 찾을 수 있습니다.

플러그인을 올바르게 사용하는 방법을 배우려면 해당 홈페이지를 방문하십시오.

리뷰

많은 사람들이 테마에 번들로 제공되는 지원되지 않는 버전을 사용하고 있기 때문에 이 플러그인을 싫어하는 것을 봅니다. - 제 경험에서 말할 수 있는 것은 많은 사이트에서 몇 년 동안 사용한 후 큰 감사를 드린다는 것뿐입니다. 최신 상태로 유지하고 모든 사람에게 무료로 제공하는 개발자에게 제공됩니다. 설정 및 사용자 지정이 매우 쉽습니다. 건배!

회원 및 개발자

"Contact Form 7"은 오픈 소스 프로젝트입니다. 플러그인 개발에 기여한 기여자는 다음과 같습니다.

변경 로그

자세한 내용은 릴리스를 참조하십시오.

5.1.6

• CSS: 스타일시트에서 불필요하고 Twenty Twenty의 규칙과 충돌하는 스타일 규칙을 제거합니다.
• REST API: 경로 매개변수에서 명시적으로 문의 양식 ID를 검색합니다.

5.1.5

• 구성 유효성 검사기: available_html_elements 오류에 대한 새 테스트 항목입니다.
• 구성 유효성 검사기: attachments_overweight 오류에 대한 새 테스트 항목입니다.

5.1.4

• reCAPTCHA: WPCF7_RECAPTCHA_SITEKEY 및 WPCF7_RECAPTCHA_SECRET 상수를 소개합니다.
• reCAPTCHA: wpcf7_recaptcha_sitekey 및 wpcf7_recaptcha_secret 필터 후크를 소개합니다.
• wpcf7_form_response_output 필터에 $status 매개변수 추가.
• 사용자가 등록된 사용자인 경우 임의의 코드를 생성합니다.
• 단위 태그를 반환하는 공개 메서드인 WPCF7_ContactForm::unit_tag()를 소개합니다.
• reCAPTCHA: 응답 토큰이 비어 있는 경우 스팸 로그에 다른 메시지를 보냅니다.
• 동의 플래그: 동의 양식 태그에서 label_first 옵션을 지원합니다.

5.1.3

• 메일 탭에서 옵션을 선택 해제할 수 없는 버그를 수정했습니다.

5.1.2

• 영구 연락처: 연락처 목록 선택기를 도입했습니다.
• Constant Contact: 추가 설정 constant_contact가 도입되었습니다.
• reCAPTCHA: wpcf7_recaptcha_actions 및 wpcf7_recaptcha_threshold 필터 후크를 도입했습니다.

5.1.1

• reCAPTCHA: 응답을 빈 응답 토큰으로 변경합니다.

5.1

• 영구 연락처 통합 모듈이 도입되었습니다.
• reCAPTCHA v3를 지원하도록 reCAPTCHA 모듈을 업데이트했습니다.
• 다크 모드 스타일 규칙을 추가합니다.

5.0.5

• WPCF7_FormTag 클래스에서 get_data_option()과 get_default_option() 간의 불일치 문제를 수정했습니다.
• unlink() 호출에서 발생하는 PHP 오류를 차단합니다.
• UPLOADS 상수를 지원하기 위해 wpcf7_is_file_path_in_content_dir()을 도입했습니다.

5.0.4

• 권한 없는 권한 상승 문제를 해결하기 위해 register_post_type() 호출에서 power_type 인수를 명시적으로 설정합니다.
• 로컬 파일 첨부 - wp-content 디렉토리 외부에 있는 파일에 대한 절대 경로를 지정하는 것은 금지되어 있습니다.
• 구성 유효성 검사기 - 잘못된 첨부 파일 설정을 감지하는 테스트 요소를 추가합니다.
• HTML5 자리 표시자 속성을 지원하지 않는 레거시 브라우저에 대한 JavaScript 이전 버전과의 호환성 기능 버그를 수정했습니다.
• 동의 확인란 - 양식 태그의 저장 금지 기능을 비활성화합니다.

5.0.3

• CSS: 비활성화된 상태에서 제출 버튼 위로 마우스를 가져갈 때 "허용되지 않음" 커서 스타일을 적용합니다.
• 동의 플래그: 더 나은 개인 정보 보호 옵션 사용을 권장하기 위한 태그 생성기 사용자 인터페이스의 개정판입니다.
• wpcf7_anonymize_ip_addr() 함수의 구현.
• 모든 양식 태그 유형에 대해 consent_for:storage 옵션을 도입했습니다.

5.0.2

• readme.txt 파일에 "개인정보 보호정책" 섹션을 추가했습니다.
• 정보 메타 블록의 콘텐츠가 업데이트되었습니다.
• 더 적절한 경우 get_locale() 대신 get_user_locale()을 사용하십시오.
• 동의 체크박스: 신청 성공 후 비활성화된 제출 버튼의 상태를 재설정합니다.

5.0.1

• _n()의 잘못된 사용을 수정했습니다.
• 구성 확인: 고급 옵션 탭에서 잘못된 수의 경고를 수정했습니다.
• 구성 확인: "보낸사람" 헤더 필드에서 [_site_admin_email] 특수 전자 메일 태그의 잘못된 처리를 수정했습니다.
• 수락 플래그: 지정된 클래스 및 ID 속성이 잘못된 HTML 요소에 적용되었습니다.
• 구성 확인: 참조 또는 회신과 같은 사서함에 대한 선택적 메일 헤더가 있지만 비어 있을 수 있는 경우 "잘못된 사서함 구문" 오류가 반환됩니다.
• 의도하지 않은 매개변수 값 전달을 방지하려면 add_action()에 네 번째 매개변수를 명시적으로 지정하십시오.
• 삭제하기 전에 대상 디렉토리가 비어 있는지 확인하십시오.

5.0

• 추가 설정: on_sent_ok 및 on_submit이 제거되었습니다.
• 새로운 추가 설정: skip_mail.
• Flamingo: 수신 채널의 제목이 해당 문의 양식의 제목과 함께 변경됩니다.
• DOM 이벤트. 전체 API 응답 객체는 event.detail.apiResponse 속성을 통해 사용할 수 있습니다.
• HTML 메일: HTML 헤더에 언어 관련 속성을 추가합니다.
• 파일 업로드: 업로드 필드에 수락 속성을 설정합니다.
• 새로운 WPCF7_MailTag 클래스가 도입되었습니다.
• wpcf7_before_send_mail 작업 후크를 사용하여 메일 보내기 시도를 중단할 수 있습니다. 또한 액션 인터셉터를 통해 사용자 정의 상태 및 메시지를 설정할 수 있습니다.
• 수락 확인란: 양식 태그의 콘텐츠 부분에 조건을 지정할 수 있습니다.
• 수락 확인란: 선택성 매개변수를 지원합니다.
• 새 사용자 정의 메일 태그: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], [_user_display_name].
• 새 필터 후크: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type) 및 wpcf7_mail_tag_replaced_($type)
• 새로운 양식 태그 기능: 제로 컨트롤 컨테이너 및 메일용 아님