CMS: 드롭다운 입력 요소를 사용해 사용자 지정 양식 설정하기
21 분
페이지 메뉴
- 1 단계 | 드롭다운 요소 추가하기
- 2 단계 | CMS에 연결하기
- 3 단계 | 컬렉션 권한 설정하기
- 4 단계 | 제출 버튼 추가하기
- 5 단계 | 드롭다운 요소 사용자 지정하기
- 자주 묻는 질문
방문자가 드롭다운 입력을 사용해 선택지를 CMS 컬렉션에 직접 제출할 수 있는 사용자 지정 양식을 추가하세요. 이 도움말은 드롭다운 입력 요소 및 '제출' 버튼을 추가하는 과정을 안내합니다. 방문자 제출 양식을 CMS 컬렉션에 저장할 수 있는 데이터세트에 두 요소를 연결합니다.
이 단계를 완료한 후에는 더 많은 입력 요소를 추가하고 동일한 데이터세트에 연결해 양식을 확장할 수 있습니다.
시작하기 전:
아직 추가하지 않았다면, 사이트에 CMS를 추가하세요.
1 단계 | 드롭다운 요소 추가하기
에디터에서 사용자 지정 양식을 생성하고자 하는 페이지로 이동한 후, 드롭다운 요소를 추가하세요.
Wix 에디터
Studio 에디터
- 에디터로 이동합니다.
- 입력 요소를 추가할 페이지로 이동합니다.
- 에디터 왼쪽에서 요소 추가
를 클릭합니다. - 입력 요소를 클릭합니다.
- 드롭다운을 클릭합니다.
- 사용하고자 하는 드롭다운을 클릭해 페이지로 끌어다 놓습니다.
도움말:
방문자가 제출해야 하는 각 정보 유형에 대해 더 많은 입력 요소를 추가하세요. 추가하는 입력 요소는 연결할 수 있는 입력란 유형 및 저장할 수 있는 데이터 유형을 결정합니다.
2 단계 | CMS에 연결하기
제출 양식을 저장할 CMS 컬렉션에 연결되는 데이터세트에 드롭다운을 연결합니다.
드롭다운 목록에 표시되는 옵션을 수동으로 추가하거나 다른 CMS 컬렉션 아이템을 사용할 수 있습니다. CMS의 아이템을 사용하려면 다른 컬렉션의 입력란에 연결되는 다른 데이터세트에 드롭다운 목록 옵션을 연결하세요.
Wix 에디터
Studio 에디터
- 에디터에서 제출 양식을 저장할 컬렉션에 연결되는 데이터세트를 추가합니다.
- 왼쪽에서 CMS
를 클릭합니다. - 콘텐츠 요소 추가를 클릭합니다.
- 양식 데이터세트를 클릭합니다.
- 컬렉션 선택 드롭다운을 클릭해 제출 양식을 저장할 컬렉션을 선택합니다.
- 데이터세트에 이름을 지정합니다(예: '제출 양식').
- 생성하기를 클릭합니다.
- 왼쪽에서 CMS
- 드롭다운 요소를 클릭한 후 오른쪽의 연결 드롭다운 패널에서 콘텐츠 수집을 선택합니다.
- 데이터세트 선택 드롭다운을 클릭해 '제출 양식' 데이터세트를 선택합니다.
- 제출 양식을 저장하기 위해 드롭다운 입력 요소를 새 컬렉션 입력란에 연결합니다.
- 값 연결 대상 드롭다운을 클릭한 후 입력란 추가를 선택합니다.
- 새 컬렉션 입력란의 입력란 이름을 입력합니다.
- (코딩만 해당) 사이트 코드에서 해당 입력란을 식별하는 입력란 키를 입력합니다. 이는 추후 변경할 수 없습니다.
- 입력란 유형 드롭다운을 클릭해 수집하려는 데이터 유형에 따라 '텍스트', '숫자', '참조' 입력란 유형을 선택합니다. 도움말: '참조' 입력란 유형의 경우, 드롭다운에서 참조된 컬렉션을 선택하세요.
- 추가를 클릭합니다.
- 컬렉션 옵션 표시 버튼을 클릭해 드롭다운의 선택지를 관리할 위치를 선택합니다.
- 활성: 선택지에 다른 CMS 컬렉션의 입력란을 사용합니다. 해당 데이터세트를 연결하고 라벨 및 값 연결 대상 드롭다운에서 사용할 입력란을 선택합니다.
- 비활성: 선택지 관리를 클릭해 CMS와 별도로 요소에 대한 정적 선택지를 추가합니다.
- (다른 입력 요소를 추가한 경우) 입력을 '제출 양식' 데이터세트에 연결합니다.
- 해당 입력 요소를 클릭합니다.
- CMS에 연결
아이콘을 클릭합니다. - 위의 3-4 단계를 반복해 입력을 '제출 양식' 데이터세트에 연결합니다.
- 사용자 지정 CMS 양식에 추가하려는 각 입력 요소에 대해 이 단계를 반복합니다.
데이터 세트 모드는 어떻게 되나요?
- '양식 데이터세트'를 추가했다면, 이미 '쓰기' 모드로 올바르게 설정되어 있습니다. 이 모드는 데이터세트가 드롭다운 입력 요소의 제출 양식을 기반으로 '제출 양식' 컬렉션에 새 아이템을 추가할 수 있도록 합니다.
- 방문자가 드롭다운 요소에서 선택하는 목록 옵션을 연결한 경우, 별도의 데이터세트가 '읽기' 또는 '읽기 및 쓰기' 모드인지 확인합니다.
- 기존 컬렉션 아이템을 업데이트하기 위해 CMS 양식이 필요한 경우, '제출 양식' 데이터세트를 '읽기 및 쓰기' 모드로 설정합니다. 컬렉션 권한 역시 관련 역할을 가진 사용자가 콘텐츠를 업데이트할 수 있도록 설정합니다.
3 단계 | 컬렉션 권한 설정하기
제출 양식을 저장할 컬렉션에 대한 권한을 설정하세요. 방문자가 콘텐츠를 추가할 수 있도록 허용하는 프리셋 콘텐츠 수집 설정을 선택한 후 추가할 수 있는 사용자를 지정할 수 있습니다. 또는, 고급 권한을 선택해 컬렉션 아이템을 확인, 추가, 업데이트 및 삭제할 수 있는 사용자를 제어할 수 있습니다.
Wix 에디터
Studio 에디터
- 에디터 왼쪽에서 CMS
를 클릭합니다. - 내 컬렉션을 클릭합니다.
- '제출 양식' 컬렉션에 마우스오버해 추가 작업
아이콘을 클릭합니다. - 권한 및 공개 설정을 클릭합니다.
- 컬렉션에 사용할 권한을 선택합니다.
- 컬렉션에 사용할 권한 유형을 선택합니다.
콘텐츠 수집
고급
4 단계 | 제출 버튼 추가하기
방문자가 입력하거나 선택한 입력 요소 응답을 제출할 수 있는 방법을 제공해야 합니다. 기본 버튼 또는 이미지를 추가하고 데이터세트의 '제출' 클릭 작업에 연결해 '제출' 버튼을 추가합니다. 방문자가 '제출' 버튼을 클릭하면 드롭다운 입력 및 '제출' 데이터세트에 연결한 기타 모든 입력의 값이 컬렉션에 저장됩니다. 데이터세트 모드 및 컬렉션 권한에 따라 값이 새 아이템으로 추가되거나 기존 아이템을 업데이트하는 데 사용됩니다.
다음 데이터세트 작업에 대해 별도의 버튼을 생성할 수도 있습니다.
- 신규: (데이터세트 모드에 따라) 컬렉션 아이템을 추가 또는 업데이트하고 새 값을 허용하도록 입력을 재설정합니다.
- 복원: 아직 제출되지 않은 입력 요소의 값을 재설정합니다.
- 삭제: 컬렉션에서 선택한 아이템을 제거합니다('읽기 및 쓰기' 모드만 해당).
- 다음 페이지/ 이전 페이지: 방문자가 편집하는 아이템을 갤러리 또는 반복 레이아웃에 표시하는 경우, 이러한 버튼을 추가해 방문자가 아이템의 "페이지"를 탐색할 수 있도록 할 수 있습니다. 동적 아이템 페이지에서 양식을 생성한 경우 대신 다음 동적 페이지 / 이전 동적 페이지 클릭 작업을 사용합니다.
Wix 에디터
Studio 에디터
- 에디터 왼쪽에서 요소 추가를 클릭합니다.
- 버튼을 클릭합니다.
- 제출 버튼으로 사용할 버튼을 클릭해 페이지에 끌어다 놓습니다. 추천 디자인 버튼, 텍스트 및 아이콘 버튼, 아이콘 버튼, 또는 이미지 버튼과 같은 버튼 유형을 사용할 수 있습니다.
도움말: 또는 이미지를 추가해 제출 버튼으로 사용할 수도 있습니다.
- 텍스트 및 아이콘 변경을 클릭하고 버튼에 표시할 텍스트(예: "제출")을 입력합니다.
- CMS에 연결 아이콘을 클릭합니다.
- 데이터세트 선택 드롭다운을 클릭해 제출 양식 컬렉션에 연결된 데이터세트를 선택합니다.
- 클릭 시 수행 작업 드롭다운을 클릭한 후 제출을 선택합니다.
- (선택사항) 제출이 성공하거나 실패할 때 표시되는 성공 및 실패 메시지를 추가합니다.
- + 성공 메시지 추가를 클릭한 후 + 실패 메시지 추가를 클릭합니다.
- 두 메시지를 클릭해 원하는 위치로 끌어다 놓습니다. 두 메시지는 동시에 표시되지 않으므로 겹치게 놓을 수 있습니다.
- 각 메시지에서 텍스트 편집을 클릭해 메시지를 편집합니다.
- 버튼을 선택한 후 CMS에 연결 아이콘을 클릭합니다. 그리고, 성공 시 이동 페이지 드롭다운을 클릭해 옵션을 선택합니다.
- 페이지에 남기: 방문자는 양식을 제출한 후 동일한 페이지에 머무릅니다.
- 링크: 방문자는 양식을 제출한 후 다른 페이지로 리디렉트됩니다. 링크 선택 아래에서 선택하기를 클릭해 링크를 설정합니다.
- 버튼을 클릭한 후 디자인
아이콘을 선택해 '제출' 버튼 디자인을 사용자 지정합니다.
5 단계 | 드롭다운 요소 사용자 지정하기
드롭다운 설정에서 제목, 플레이스홀더 텍스트 및 기타 옵션을 설정합니다. 디자인 패널에서 요소의 디자인과 분위기를 사용자 지정하고 레이아웃 패널에서 정렬, 간격 및 여백을 조정합니다.
Wix 에디터
Studio 에디터
- 에디터에서 드롭다운 요소를 클릭합니다.
- 설정을 클릭해 다음을 편집합니다.
- 입력란 텍스트: 드롭다운 요소 상단에 표시될 제목을 입력합니다.
- 기본 텍스트 표시: 방문자가 드롭다운 요소를 클릭하기 전 표시할 초기 텍스트를 선택합니다.
- 표시하지 않음: 방문자가 드롭다운 요소를 클릭하기 전에 빈 상자가 표시됩니다.
- 플레이스홀더 텍스트: 드롭다운 요소에 고유한 텍스트를 사용합니다(예: "색상을 선택하세요"). 플레이스홀더 텍스트 입력란에 텍스트를 입력합니다.
- 드롭다운 아이템: 드롭다운 목록에서 아이템을 표시합니다. 목록을 CMS에 연결한 경우 표시되는 아이템은 방문자가 선택할 수 있는 첫 번째 드롭다운 선택지입니다. 목록 아이템을 CMS에 연결하지 않은 경우 목록 아이템 선택을 클릭해 표시할 아이템을 선택합니다.
- 자동 완성: 버튼을 클릭해 방문자가 드롭다운에서 검색어를 입력할 때 수행되는 작업을 결정합니다.
- 활성: 입력한 텍스트와 일치하는 선택지만 드롭다운에 표시됩니다.
- 비활성: 모든 선택지가 드롭다운에 표시됩니다.
- 드롭다운 목록 유형: 옵션을 선택합니다.
- 사용자 지정: 디자인 패널에서 드롭다운 요소를 사용자 지정합니다. 모바일에서 목록 유형은 항상 브라우저로 설정됩니다.
- 브라우저: 드롭다운 요소에 브라우저의 기본 테마를 사용합니다.
- 필수 입력란 지정: 필수 입력사항으로 지정 체크상자를 선택해 방문자가 제출 양식을 제출하기 전 드롭다운 목록에서 아이템을 선택하도록 합니다.
- 레이아웃
아이콘을 클릭해 텍스트 정렬과 요소의 여백 및 간격을 조정합니다. - 디자인
아이콘을 클릭해 프리셋 디자인을 선택한 다음 디자인 사용자 지정을 선택해 드롭다운 요소의 디자인을 추가로 조정합니다. - (선택사항) 애니메이션
아이콘을 클릭해 요소에 애니메이션을 추가합니다.
사이트를 온라인에 공개할 준비가 되었다면,
에디터 오른쪽 상단의 미리보기를 클릭해 새로운 사용자 지정 드롭다운 양식을 테스트합니다. 모든 것이 멋지고 완벽하게 작동한다면, 게시를 클릭해 변경사항을 적용합니다.
샌드박스를 활성화한 경우, 샌드박스 컬렉션을 라이브 컬렉션에 동기화해 데이터베이스 변경사항을 라이브로 적용하세요.
자주 묻는 질문
드롭다운 요소를 CMS에 연결하는 방법에 대한 가장 일반적인 질문과 답변을 확인하려면 아래 질문을 클릭하세요.
제출 양식이 CMS 컬렉션에 저장되지 않는 문제를 해결하려면 어떻게 해야 하나요?
컬렉션에 저장된 제출 양식을 내보낼 수 있나요?
제출 양식을 받을 때 발생하는 작업을 자동화할 수 있나요?
사이트 방문자가 입력 요소를 사용해 사이트에 표시되는 콘텐츠를 필터링할 수 있나요?
제출 양식을 표, 갤러리 또는 반복 레이아웃에 표시할 수 있나요?
회원이 제출 양식을 업데이트하도록 허용하려면 어떻게 해야 하나요?
드롭다운 요소를 '참조' 입력란에 연결할 경우 옵션 목록은 어디에서 가져오나요?
단일 CMS 컬렉션에 여러 양식을 연결하려면 어떻게 해야 하나요?