플러그인을 사용하여 연락처 양식을 추가하는 방법 – P2: WPForms 사용

"Contact Form" 시리즈의 이전 기사에서 Contact Form이 무엇이며 Contact Form 7 플러그인을 사용하는 방법을 배웠습니다. 약속한 대로 WPForms로 다른 튜토리얼을 작성했으며 이 기사에서 보여드리겠습니다.

WPForms는 실시간 미리보기가 포함된 프리미엄 드래그 앤 드롭 연락처 양식 플러그인입니다. 내 경험상 이 플러그인으로 작업하는 것이 쉽고 편리합니다.

이 시리즈의 1부에서 만든 이 대학 등록 양식 샘플을 기억하십니까? 이제 WPForms로 동일한 것을 만들 것입니다.

1단계: WPForms 플러그인 설치 및 활성화

이 플러그인은 wordpress.org에 무료 버전이 있으므로 관리자 대시보드 에서 바로 플러그인을 설치하고 활성화하기만 하면 됩니다.

WPForms의 문의 양식 – WordPress용 끌어서 놓기 양식 작성기

작성자: WPForms

현재 버전: 1.7.1.2

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

wpforms-lite.1.7.1.2.zip

98% 평점 5,000,000+ 설치 WP 4.9+ 필요

2단계: 새 연락처 양식 만들기 및 템플릿 선택

관리 대시보드 에서 WPForms > 새로 추가 로 이동합니다.

다음은 작업해야 하는 인터페이스입니다.

왼쪽 사이드바에서 5개의 섹션을 볼 수 있습니다.

1. 설정 : 연락처 양식의 이름을 지정하고 해당 템플릿을 선택합니다.
2. 필드 : 연락처 양식에 대한 필드를 추가하고 사용자 정의합니다.
3. 설정 : 알림, 확인 및 일반 설정을 구성합니다.
4. 마케팅 : Constant Contact, Campaign Monitor, Mailchimp, …
5. 결제 : PayPal Standard, Stripe 및 Authorize.Net에서 결제를 추가합니다.

참고 : 저는 이메일 마케팅 캠페인을 운영하지 않으며 제 양식에는 결제 정보가 필요하지 않습니다. 따라서 마케팅 및 지불 섹션이 필요하지 않습니다.

설정 섹션에서 양식 이름을 입력하고 원하는 템플릿을 선택합니다.

네 가지 기본 템플릿이 있습니다.

• 간단한 문의 양식
• 뉴스레터 가입 양식
• 에 대한 제안
• 빈칸

빈 양식을 제외하고 다른 템플릿에는 연락처 양식을 더 빠르게 작성하는 데 사용할 수 있는 자체 사전 작성된 필드가 있습니다. 또한 WPForms 애드온(유료 버전에서만 사용 가능)을 설치하여 더 많은 템플릿을 얻을 수 있습니다.

이 기사에서는 처음부터 연락처 양식을 단계별로 작성하기 위해 빈 양식 템플릿을 선택합니다. 이것은 당신이 모든 것을 더 쉽고 깊이 이해하는 데 도움이 될 것입니다.

3단계: 문의 양식 필드 추가

필드 추가

2단계에서 빈 양식 템플릿을 선택하면 필드 섹션으로 이동합니다.

연락처 양식에 대한 필드를 추가하려면 필드 추가 탭에서 원하는 필드를 끌어서 연락처 양식에 놓으십시오.

그런 다음 필드를 사용자 지정하려면 필드를 클릭한 다음 필드 옵션 탭에서 매개변수를 편집합니다.

또한 필드 위로 마우스를 가져간 후 원하는 버튼을 클릭하여 필드를 삭제하거나 복제할 수 있습니다.

이 문서에서는 다음 필드를 추가해야 합니다.

이러한 모든 필드를 추가한 후 다음 단계에서 각 필드를 사용자 지정해야 합니다.

각 필드에 대한 일반 옵션 사용자 정의

일반적으로 각 필드를 사용자 지정하는 옵션에는 두 가지가 있습니다.

기본 옵션 : 모든 필드에는 이러한 옵션이 포함되어 있으며 연락처 양식을 명확하고 이해하기 쉽게 만들기 위해 반드시 함께 작업해야 합니다.

• 레이블 : 표시할 필드 이름을 입력합니다.
• 설명 : 필드 아래에 사용자에게 수행할 작업을 알려주는 텍스트 표시입니다.
• 필수 : 선택사항입니다! 이 필드를 필수로 채우려면 체크하십시오.

다음 단계에서 "기본 정보"를 언급할 때 이러한 기본 옵션을 처리해야 한다는 의미입니다.

고급 옵션 : 각 필드에 대한 몇 가지 고급 기능이 있습니다. 그것들을 처리하는 것은 선택 사항이지만 살펴봐야 할 몇 가지 중요한 사항이 있습니다.

• 자리 표시자 텍스트 : 사용자가 데이터를 입력하기 전에 필드 내부에 텍스트를 표시합니다. 이 텍스트는 사용자가 작성해야 하는 내용을 쉽게 이해할 수 있도록 가이드 또는 예제로 사용할 수 있습니다. 예를 들어 이메일 필드의 자리 표시자 텍스트 를 "이메일을 입력하십시오"로 설정할 수 있습니다.
• 기본값 : 같은 답변을 가진 사람이 많을 경우 기본 답변을 설정하여 사용자의 시간과 노력을 절약할 수 있습니다. 예를 들어, 뉴욕에 사는 사람들을 위한 연락처 양식을 만들면 "위치" 필드에 기본값 "뉴욕"을 입력할 수 있습니다.
• CSS 클래스 : 필드의 스타일을 지정하려면 이 상자에 CSS 클래스를 입력합니다. 다음 단계에서는 이 섹션에 연락처 양식의 스타일을 지정하는 코드를 포함하겠습니다.

참고 :

• Contact Form 7에서는 기본값을 자리 표시자 텍스트로 사용할 수 있습니다. 하지만 Placeholder Text 섹션이 분리되어 있기 때문에 WPForms에서 더 편리합니다. 게다가 WPForms에는 필드 아래에 텍스트를 표시하는 설명 섹션이 있습니다. 이 방법을 사용하면 연락처 양식이 더 보기 좋아집니다.

• 옵션/필드 옆에 있는 물음표 버튼을 클릭하여 WPForms의 지침을 읽을 수 있습니다.

또한 각 필드에 따라 몇 가지 다른 옵션이 있습니다. 그들이 무엇인지 알아보자!

"귀하의 이름" 필드 사용자 지정

Simple Line Text 필드를 선택하고 기본 정보를 입력합니다.

이 필드의 고급 옵션 섹션에는 2개의 추가 옵션이 있습니다.

• 길이 제한 : 필드에 입력할 수 있는 최대 문자 수에 대한 제한을 선택하려면 체크합니다.
• 입력 마스크 : 필드에 특정 형식이 필요한 입력 마스크를 입력합니다. 자세한 내용은 여기를 참조하세요.

"귀하의 전화번호" 필드 사용자 정의

이 분야는 특별한 것이 없습니다. 숫자 필드를 선택하고 기본 정보를 입력하기만 하면 됩니다.

"귀하의 이메일" 필드 사용자 정의

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

이 필드에는 이메일 확인 활성화라는 기본 옵션이 하나 더 있습니다. 사용자에게 이메일 주소를 두 번 제공하도록 요청할 수 있습니다. 이렇게 하면 이메일이 정확한지 확인할 수 있습니다.

"공부할 위치" 및 "주요" 필드 사용자 지정

먼저 드롭다운 필드를 선택합니다. 선택 섹션에서 필드에 대한 옵션을 입력합니다. (+)(-) 를 클릭하여 선택 항목을 추가/제거할 수 있습니다.

또한 일괄 추가 버튼을 클릭하여 한 번에 많은 선택 항목을 추가할 수도 있습니다. 선택 항목 추가 상자에서 원하는 순서대로 선택 항목을 채우고(각 선택 항목은 한 줄임) 새 선택 항목 추가 를 클릭합니다.

또한 이 필드에는 주의해야 할 2가지 고급 옵션이 있습니다.

• 스타일 : 클래식 및 모던의 두 가지 옵션으로 드롭다운 메뉴의 스타일을 지정할 수 있습니다. 현대적인 스타일을 사용하면 키워드로 검색할 수 있습니다. 따라서 옵션이 많은 메뉴(10개 이상의 옵션)에서 잘 작동합니다.
• 동적 선택 : 사용자가 게시물 유형 또는 분류에서 선택 항목을 선택할 수 있도록 합니다. 예를 들어 동적 게시물 유형 소스 를 게시물 로 선택하는 경우 드롭다운 메뉴의 각 선택 항목은 웹사이트의 게시물입니다.

"등록 대상" 필드 사용자 지정

확인란 필드를 선택하고 드롭다운 필드와 같은 선택 항목을 입력합니다.

이 필드에는 주의해야 할 2가지 고급 옵션이 있습니다.

• 이미지 선택 사용 : 선택 을 설명하고 연락처 양식을 더 매력적이고 시각화하는 데 사용할 수 있습니다.
• 무작위 선택 : 이것은 첫 번째 선택이기 때문에 사람들이 선택을 선택하는 것을 피할 수 있습니다.

4단계: 문의 양식 구성

문의 양식을 만든 후 구성해야 합니다. 무료 버전의 WPForms에서는 아래 세 섹션을 구성할 수 있습니다.

일반 설정 구성

WPForms 플러그인에는 이 부분의 각 옵션에 대한 특정 지침이 있습니다. 물음표 버튼을 클릭하고 주의 깊게 읽고 다음 필드에 주의를 기울여야 합니다.

• 제출 버튼 텍스트 : 문의 양식 7에서 제출 필드를 생성해야 합니다. 그러나 WPForms에는 제출 버튼이 내장되어 있습니다. 이 섹션에서 이 버튼의 텍스트를 등록, 이메일 보내기, …
• 스팸 방지 보호 활성화 : 때때로 스패머는 수많은 "휴지통 양식"을 통해 당신을 귀찮게 할 수 있습니다. 이 경우 스팸 방지 기능을 켜야 합니다.

알림 구성

사용자가 문의 양식을 제출할 때마다 이메일 알림을 받으려면 설정 > 알림 으로 이동하세요.

이 섹션의 필드에 "스마트 태그" 또는 텍스트를 추가하여 사용자가 문의 양식을 제출할 때 받는 이메일을 보다 쉽게 ​​관리할 수 있습니다.

참고 : 스마트 태그는 연락처 양식 알림에 정보를 자동으로 추가할 수 있습니다.

이것은 내 설정의 예입니다.

확인 구성

확인 섹션에서 사용자가 문의 양식을 제출한 후 받는 메시지를 구성할 수 있습니다.

모든 구성을 마치면 저장 을 클릭 하십시오 .

5단계: 페이지/게시물에 양식 표시

페이지/게시물에 양식을 표시하려면 2가지 방법이 있습니다.

첫 번째 방법은 페이지에 양식을 표시하기 위해 삽입을 클릭한다 :

그런 다음 사이트의 새 페이지 또는 기존 페이지에 문의 양식을 포함합니다.

두 번째 방법은 문의 양식의 단축 코드를 페이지/게시물에 삽입하는 것입니다. 게시물과 페이지 모두에 문의 양식을 표시 할 수 있으므로 두 번째 방법을 선택하는 것이 좋습니다. 이를 수행하려면 관리 대시보드 에서 WPForms > 모든 양식으로 이동하여 연락처 양식을 찾아 단축 코드를 복사합니다.

그런 다음 이 단축 코드를 원하는 게시물/페이지에 붙여넣습니다.

결과는 다음과 같습니다.

아직 컨택폼 샘플이 아닌 것 같아서 스타일을 좀 바꿔야겠습니다.

6단계: 양식 스타일 지정

관리 대시보드 에서 WPForms > 모든 양식 으로 이동하여 연락처 양식을 찾은 다음 편집 을 클릭합니다.

이제 각 필드를 클릭하고 고급 옵션 > CSS 클래스 로 이동하여 다음 값을 추가합니다.

• 귀하의 이름 및 등록 대상 : ip-100
• 전화번호 , 이메일 , 학업 장소 , 전공 : ip-50

다음으로 Customizer > Addition CSS 로 이동하여 다음 코드를 추가합니다.

 .wpforms-필드 컨테이너 {
    디스플레이: 플렉스;
    플렉스 랩: 랩;
		justify-content: 사이의 공백
}

.ip-50 {
    너비: 48%! 중요;
}

.ip-100{
		너비: 100%! 중요;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	최대 너비: 100%;
}

.ip-100 ul {
	디스플레이: 플렉스;
	justify-content: 공백 사이;
}

div.wpforms-container-full {
    여백-하단: 24px;
    배경: #eeeeee;
    패딩: 20px;
}

마지막으로 게시 를 클릭합니다.

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

문의 양식이 더 보기 좋아졌죠? 글쎄, 우리는 내 샘플과 완전히 유사한 형태를 갖기 위해 마지막 단계를 마쳤습니다.

마지막 말

내 경험상 WPForms와 같은 끌어서 놓기 인터페이스를 사용하는 것이 Contact Form 7을 사용하는 것보다 더 쉽고 빠릅니다. 게다가 미리 작성된 제출 버튼과 플레이스홀더 텍스트 및 설명 과 같은 2개의 더 유용한 섹션이 있습니다. 라이브 미리보기도 매우 편리합니다. 양식을 만들고 사용자 지정할 때 실수를 더 쉽게 감지하는 데 도움이 됩니다.

더 많은 문의 양식 플러그인을 사용하는 방법을 배우려면 이 시리즈의 다음 기사를 따르십시오! WPForms에 대해 질문이 있거나 문의 양식 플러그인을 제안하는 경우 댓글 섹션에 자유롭게 남겨주세요.