플러그인을 사용하여 문의 양식을 추가하는 방법 – P1: 문의 양식 7 사용

전문적인 웹사이트를 갖고 싶다면 연락처 양식은 가장 중요한 요소 중 하나입니다. 전용 플러그인을 사용하면 연락처 양식을 만들고 설정하는 것조차 어렵지 않습니다. 플러그인으로 쉽고 빠르게 문의 양식을 만들 수 있도록 가장 인기 있는 문의 양식 플러그인을 사용하는 방법에 대한 지침을 작성하고 작성했습니다.

"문의 양식" 시리즈의 첫 번째 부분에서 다음을 알아보겠습니다.

• 문의 양식이란 무엇입니까?
• 문의 양식의 이점
• Contact Form 7 플러그인을 사용하여 양식을 만드는 방법은 무엇입니까?

문의 양식이란 무엇이며 그 이점은 무엇입니까?

문의 양식이란 무엇입니까?

문의 양식은 마케터에게 친숙한 용어입니다. 연락처 양식을 사용하면 사용자가 귀하의 이메일 주소를 몰라도 웹사이트에서 바로 이메일을 보내고 귀하에게 연락할 수 있습니다.

연락처 양식에는 일반적으로 사용자가 이메일, 전화번호, 이름, 이메일 내용과 같은 필수 정보를 입력할 수 있는 많은 필드가 있습니다. 게다가 일반적으로 연락처 페이지 또는 고객의 연락처 정보를 얻어야 하는 영역에 배치됩니다. . 다음은 예입니다.

문의 양식의 이점

사용자는 연락처 양식을 사용하여 해당 웹사이트에서 바로 사이트 소유자에게 정보를 보낼 수 있으므로(연락처 정보를 남기거나 지원 요청 또는 기타 요청을 보내기 위해 ...) 훨씬 더 편리하고 빠르게 연락할 수 있습니다.

또한 연락처 양식을 사용하면 이메일을 비공개로 유지하고 스팸 및 보안 위협을 줄일 수 있습니다. 따라서 매일 스팸과 쓰레기로 가득 찬 사서함을 처리할 필요가 없습니다.

또한 문의 양식은 사용자가 요청한 정보를 양식에 입력해야 하므로 사용자의 정보를 보다 쉽게 ​​수집할 수 있습니다. 이것은 더 많은 리드를 얻기 위한 전략 중 하나입니다.

일반적으로 전문 웹사이트를 구축하고 비즈니스에 더 많은 이점을 얻으려면 문의 양식을 사용해야 합니다.

문의 양식을 만드는 방법

코드를 작성하여 원하는 대로 필드와 양식을 작성할 수 있습니다. 그러나 코더가 아니면 불가능합니다. 또는 이를 수행하려면 코더를 고용하는 데 일정 금액을 지불해야 합니다.

따라서 기술 전문가가 아닌 사용자 또는 개발자(시간과 노력을 절약하기 위해)를 위한 문의 양식을 만드는 가장 유용한 솔루션은 플러그인을 사용하는 것입니다. 이제 간단하고 쉽고 빠르고 무료인 많은 문의 양식 플러그인이 있습니다. 따라서 연락처 양식을 작성하는 데 사용하지 않을 이유가 없습니까?

이 시리즈의 모든 기사에서 다음과 같이 대학 등록 양식을 만드는 방법을 보여 드리겠습니다.

문의 양식 7을 사용하여 양식 만들기

"플러그인을 사용하여 문의 양식 만들기" 시리즈의 첫 번째 기사에서는 현재 사용 가능한 가장 인기 있는 무료 문의 양식 플러그인 중 하나인 문의 양식 7을 사용합니다.

먼저 wordpress.org의 플러그인 저장소에서 이 플러그인을 다운로드하여 설치하거나 대시보드 > 플러그인 > 새로 추가 로 이동하여 설치 및 활성화합니다.

문의 양식 7

작가: 미요시 타카유키

현재 버전: 5.5.3

최종 업데이트: 2021년 11월 28일

연락처 양식-7.5.5.3.zip

82% 등급 5,000,000+ 설치 WP 5.7+ 필요

다음은 이 플러그인을 사용하여 위의 대학 등록 양식을 만드는 구체적인 지침입니다.

상호 작용

대시보드 > 연락처 > 새로 추가로 이동하여 새 연락처 양식을 만듭니다. 다음은 작업할 인터페이스입니다.

(1): 연락처 양식의 이름을 입력합니다.
(2): 다음을 포함하여 연락처 양식을 만들고 설정하는 탭:

• 양식 탭: 연락처 양식에 대한 필드 만들기
• 메일 탭: 연락처 양식에서 수신하는 이메일 설정
• 메시지 탭: 데이터 입력 오류, 양식을 보낼 수 없음, 양식 제출 성공, …
• 추가 설정 탭: 연락처 양식에 다른 요소를 추가합니다.

문의 양식 필드 만들기

내가 언급했듯이 연락처 양식에는 사용자가 정보를 입력하거나 정보와 상호 작용할 수 있는 필드가 있습니다. 다음은 이러한 필드를 만드는 데 사용되는 양식 탭입니다.

(1) 폼에 추가할 이름, 이메일, 전화번호, 보내기 버튼 등의 필드로 구성되어 있습니다. … 아무 필드나 추가하려면 해당 필드의 이름을 클릭하기만 하면 됩니다.

(2)는 HTML 형식의 폼 구조를 표시하는 영역입니다. 새 연락처 양식을 만들 때 이메일, 이름, 제목 및 제출 버튼과 같은 간단한 필드가 있는 기본 양식의 기본 구조를 갖게 됩니다. 이 양식을 즉시 사용하거나 이를 기반으로 새 양식을 만들 수 있습니다.

필드에 대한 일반 지침

원하는 필드를 선택하면 해당 필드에 필요한 정보를 입력하는 팝업이 나타납니다. 각 필드에는 서로 다른 정보가 필요하지만 일반적으로 다음 섹션이 있습니다.

이름 : 이름 속성
기본값 : 필드의 기본값
Id 속성 : 필드의 ID
클래스 속성 : 필드의 클래스

참고 : ID 속성 및 클래스 속성 은 선택 사항이며 여기에 사용자 정의 정보를 입력할 수 있습니다. 연락처 양식을 더 쉽게 스타일링하는 다음 단계를 원하면 이 두 섹션을 작성해야 합니다.

이 정보를 입력하면 이 상자 하단에 생성한 필드 의 태그가 표시됩니다. 태그 삽입을 클릭하여 이 필드를 양식의 HTML에 삽입합니다.

일반적으로 Contact Form 7을 사용하여 만든 연락처 양식의 각 필드 태그는 다음과 같은 구조를 갖습니다.

 [field* name_attribute id:field_id class:field_class "필드의 기본값"]

설명:

• field * 는 선택한 필드 유형입니다. 이것은 필드에서 가장 중요하고 꼭 있어야 하는 부분입니다.
• * 는 이 필드가 필수임을 의미합니다. 사용자에게 강제로 입력하지 않으려면 * 제거하십시오.

Contact Form 7의 필드 태그 구조에 대한 자세한 내용은 이 문서를 참조하십시오. 연락처 양식의 의미와 HTML 구조를 이해하면 코드를 사용하여 새 필드를 더 쉽게 편집, 생성 및 추가할 수 있습니다. 특히 코더는 HTML 코드를 작성하여 위의 구문에 따라 양식을 생성할 수 있습니다. 단, 비코더의 경우 어려울 수 있으므로 아래의 단계를 따르기를 권장합니다.

이 시리즈의 문의 양식에서는 다음 필드를 선택해야 합니다.

모든 필드에는 위에서 말한 공통 정보가 있습니다. 그래서 지금은 각 분야의 구체적인 부분만을 안내하고 있습니다.

다음은 각 필드에 대한 자세한 지침입니다.

이름 입력 필드 만들기

텍스트 필드를 선택하고 필드에 대한 기본 정보를 상자에 입력합니다.

필드 유형 섹션에서 (이것은 선택 사항)이 필드가 작성해야 할 의무 너무 필요로 선택할 수 있습니다.

참고 : 기본값 섹션에서 이 텍스트를 필드의 자리 표시자로 사용을 선택하여 사용자가 데이터를 입력하기 전에 필드에 이 콘텐츠를 표시합니다. 이 모드를 사용하여 필드를 채워야 하는 내용을 사용자에게 설명해야 합니다.

Akismet 섹션은 스팸 방지 플러그인인 Akismet 플러그인과 관련이 있습니다. 이 플러그인이 없다면 이 섹션은 신경쓰지 마십시오.

전화번호 입력 필드 생성

숫자 필드를 선택하고 필드에 대한 기본 정보를 입력합니다.

필드 유형 섹션에서 이 필드의 유형을 선택합니다. 두 가지 유형의 필드가 있습니다: Spinbox 및 Slider .

슬라이더 는 다음과 같이 숫자를 선택하기 위한 척도를 표시합니다.

이 스타일은 특정 척도에 따라 점수를 매기거나 숫자를 선택하는 데 적합합니다.

한편, Spinbox를 사용하면 전화번호, 카드 번호, ID 카드 번호와 같은 필드에 임의의 숫자, 일련의 숫자를 입력할 수 있습니다. 따라서 이 예에서는 Spinbox를 선택합니다.

범위 섹션에서는 숫자에 대한 제한을 선택할 수 있습니다. 이 예에서는 이 섹션이 필요하지 않으므로 아무것도 채우지 않았습니다.

전공 및 연구 장소 선택을 위한 필드 생성

이 필드에서 드롭다운 메뉴를 선택 합니다 .

이제 옵션 섹션에서 전공 및 위치에 대한 옵션을 채우 십시오 . 각 옵션은 한 줄임을 명심하십시오.

사용자가 한 번에 여러 옵션을 선택할 수 있도록 하려면 여러 선택 허용 을 클릭합니다.

등록 목적 선택을 위한 필드 생성

확인란 필드를 선택 합니다.

옵션 섹션은 위의 드롭다운 메뉴 필드와 유사합니다. 또한 다음과 같이 확인란에 대한 추가 옵션이 있습니다.

• 레이블을 먼저 배치하고 체크박스를 마지막에 배치
• 각 항목을 레이블 요소로 래핑
• 확인란을 단독으로 설정합니다 (1개 옵션만 선택할 수 있음).

제출 버튼 만들기

마지막으로 제출 필드를 선택하고 다음 요구 사항에 따라 정보를 입력합니다( 레이블 은 이 버튼에 표시되는 단어입니다(예: "제출", "등록", "확인").

특히 새 양식을 만들 때 이 플러그인은 이미 제출된 필드를 자동으로 생성했습니다. 따라서 이 필드를 새로 만들지 않고 사용할 수 있습니다.

필드에 대한 레이블 추가

이제 연락처 양식에 대한 필드 생성이 완료되었습니다. 그러나 귀하의 필드에는 다음과 같이 연락처 양식에 표시할 이름이 없습니다.

따라서 양식의 HTML 부분에 다음 코드 구조를 삽입하여 필드에 레이블 을 추가해야 합니다.

 <label> 필드 레이블
[필드의 태그] </label>

그런 다음 필드 레이블 섹션에 필드 레이블을 작성 합니다. 그런 다음 위의 모든 정보를 입력하고 저장 을 클릭합니다.

필드를 만든 후 내 연락처 양식은 다음 코드 구조를 갖습니다. 프런트 엔드의 원하는 위치에 필드를 표시하도록 필드를 정렬했습니다.

 <label> 귀하의 이름(필수)
[텍스트* 이름 "이름을 입력하세요"] </label> 

<label> 귀하의 전화번호
[전화번호 자리 표시자 "전화번호 입력"] </label> <label> 귀하의 이메일(필수)
[email* your-email "이메일을 입력하세요"] </label>

<레이블> 전공
[선택* 전공 "컴퓨터 과학" "언어학" "농업" "엔지니어링" "전자 상거래"] </label>
<label> 공부할 장소 
[select* 유학 지역 "뉴욕" "시카고" "로스앤젤레스" "워싱턴 DC" "휴스턴" "필라델피아"] </label>

</label> 에 등록
[checkbox* 등록 label_first "공부" "둘러보기" "상담"] </label>

[제출 "제출"]

이번에는 연락처 양식이 여전히 웹사이트에 표시되지 않습니다. 프런트 엔드에 표시하려면 몇 가지 단계를 더 수행해야 합니다.

문의 양식 설정

이메일 설정

메일 탭을 사용하면 사용자가 연락처 양식을 보낼 때 받게 될 이메일의 내용을 사용자 지정할 수 있습니다. 이 섹션을 설정하려면 방금 생성한 문의 양식에 필드의 메일 태그를 삽입해야 합니다. 다음은 예입니다.

설명:

• 받는사람 : 문의양식 확인담당자의 이메일을 입력합니다.
• 보낸 사람 및 제목 : 이 연락처 양식을 보내는 사람을 결정하려면 여기에서 이름을 설정해야 합니다.
• 메시지 본문 : 여기에 메일 태그를 추가하여 연락처 양식에서 이메일을 수신할 때 사용자에게 요청한 모든 정보가 표시되도록 합니다.

다른 설정

메시지 탭

탭 설명에서 볼 수 있듯이 상황에서 사용되는 메시지를 입력합니다. 예를 들어 사용자가 양식을 성공적으로 제출하거나 제출하지 못한 경우 이에 대해 알리는 메시지를 추가해야 합니다. 또는 사용자가 필수 필드를 잊어버린 경우 사용자가 다시 돌아와 해당 필드를 채울 수 있도록 메시지도 추가해야 합니다. 이것은 작은 세부 사항이지만 사용자 경험을 향상시키기 위해 주의를 기울여야 합니다.

추가 설정 탭

이 탭은 다음을 설치하기 위한 코드 조각을 추가하는 데 도움이 됩니다.

• 가입자 전용 모드
• 데모 모드
• 메일 건너뛰기
• 확인으로 수락
• 플라밍고 설정
• 메시지 저장 억제
• 자바스크립트 코드

다음과 같이 사용해야 하는 몇 가지 유용한 부분이 있습니다.

• 구독자 전용 모드 : 이 모드에서는 웹사이트에 로그인한 사용자만 문의 양식을 제출할 수 있습니다. 이렇게 하면 스팸 메시지가 제거되고 정말로 연락을 원하는 사람들에게만 해당됩니다.
• 확인으로 수락 : 사용자가 이 확인란을 선택 하지 않고 다른 필드로 이동할 때 수락 확인란에 대한 알림을 표시하는 기능을 추가합니다. 기본적으로 사용자가 수락 확인란을 선택하지 않으면 양식을 제출한 후에만 오류 메시지가 표시되기 때문입니다. 이 수락 확인란은 "웹사이트 약관에 동의합니다"와 같은 필드를 만드는 데 자주 사용되지만 다른 콘텐츠 유형을 만드는 경우 승인을 확인 으로 추가해야 할 수 있습니다.

추가 설정 탭의 다른 기능에 대한 자세한 내용은 여기에서 자세히 알아볼 수 있습니다.

웹사이트에 문의 양식 표시

마지막 단계는 웹사이트에서 방금 생성한 문의 양식을 표시하는 것입니다.

여전히 새 양식을 만드는 인터페이스에서 단축 코드를 복사하여 원하는 페이지나 게시물에 붙여넣습니다.

최종 결과는 다음과 같습니다.

그런데 제 컨택폼이 잘 안보여서 스타일을 좀 바꿔야겠어요.

이 기사의 시작 부분에서 제공한 템플릿과 같은 연락처 양식의 스타일을 다시 지정하려면 스타일을 쉽게 지정할 수 있도록 양식의 HTML을 다음과 같이 편집해야 합니다.

 <div class="form__field form__full-width">
<label>이름(필수)
[텍스트* 이름 자리 표시자 "이름을 입력하세요"]
</레이블>
</div>
<div class="form__field">
<label>귀하의 전화번호
[전화번호 자리 표시자 "전화번호 입력"]
</레이블>
</div>
<div class="form__field">
<label>귀하의 이메일(필수)
[이메일* 이메일 자리 표시자 "이메일 입력"]
</레이블>
</div>
<div class="form__field">
<label>전공
[선택* 전공 "컴퓨터 과학" "언어학" "농업" "공학" "전자 상거래"]
</레이블>
</div>
<div class="form__field">
<label>공부할 장소
[선택* 유학 "뉴욕" "시카고" "로스앤젤레스" "워싱턴 DC" "휴스턴" "필라델피아"]
</레이블>
</div>
<div class="form__field form__full-width">
<label>등록
[checkbox* 등록 use_label_element "공부" "둘러보기" "상담"]
</레이블>
</div>
<div class="form__field form__full-width">
[제출 "제출"]</div>

그런 다음 테마의 사용자 정의 도구 > 추가 CSS 로 이동하여 다음 코드를 붙여넣습니다.

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

마지막으로 게시 를 클릭하여 저장합니다.

마지막 말

Contact Form 7을 처음 사용할 때 코더가 아닌 경우 HTML에 익숙하지 않을 수 있습니다. 하지만 이 튜토리얼을 읽고 나면 모든 것이 쉬워진 것 같죠?

다른 도구를 사용하여 문의 양식을 만들고 싶다면 이 시리즈의 다음 기사를 기대하십시오. 어떤 플러그인을 제안하시겠습니까? 이 기사 아래에 의견을 남겨주세요!