#폼 양식 01 – 회원가입

#폼 양식 01 – 회원가입

JetFormBuilder를 사용한 회원가입 필드 위젯 스타일입니다
최근 수정
2024-08-02 15:20:51
우측 "색인" 버튼으로 토글 가능합니다

이 위젯 스타일은 JetFormBuilder로 생성한 회원가입 폼 양식을 특수한 용도에 맞춰 표현하기 위해 제작되었습니다.

  • Label 요소가 사용자의 포커스에 따라 크기와 위치가 변화합니다.
  • 구글 크롬에서 자동입력이 활성화 됐을 때,  User Agent가 렌더링하는 하늘색 배경을 감춥니다.

템플릿 설치

01
JetFormBuilder 설치

JetFormBuilder는 Crocoblock사의 무료 폼 양식 생성 플러그인입니다. 다른 폼 양식 플러그인들은 자체 생성 시스템을 가지고 있지만 JetFormBuilder는 워드프레스 기본 구텐베르그 에디터 기반으로 생성하기 때문에 호환성과 사용성 등 많은 측면에서 장점을 가지고 있습니다. 다만, 무료 버전은 로그인과 관련된 Action을 사용할 수 없습니다.

  • 워드프레스 플러그인 추가 화면에서 JetFormBuilder로 검색하여 해당 플러그인을 설치하고 활성화 합니다.
  • 다운로드 받은 템플릿의 압축파일을 열고  워드프레스 관리자화면 → JetFormBuilder → Forms → Import Forms에서 jetcraft-회원가입-배포용.json을 임포트합니다.
  • 추후에 Remember Me 체크박스나 이메일을 통한 검증을 추가할 때는 이 양식을 수정하면 됩니다.
02
템플릿 설정

다운로드 받은 템플릿 파일의 나머지 json 파일을 엘리멘터 템플릿에서 임포트 한 후, JetForms 위젯 편집화면에서 이전에 업로드 한 폼 양식을 선택합니다.

폼을 다른 템플릿으로 옮길 때는 핵심 레이어인 🚀 jetcraft-ws-forms-01-registration를 복사하세요.

폼 양식의 하단에 경고 아이콘과 함께 메세지들이 한 줄에 중첩되서 표현되어 있는데, 이들은 실제 라이브 화면에서 양식 안쪽으로 제대로 자리를 잡습니다. JetFormBuilder의 의도이므로 버그가 아닙니다.

네비게이터에서 폼 위젯을 선택합니다.

폼 위젯의 Choose Form에서 이전에 업로드한 양식을 선택합니다.

03
위젯 스타일 수정

🚀 Settings - jetcraft-ws-forms-01에서 폼의 스타일을 수정할 수 있습니다. 중요한 지역변수가 상단에 위치하고 있습니다. 지역변수 중 --hide-autocomple-color: #fff는 구글 크롬에서 자동 입력 활성화 시 User Agent가 강제로 필드 배경에 하늘색을 입히는 기믹을 무효화하는 트릭입니다.

사실 이런 트릭들은 그다지 바람직하지 않지만 특수한 목적의 디자인에 방해가 될 때는 사용을 고려할 수 있습니다. 만일 사용자의 웹사이트 배경색이 #ebebeb라면 이 지역변수의 색상도 동일하게 변경하세요.

04
기타 기능 추가

이 템플릿은 회원가입 필드의 스타일링에 촛점이 맞춰져 있습니다. Remember Me 혹은 이메일을 통한 검증 추가는 아래의 동영상 링크를 통해 쉽게 구현할 수 있습니다. 동영상에서는 새로운 폼 양식을 만들지만 우리는 기존에 업로드한 양식을 동영상의 가이드를 참고하면서 수정하면 됩니다.

동영상 재생

연관 템플릿