문의 양식 디자인

문의 양식을 추가한 후 표시 방식을 사용자 정의할 수 있습니다. 이 가이드에서는 웹사이트 양식의 스타일, 색상 및 레이아웃을 변경하는 방법을 알아봅니다.

양식 블록에는 선택할 수 있는 다양한 양식 디자인 스타일이 포함되어 있습니다.

1. 편집기 왼쪽 상단에서  목록 보기를 선택합니다. 아이콘은 가로줄 3개처럼 보이는 모양입니다.
2. 여기에서 양식 블록을 찾아서 클릭합니다.

3. 오른쪽 사이드바의 블록 설정에서 스타일 탭(흑백 원 아이콘으로 표시)을 클릭합니다.

4. 다음 중에서 스타일을 선택합니다.
   • 기본값은 입력 필드 외부에 애니메이션이 없는 필드 이름을 표시합니다.
   • 애니메이션은 입력 필드 내부의 필드 이름, 간단한 애니메이션을 표시하고 방문자가 클릭한 필드도 강조 표시합니다.
   • 윤곽선은 항상 입력 필드 내부의 필드 이름, 간단한 애니메이션 및 양식 블록 설정 주위의 윤곽선을 표시합니다.
5. 화면 상단의 “저장” 버튼을 클릭합니다.

플레이스홀더 텍스트는 방문자가 클릭하기 전에 양식 필드에 표시될 수 있는 샘플 텍스트이며, 직접 텍스트를 입력하기 위해 클릭하면 사라집니다. 방문자에게 양식에 입력할 것으로 예상되는 콘텐츠 유형의 예를 보여주는 것이 유용할 수 있습니다.

문의 양식에 플레이스홀더 텍스트를 추가하려면 다음 단계를 따릅니다.

1. 양식에서 아무 필드나 클릭합니다.
2. 블록 설정 사이드바를 엽니다.
3. 아래로 스크롤하여 “플레이스홀더 텍스트” 설정으로 이동합니다.
4. 제공되는 상자에 플레이스홀더 텍스트를 입력합니다. 그러면 텍스트가 양식 필드에 표시됩니다.
5. 화면 상단의 “저장” 버튼을 클릭합니다.

기본적으로 양식 내의 필드는 양식 컨테이너의 폭을 채웁니다. 다음 단계에 따라 개별 필드의 폭을 변경할 수 있습니다.

1. 양식에서 아무 필드나 클릭합니다.
2. 블록 설정 사이드바를 엽니다.
3. 폭 설정으로 아래로 스크롤하여 폭을 25%, 50%, 75% 또는 100%로 설정합니다.
   • 두 필드가 나란히 표시되도록 하려면 각 필드를 50%로 설정합니다. 공간이 있으면 여러 필드가 한 줄에 표시될 수 있습니다.
4. 화면 상단의 “저장” 버튼을 클릭합니다.

각 개별 양식 필드에 대해 색상과 텍스트가 표시되는 방식을 편집하거나 각 양식 필드가 동일한 색상과 텍스트 설정을 모두 사용하도록 설정할 수 있습니다.

개별 양식 필드를 클릭하면 블록 설정에 “필드 스타일 동기화” 토글이 포함됩니다. 켜기 위치로 설정하면 이 필드에 적용한 변경 사항은 모든 필드에 적용됩니다. 해당 필드에 대한 설정만 변경하려면 끄기 위치로 클릭합니다.

모든 필드에서 다음 변경 사항을 동기화하여 양식 전체에서 일관된 시각적 환경을 보장할 수 있습니다.

• 색상: 다음에 대한 색상을 설정합니다.
  • 레이블 텍스트: 양식 필드 위에 표시되는 텍스트입니다.
  • 필드 텍스트: (선택 사항) 플레이스홀더 텍스트와 필드의 입력 텍스트입니다.
  • 필드 배경: 양식 필드의 입력 섹션 배경입니다.
  • 경계선: 양식 필드 주위의 경계선입니다.
• 입력 필드 스타일: 필드의 텍스트 크기, 줄 높이 및 테두리 스타일을 설정합니다.
• 레이블 스타일: 필드 레이블의 텍스트 크기와 줄 높이를 설정합니다.

양식의 색상을 조정하려면 다음 단계를 따르세요.

1. 목록 보기를 열고 양식 블록과 블록 내의 개별 필드를 찾습니다.

2. 전체 양식 블록을 선택한 상태에서 사이드바의 블록 설정을 열고 스타일 탭(흑백 원 아이콘)을 클릭합니다.
3. 색상 설정을 사용하여 양식의 텍스트 색상, 배경 색상 및 양식에 사용된 링크의 색상을 제어할 수 있습니다.

4. 그런 다음 개별 양식 필드를 클릭하고 블록 설정을 다시 엽니다.
5. 여기에서 각 개별 양식 필드에 대해 다음 색상을 제어할 수 있습니다.
   • 레이블 텍스트: 양식 필드 위에 표시되는 텍스트입니다.
   • 필드 텍스트: (선택 사항) 플레이스홀더 텍스트와 필드의 입력 텍스트입니다.
   • 필드 배경: 양식 필드의 입력 섹션 배경입니다.
   • 경계선: 양식 필드 주위의 경계선입니다.
6. “필드 스타일 동기화” 토글을 활성화하여 변경 사항을 모든 필드에 적용하거나 비활성화하여 각 필드를 개별적으로 제어하세요.
7. 화면 상단의 “저장” 버튼을 클릭합니다.