버튼/폼

버튼/폼의 블록 종류와 설정 방법을 알아봅니다.

버튼/폼이란?

버튼/폼에는 버튼 블록과 입력폼 블록을 담고 있습니다.

버튼 블록은 URL입력을 하여 특정 사이트로 이동 및 내부 콘텐츠의 위치로 이동 등 다방면의 용도로 사용이 됩니다.

입력폼 블록은 신청서, 설문조사 등을 항목을 다양하게 생성하여 사용자에게 정보를 받기 위한 용도로 사용이 됩니다. 등록이 된 정보는 관리자 페이지의 [운영관리 > 콘텐츠 > 입력폼 관리]를 통해 관리가 가능합니다.

블록 설정 방법

  1. 사용하려는 블록을 추가합니다.

  2. 퀵 메뉴의 상세설정을 클릭합니다.

  3. 아래 상세 설정을 참고하여, 설정을 변경합니다.

블록을 더블 클릭하여 상세 설정창을 열 수 있습니다.

1. 버튼 블록

사이트 링크연결, 내부 링크 연결 등 다양한 클릭 이벤트를 활용할 수 있습니다.

버튼 블록_설정 항목

설정 항목

텍스트 버튼의 텍스트를 입력합니다.

클릭 이벤트 클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 할 수 있습니다.

사용하지않음

블록 클릭 시 아무런 동작을 하지않습니다.


사이트 링크 연결

블록 클릭 시 등록한 URL로 이동을 합니다.

  • 새창으로 열기 설정 시 새로운 창에서 연결이 된 링크의 사이트가 열리게 됩니다.


내부링크연결

사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.

  • 페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.


SNS 공유하기

카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택할 수 있습니다.

  • 버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.


현재 URL복사하기

블록이 적용이 된 페이지의 URL을 복사합니다.


커스텀 자바스크립트

CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.

  • 스크립트 입력 시 <script> </script> 는 제외한 자바스크립트만 입력을 합니다.

  • 입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.


전화 걸기

버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.

  • 전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)

  • 전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.


문자 보내기

버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.

  • 전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)

  • 전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.


이메일 보내기

버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.


페이지 상단 이동

버튼 클릭 시 페이지 상단으로 이동합니다.

  • 헤더 숨김 시 기능이 동작하지 않습니다.


페이지 하단 이동

버튼 클릭 시 페이지 하단으로 이동합니다.

  • 푸터 숨김 시 기능이 동작하지 않습니다.


공통 페이지 이동

로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.

2.입력폼 블록

입력폼은 신청서, 설문조사 등을 항목을 다양하게 생성하여 사용자에게 정보를 받기 위한 용도로 사용이 됩니다. 등록이 된 정보는 관리자 페이지의 [운영관리 > 콘텐츠 > 입력폼 관리]를 통해 관리가 가능합니다.

자세한 설정 방법은 아래 내용을 참고해주세요.

2-1. 기본

설정 항목

DB 연동 기존에 생성이 된 입력폼을 불러옵니다. * 하나의 입력폼을 여러 페이지에 중복 사용 가능

이름 관리를 위한 입력폼의 이름을 설정합니다.

2-2. 구성

구성_필드(아코디언방식)

입력폼을 통해 수집하는 정보에 따라 다양한 필드를 사용해 구성을 할 수 있습니다.

[ + 입력 필드 추가] 클릭하여, 다양한 필드를 추가할 수 있으며 각 필드의 자세한 설명은 아래 [필드 상세 설정]내용을 참고 부탁드립니다.

필드 상세 설정

필드의 형식은 크게 직접 입력을 하는 방식과 목록을 선택하는 방식으로 나뉘게 됩니다.

입력 방식

입력 방식은 항목에 대한 답변은 사용자가 직접 입력하는 형태의 필드입니다.

  • 단답입력 : 이름/메일주소/연락처 등의 정보를 받는 용도로 사용이 됩니다.

  • 장문입력 : 사용자가 장문의 글 입력합니다.

  • 주소 : 사용자의 주소를 입력합니다.

  • 날짜/시간 : 날짜&시간 날짜, 시간 유형을 선택하여 사용합니다.

설정 항목

제목 항목의 제목을 입력합니다.

필수 입력 필수로 입력을 해야할 경우 활성화 합니다.

설명 제목 아래 보여질 필드에 대한 설명을 입력합니다.

힌트 텍스트 입력 필드에 보여질 안내 텍스트를 입력합니다.

  • 단답 입력, 장문 입력 필드만 사용 가능

유형 입력창의 표시 형태를 선택합니다.

  • 단답 입력, 날짜/시간 필드만 사 가능

너비 입력폼에 적용 된 필드의 가로 너비를 설정합니다.

선택 방식

선택 방식은 생성 된 옵션 목록 중 사용자가 선택을 하는 형태의 필드입니다.

  • 복수선택 : 선택 옵션 중 여러개의 옵션을 선택합니다.

  • 단일선택 : 선택 옵션 중 하나의 옵션만 선택을 합니다.

  • 목록선택 : 목록 리스트 중 하나의 옵션만 선택합니다.

설정 항목

제목 항목의 제목을 입력합니다.

필수 입력 필수로 입력을 해야할 경우 활성화 합니다.

설명 제목 아래 보여질 필드에 대한 설명을 입력합니다.

선택 옵션 [+ 옵션 추가] 버튼을 클릭하여 선택 옵션을 생성합니다.

너비 입력폼에 적용 된 필드의 가로 너비를 설정합니다.

기타 방식

기타 방식은 입력폼을 통해 추가 정보를 수집하는 목적으로 사용이 됩니다.

  • 약관동의 : 사용자가 약관의 내용을 확인하고, 동의 체크를 하는 항목입니다.

  • 파일업로드 : 사용자가 제출할 파일을 업로드 합니다.

    • 최대 20MB까지 업로드 가능

  • 본문글 : 관리자가 입력폼을 통해 사용자에게 제공할 설명을 노출합니다.

설정 항목

제목 항목의 제목을 입력합니다.

필수 입력 필수로 입력을 해야할 경우 활성화 합니다.

설명 제목 아래 보여질 필드에 대한 설명을 입력합니다.

약관 내용 약관의 내용을 입력합니다.

  • 약관 동의 필드만 사용 가능

스타일 약관의 내용을 보여주는 방식을 선택합니다.

  • 약관 동의 필드만 사용 가능

너비 입력폼에 적용 된 필드의 가로 너비를 설정합니다.

구성_버튼

입력폼 제출 버튼의 명칭 및 제출 완료 시 노출이 되는 문구 등을 설정할 수 있습니다.

자세한 설정 방법은 아래 내용을 참고해주세요.

버튼 설정
항목 설명

버튼명 버튼에 보여지는 텍스트를 기재합니다.

제출 완료 안내 문구 입력폼 제출 시 얼럿을 통해 보여질 안내 문구를 입력합니다.

  • 미 입력 시 “제출이 완료되었습니다.” 의 문구가 노출 됩니다.

클릭 이벤트 클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 할 수 있습니다.

사용하지않음

블록 클릭 시 아무런 동작을 하지않습니다.


사이트 링크 연결

블록 클릭 시 등록한 URL로 이동을 합니다.

  • 새창으로 열기 설정 시 새로운 창에서 연결이 된 링크의 사이트가 열리게 됩니다.


내부링크연결

사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.

  • 페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.


SNS 공유하기

카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택할 수 있습니다.

  • 버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.


현재 URL복사하기

블록이 적용이 된 페이지의 URL을 복사합니다.


커스텀 자바스크립트

CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.

  • 스크립트 입력 시 <script> </script> 는 제외한 자바스크립트만 입력을 합니다.

  • 입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.


전화 걸기

버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.

  • 전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)

  • 전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.


문자 보내기

버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.

  • 전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)

  • 전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.


이메일 보내기

버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.


페이지 상단 이동

버튼 클릭 시 페이지 상단으로 이동합니다.

  • 헤더 숨김 시 기능이 동작하지 않습니다.


페이지 하단 이동

버튼 클릭 시 페이지 하단으로 이동합니다.

  • 푸터 숨김 시 기능이 동작하지 않습니다.


공통 페이지 이동

로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.

2-2. 구성(탭 방식)

2-3.스타일

스타일 설정을 통해 입력 필드와 버튼의 위치 서체, 색상 등을 설정할 수 있습니다.

자세한 설정 방법은 아래 내용을 참고해주세요.

필드설정
설정항목

필드/버튼 간격 : 입력 필드와 버튼 사이의 간격을 설정합니다.

글자 필드의 제목과 설명의 서체, 글자크기, 두께를 설정합니다. 색상 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.

  • % 조절을 통해 투명를 설정합니다.

입력 힌트 필드의 입력 힌트 색상을 설정합니다.

버튼 설정
설정항목

배치 버튼의 정렬 위치, 너비와 높이를 설정합니다.

글자 필드의 제목과 설명의 서체, 글자크기, 두께를 설정합니다.

색상 색상 코드를 입력하거나, 컬러피커에서 색상을 선택할 수 있습니다.

  • % 조절을 통해 투명를 설정합니다.

  • 기본설정 과 마우스 오버 개별 설정 가능

3. 제출 내용 확인하기

3-1. 접수 내역 확인하기

입력폼을 통해 제출이 된 정보는 [관리자페이지 > 운영관리 > 콘텐츠 > 입력폼 관리]로 수집되어 저장이 됩니다.

3-2. 제출 알림 받기

사용자가 입력폼을 통해 정보를 제출 할 경우 메일, SMS/알림톡을 통해 제출 여부를 확인할 수 있습니다. [관리자페이지 > 운영관리 > 메시지 > 발신 기본설정 ]에서 메일, SMS/알림톡 설정을 하실 수 있습니다.

3-3. 제출 정보 수집하기

[재피어 연동하기] 를 통해 사용자가 제출한 폼의 내용을 구글 스프레드시트, G-mail 등으로 수집해볼 수 있습니다.

Last updated

Was this helpful?