WordPress에서 다중 선택 드롭다운 필드를 설정하는 방법(쉬운 방법)

게시 됨: 2020-10-26

WordPress에 다중 선택 드롭다운 필드를 추가해야 합니까? 다중 선택 드롭다운은 사용자가 목록에서 둘 이상의 옵션을 선택할 수 있는 좋은 방법입니다.

이 기사에서는 다중 선택 드롭다운을 직접 만드는 쉽고 빠른 방법을 보여 드리겠습니다. 드롭다운을 만들고 웹사이트에 추가하기 위해 코드를 작성할 필요가 없습니다.

지금 WordPress 양식 만들기

드롭다운에서 여러 옵션을 어떻게 선택합니까?

WPForms를 사용하면 모든 드롭다운을 다중 선택 드롭다운으로 설정할 수 있습니다.

방문자가 목록에서 항목을 클릭하면 더 많은 항목을 선택할 수 있도록 드롭다운이 열린 상태로 유지됩니다.

양식의 WordPress 다중 드롭다운 목록

WPForms는 최고의 WordPress Form Builder 플러그인입니다. 무료로 받으세요!

이 드롭다운을 통해 선택 항목을 검색할 수도 있습니다. 따라서 국가의 드롭다운 목록과 같은 긴 목록에 적합합니다.

다중 선택 드롭다운을 직접 만드는 쉬운 방법을 보여 드리겠습니다.

WordPress에서 다중 선택 드롭다운 필드를 설정하는 방법

이 자습서에서 수행할 단계를 살펴보겠습니다.

WPForms 플러그인 설치
양식 만들기
양식에 다중 선택 드롭다운 필드 추가
웹사이트에 양식 게시

자, 사용할 플러그인을 설치하여 시작하겠습니다.

1단계: WPForms 플러그인 설치

WPForms는 WordPress를 위한 최고의 양식 빌더입니다. 드래그 앤 드롭 빌더를 사용하여 웹사이트를 위한 모든 양식을 만드는 것은 매우 쉽습니다.

양식 만들기를 시작하려면 WordPress에 WPForms 플러그인을 설치하고 활성화해야 합니다. 이 단계에서 도움이 필요하면 플러그인 설치에 대한 이 초보자 가이드를 확인하세요.

모든 설정? 계속해서 첫 번째 양식을 만들어 보겠습니다.

2단계: 양식 만들기

이제 기본 양식을 만들고 여기에 드롭다운을 추가합니다.

이 예에서는 날짜 선택기와 드롭다운이 있는 자원 봉사 양식을 만듭니다.

WPForms에는 훌륭한 자원 봉사 신청서 템플릿이 있습니다. 그러나 이 예에서는 대신 간단한 문의 양식을 시작점으로 사용합니다.

시작하려면 WordPress 대시보드를 열고 WPForms » 새로 추가를 클릭 합니다 .

다단계 드롭다운을 추가하려면 새 양식을 추가하세요.

상단에 양식 이름을 입력하세요. 그런 다음 단순 연락처 양식 템플릿을 클릭하여 브라우저에서 엽니다.

WPForms에서 간단한 연락처 양식 템플릿 열기

이제 템플릿이 열리면 이미 3개의 필드가 있음을 알 수 있습니다.

이름
이메일
댓글 또는 메시지

다중 선택 드롭다운 필드에 대한 새 양식 작성

양식을 작성하는 사람이 도움을 주고 싶은 날짜를 선택할 수 있도록 날짜 필드를 추가해 보겠습니다.

먼저 양식 작성기의 왼쪽에서 오른쪽으로 날짜/시간 필드를 끌어다 놓습니다. 그런 다음 날짜/시간 필드를 한 번 클릭하여 설정을 엽니다.

여기에서 사용자 정의할 2가지 기본 설정이 있습니다.

양식에 맞게 레이블 텍스트 변경
드롭다운을 사용하여 날짜 필드로만 변경합니다.

날짜 시간 필드를 날짜로 변경

이제 고급 옵션 까지 아래로 스크롤하고 클릭하여 설정을 확장합니다.

날짜 필드에 대한 고급 옵션 확장

우리는 평일에만 자원 봉사자를 원하므로 주말이 회색으로 표시되도록 요일 제한을 클릭합니다. 이렇게 하려면 월요일부터 금요일까지를 선택하십시오.

시간 및 날짜 필드의 날짜 제한

확인, 완료되었으므로 저장 을 클릭할 수 있습니다.

다중 선택 드롭다운을 추가해 보겠습니다.

3단계: 양식에 다중 선택 드롭다운 필드 추가

이 단계에서는 드롭다운 필드를 추가한 다음 여러 항목을 선택할 수 있도록 사용자 지정합니다.

먼저 드롭다운을 양식으로 끌어다 보겠습니다. 그런 다음 필드를 클릭하여 왼쪽에 설정이 열리도록 합니다.

다중 선택 드롭다운을 양식으로 드래그

원하는 경우 게시물이나 제품과 같은 WordPress의 다른 부분에서 드롭다운을 자동으로 채울 수 있습니다. 이 문서에서 동적 필드 선택을 사용하는 방법을 찾을 수 있습니다.

그러나 목록을 하드 코딩하려면 WPForms를 사용하면 됩니다. 드롭다운 필드에 대한 몇 가지 유용한 사전 설정 목록과 함께 제공됩니다. 작업 속도를 높이기 위해 사전 설정 중 하나를 사용하여 미국 주 목록을 추가합니다.

먼저 드롭다운 필드 설정에서 대량 추가 를 클릭합니다.

다중 선택 드롭다운에 대량 추가 옵션

그런 다음 사전 설정 표시 를 클릭하여 사용 가능한 사전 설정 목록을 모두 엽니다.

다중 선택 드롭다운 사전 설정 표시

이제 주 를 클릭하여 다중 선택 드롭다운에 추가할 수 있는 미국 주 목록을 자동으로 가져옵니다.

상태 다중 선택 드롭다운

선택 상자에 자동으로 채워지는 상태의 전체 목록이 표시됩니다. 새 선택 항목 추가를 클릭하여 답변 선택 항목 으로 추가합니다.

다중 선택 드롭다운에 답변 선택 추가

드롭다운 필드에 3개의 기본 답변이 있다는 것을 알고 계셨습니까? 기본 선택 항목 옆에 있는 빼기 기호를 클릭하여 제거하는 것을 잊지 마십시오.

다중 선택 드롭다운에서 기본 답변 제거

좋습니다. 드롭다운 필드에 설정된 모든 답변 선택 항목입니다.

이제 우리가 해야 할 일은 WPForms에게 이것이 다중 선택 필드가 되기를 원한다고 말하는 것입니다.

이를 위해 왼쪽에서 아래로 스크롤하여 고급 옵션 을 확장 합니다 .

이 섹션에서 다중 옵션 선택 을 선택하겠습니다.

다중 선택 드롭다운을 만들기 위해 다중 옵션 선택 활성화

바로 아래에 또 다른 중요한 변경 사항이 있습니다.

이 필드의 스타일을 Modern 드롭다운으로 변경해 보겠습니다.

현대적인 스타일의 다중 선택 드롭다운

이 필드를 Modern 스타일로 변경한 이유가 궁금하신가요?

이 필드가 다중 선택 드롭다운에 더 잘 작동하는 3가지 이유가 있습니다.

모던 스타일 필드에는 목록을 확장하는 화살표가 있는 행이 하나 표시됩니다. 따라서 항상 4행을 표시하는 클래식 스타일보다 더 컴팩트합니다.
모던 스타일 필드를 사용하면 키보드의 키를 누르지 않고 여러 항목을 클릭할 수 있습니다. 클래식 필드를 사용하면 방문자가 키보드에서 Ctrl 또는 Command 키를 누른 상태에서 한 번에 둘 이상의 항목을 선택해야 합니다.
그리고 위에서 언급했듯이 Modern syle 다중 선택 드롭다운에는 검색 상자가 있어 원하는 항목을 빠르게 찾을 수 있습니다.

자, 드롭다운이 원하는 방식으로 설정되었습니다. 양식 작성기 상단에 있는 저장 버튼을 클릭하여 지금까지의 진행 상황을 저장해 보겠습니다.

이제 양식을 게시할 수 있습니다. 이것은 마지막 단계이며 몇 분 밖에 걸리지 않습니다.