폼 스타일링
자동 폼 빌더를 사용하면 폼 스타일을 완벽하게 제어할 수 있습니다. 브랜드 색상에 맞춰 글꼴을 사용하고, 간격을 조정하고, 웹사이트에 자연스럽게 어울리는 폼을 디자인하세요.
폼 스타일링이 중요한 이유
웹사이트에는 브랜드가 있습니다. 양식에도 그 브랜드가 반영되어야 합니다.
양식이 사이트의 다른 부분과 다르게 보이면 방문자는 주저하게 됩니다. 자신이 여전히 같은 웹사이트에 있는지 의심하게 되는 것이죠. 이러한 주저함은 전환율 저하로 이어집니다.
세련된 양식은 전문성을 전달하기도 합니다. 깔끔한 양식은 방문자에게 당신이 세부 사항에 신경을 쓴다는 것을 보여주며, 양식 디자인에 신경을 쓴다는 것은 방문자의 데이터 또한 소중하게 여긴다는 것을 의미합니다.
폼 스타일링은 어떻게 작동하나요?
자동 폼 빌더에는 폼 빌더 인터페이스에 내장된 시각적 스타일 편집기가 포함되어 있습니다.
- 스타일링할 항목을 선택하세요폼 컨테이너, 필드 레이블, 입력 필드, 버튼 또는 오류 메시지 중에서 선택하세요.
- 설정 조정색상 선택기, 슬라이더, 드롭다운 메뉴를 사용하여 값을 변경하세요. CSS 구문을 배우거나 기억할 필요가 없습니다.
- 즉시 미리보기모든 변경 사항은 실시간 미리보기에서 즉시 반영됩니다. 게시하기 전에 양식이 어떻게 보일지 정확하게 확인하세요.
- 기본값으로 저장새 양식에 스타일을 자동으로 적용하세요. 한 번만 만들어서 어디에서든 재사용할 수 있습니다.
사용자 정의할 수 있는 것
색상
폼의 모든 색상을 제어하세요. 폼 컨테이너와 개별 필드의 배경색, 레이블, 플레이스홀더 및 입력 텍스트의 색상, 기본, 포커스 및 오류 상태의 테두리 색상, 버튼의 배경, 텍스트 및 마우스 오버 효과 색상을 지정할 수 있습니다.
활판 인쇄술
레이블과 입력 필드에 사용할 글꼴을 선택하세요. 글꼴 크기를 개별적으로 조정할 수 있습니다. 강조를 위해 레이블은 크게, 보조 정보에는 작은 글꼴을 사용하세요. 레이블은 굵게, 입력 텍스트는 얇게 글꼴 두께를 조절할 수도 있습니다.
간격 및 레이아웃
입력란 사이에 간격을 두어 여유 공간을 확보하세요. 입력란 안쪽의 여백을 조정하여 편안하게 텍스트를 입력할 수 있도록 하세요. 전체 폼의 여백을 조절하여 페이지 레이아웃에 맞게 최적의 위치에 배치하세요.
테두리 및 모서리
테두리의 너비, 스타일 및 색상을 정의하세요. 모서리를 둥글게 처리하여 모던한 느낌을 주거나, 날카롭게 유지하여 미니멀한 디자인을 연출할 수 있습니다. 폼의 상태에 따라 다른 테두리 스타일을 적용할 수도 있습니다. 기본적으로는 은은한 테두리를, 포커스가 맞춰진 경우에는 눈에 띄는 테두리를 적용하세요.
버튼
브랜드 이미지에 맞는 제출 버튼을 디자인하세요. 배경색, 텍스트 색상, 테두리 반경, 여백, 글꼴 크기, 글꼴 두께 등을 자유롭게 설정할 수 있습니다. 마우스 오버 및 활성 상태를 맞춤 설정하여 버튼이 반응형으로 작동하고 클릭하기 쉽도록 만드세요.
폼컨테이너
폼 래퍼의 전체 스타일을 지정합니다. 배경색을 추가하거나 투명하게 유지할 수 있습니다. 입체감을 위해 그림자를 적용하고, 폼 컨테이너의 모서리를 둥글게 처리하려면 테두리 반경을 설정합니다. 폼이 너무 넓어지지 않도록 최대 너비를 제어합니다.
일반적인 폼 스타일링 시나리오
브랜드 가이드라인을 준수하세요
귀사에는 특정 색상(기본 색상 #0F2D5F, 강조 색상 #F59E0B)이 있습니다. 스타일 편집기에 해당 값을 입력하세요. 폼 버튼에는 강조 색상이, 폼 레이블에는 기본 색상이 적용됩니다. 완벽한 브랜드 일관성을 유지할 수 있습니다.
고대비 형태를 만드세요
어두운 배경의 웹사이트라면 눈에 띄는 밝은 색상의 폼을 사용하세요. 밝은 배경이라면 시각적으로 경쟁하지 않으면서도 폼 영역을 명확하게 구분하기 위해 은은한 그림자가 있는 테두리 폼을 사용하세요.
미니멀한 형태를 디자인하세요
테두리를 없애고, 간격을 줄이고, 투명한 배경을 사용하세요. 폼이 상자 안에 갇힌 것처럼 보이지 않고 페이지에 자연스럽게 통합된 것처럼 보이도록 만드세요.
눈길을 사로잡는 행동 유도 양식을 만드세요
큼직한 버튼, 강렬한 색상, 넉넉한 여백. 가장 중요한 잠재 고객 확보 페이지를 위해 시선을 사로잡는 양식을 만들어 보세요.
어떤 테마에도 어울리는 양식
자동 폼 빌더는 모든 WordPress 테마와 호환됩니다. 스타일이 적용된 폼은 어떤 디자인 환경에도 자연스럽게 어우러집니다.
Woodmart, Astra, GeneratePress, Divi 또는 기타 테마를 사용하시나요? 폼이 테마에 맞춰 자연스럽게 보일 것입니다. 스타일 편집기를 통해 어떤 디자인 시스템에도 맞출 수 있도록 충분한 제어 기능을 제공합니다.
테마 충돌도 없고, 스타일 상속 문제도 없습니다. 원하는 모습 그대로의 폼을 만들 수 있습니다.
CSS가 필요하지 않습니다.
폼 스타일을 지정하기 위해 사용자 지정 CSS를 작성할 필요가 없습니다. 비주얼 편집기가 모든 것을 처리합니다.
하지만 CSS 제어가 필요하다면, 자동 폼 빌더는 폼별 사용자 지정 CSS를 지원합니다. 예외적인 상황에 대한 재정의를 추가하거나 비주얼 편집기에서 사용할 수 없는 고급 스타일을 적용할 수 있습니다. 고급 사용자는 필요한 유연성을 얻을 수 있습니다.
